#921@trivial: Adds support for "width" and "height" rules to media qu…

…eries.
capricorn86 · May 18, 2023 · 1c8e533 · 1c8e533
1 parent 0e50f0f
commit 1c8e533
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 6 deletions.
diff --git a/packages/happy-dom/src/match-media/MediaQueryItem.ts b/packages/happy-dom/src/match-media/MediaQueryItem.ts
@@ -205,6 +205,8 @@ export default class MediaQueryItem {
 				case 'max-width':
 				case 'min-height':
 				case 'max-height':
+				case 'width':
+				case 'height':
 				case 'orientation':
 				case 'prefers-color-scheme':
 				case 'hover':
@@ -233,6 +235,12 @@ export default class MediaQueryItem {
 			case 'max-height':
 				const maxHeight = this.toPixels(rule.value);
 				return maxHeight !== null && this.ownerWindow.innerHeight <= maxHeight;
+			case 'width':
+				const width = this.toPixels(rule.value);
+				return width !== null && this.ownerWindow.innerWidth === width;
+			case 'height':
+				const height = this.toPixels(rule.value);
+				return height !== null && this.ownerWindow.innerHeight === height;
 			case 'orientation':
 				return rule.value === 'landscape'
 					? this.ownerWindow.innerWidth > this.ownerWindow.innerHeight
@@ -269,20 +277,29 @@ export default class MediaQueryItem {
 			case 'max-aspect-ratio':
 			case 'aspect-ratio':
 				const aspectRatio = rule.value.split('/');
-				const width = parseInt(aspectRatio[0], 10);
-				const height = parseInt(aspectRatio[1], 10);
+				const aspectRatioWidth = parseInt(aspectRatio[0], 10);
+				const aspectRatioHeight = parseInt(aspectRatio[1], 10);
 
-				if (isNaN(width) || isNaN(height)) {
+				if (isNaN(aspectRatioWidth) || isNaN(aspectRatioHeight)) {
 					return false;
 				}
 
 				switch (rule.name) {
 					case 'min-aspect-ratio':
-						return width / height <= this.ownerWindow.innerWidth / this.ownerWindow.innerHeight;
+						return (
+							aspectRatioWidth / aspectRatioHeight <=
+							this.ownerWindow.innerWidth / this.ownerWindow.innerHeight
+						);
 					case 'max-aspect-ratio':
-						return width / height >= this.ownerWindow.innerWidth / this.ownerWindow.innerHeight;
+						return (
+							aspectRatioWidth / aspectRatioHeight >=
+							this.ownerWindow.innerWidth / this.ownerWindow.innerHeight
+						);
 					case 'aspect-ratio':
-						return width / height === this.ownerWindow.innerWidth / this.ownerWindow.innerHeight;
+						return (
+							aspectRatioWidth / aspectRatioHeight ===
+							this.ownerWindow.innerWidth / this.ownerWindow.innerHeight
+						);
 				}
 		}
 

diff --git a/packages/happy-dom/test/match-media/MediaQueryList.test.ts b/packages/happy-dom/test/match-media/MediaQueryList.test.ts
@@ -215,6 +215,26 @@ describe('MediaQueryList', () => {
 			).toBe(true);
 		});
 
+		it('Handles "width".', () => {
+			expect(new MediaQueryList({ ownerWindow: window, media: '(width)' }).matches).toBe(true);
+			expect(new MediaQueryList({ ownerWindow: window, media: '(width: 1023px)' }).matches).toBe(
+				false
+			);
+			expect(new MediaQueryList({ ownerWindow: window, media: '(width: 1024px)' }).matches).toBe(
+				true
+			);
+		});
+
+		it('Handles "height".', () => {
+			expect(new MediaQueryList({ ownerWindow: window, media: '(height)' }).matches).toBe(true);
+			expect(new MediaQueryList({ ownerWindow: window, media: '(height: 767px)' }).matches).toBe(
+				false
+			);
+			expect(new MediaQueryList({ ownerWindow: window, media: '(height: 768px)' }).matches).toBe(
+				true
+			);
+		});
+
 		it('Handles "orientation".', () => {
 			expect(new MediaQueryList({ ownerWindow: window, media: '(orientation)' }).matches).toBe(
 				true