feat: [#1724] Add support for "prefers-reduced-motion" (#1725)

Author: mwdiaz

packages/happy-dom/src/browser/DefaultBrowserSettings.ts

@@ -38,6 +38,7 @@ export default <IBrowserSettings>{
 	},
 	device: {
 		prefersColorScheme: 'light',
+		prefersReducedMotion: 'no-preference',
 		mediaType: 'screen'
 	},
 	debug: {

packages/happy-dom/src/browser/types/IBrowserSettings.ts

@@ -109,6 +109,7 @@ export default interface IBrowserSettings {
 	 */
 	device: {
 		prefersColorScheme: string;
+		prefersReducedMotion: string;
 		mediaType: string;
 	};
 

packages/happy-dom/src/browser/types/IOptionalBrowserSettings.ts

@@ -103,6 +103,7 @@ export default interface IOptionalBrowserSettings {
 	 */
 	device?: {
 		prefersColorScheme?: string;
+		prefersReducedMotion?: string;
 		mediaType?: string;
 	};
 

packages/happy-dom/src/match-media/MediaQueryItem.ts

@@ -199,6 +199,12 @@ export default class MediaQueryItem {
 	 * @returns "true" if the rule matches.
 	 */
 	private matchesRule(rule: IMediaQueryRule): boolean {
+		const settings = new WindowBrowserContext(this.window).getSettings();
+
+		if (!settings) {
+			return false;
+		}
+
 		if (!rule.value) {
 			switch (rule.name) {
 				case 'min-width':
@@ -218,6 +224,8 @@ export default class MediaQueryItem {
 				case 'max-aspect-ratio':
 				case 'aspect-ratio':
 					return true;
+				case 'prefers-reduced-motion':
+					return settings.device.prefersReducedMotion === 'reduce';
 			}
 			return false;
 		}
@@ -246,10 +254,9 @@ export default class MediaQueryItem {
 					? this.window.innerWidth > this.window.innerHeight
 					: this.window.innerWidth < this.window.innerHeight;
 			case 'prefers-color-scheme':
-				return (
-					rule.value ===
-					new WindowBrowserContext(this.window).getSettings().device.prefersColorScheme
-				);
+				return rule.value === settings.device.prefersColorScheme;
+			case 'prefers-reduced-motion':
+				return rule.value === settings.device.prefersReducedMotion;
 			case 'any-hover':
 			case 'hover':
 				if (rule.value === 'none') {

packages/happy-dom/test/match-media/MediaQueryList.test.ts

@@ -21,6 +21,9 @@ describe('MediaQueryList', () => {
 			expect(
 				new MediaQueryList({ window: window, media: 'NOT all AND (prefers-COLOR-scheme)' }).media
 			).toBe('not all and (prefers-color-scheme)');
+			expect(
+				new MediaQueryList({ window: window, media: 'NOT all AND (prefers-REDUCED-motion)' }).media
+			).toBe('not all and (prefers-reduced-motion)');
 			expect(new MediaQueryList({ window: window, media: 'all and (hover: none' }).media).toBe(
 				'all and (hover: none)'
 			);
@@ -46,6 +49,15 @@ describe('MediaQueryList', () => {
 			expect(new MediaQueryList({ window: window, media: '(prefers-color-scheme)' }).media).toBe(
 				'(prefers-color-scheme)'
 			);
+			expect(new MediaQueryList({ window: window, media: 'prefers-reduced-motion' }).media).toBe(
+				''
+			);
+			expect(new MediaQueryList({ window: window, media: '(prefers-reduced-motion' }).media).toBe(
+				'not all'
+			);
+			expect(new MediaQueryList({ window: window, media: '(prefers-reduced-motion)' }).media).toBe(
+				'(prefers-reduced-motion)'
+			);
 		});
 	});
 
@@ -268,6 +280,36 @@ describe('MediaQueryList', () => {
 			).toBe(false);
 		});
 
+		it('Handles "prefers-reduced-motion".', () => {
+			expect(
+				new MediaQueryList({ window: window, media: '(prefers-reduced-motion)' }).matches
+			).toBe(false);
+			expect(
+				new MediaQueryList({ window: window, media: '(prefers-reduced-motion: reduce)' }).matches
+			).toBe(false);
+			expect(
+				new MediaQueryList({ window: window, media: '(prefers-reduced-motion: no-preference)' })
+					.matches
+			).toBe(true);
+
+			window = new Window({
+				width: 1024,
+				height: 768,
+				settings: { device: { prefersReducedMotion: 'reduce' } }
+			});
+
+			expect(
+				new MediaQueryList({ window: window, media: '(prefers-reduced-motion)' }).matches
+			).toBe(true);
+			expect(
+				new MediaQueryList({ window: window, media: '(prefers-reduced-motion: reduce)' }).matches
+			).toBe(true);
+			expect(
+				new MediaQueryList({ window: window, media: '(prefers-reduced-motion: no-preference)' })
+					.matches
+			).toBe(false);
+		});
+
 		it('Handles "hover".', () => {
 			expect(new MediaQueryList({ window: window, media: '(hover)' }).matches).toBe(true);
 			expect(new MediaQueryList({ window: window, media: '(hover: invalid)' }).matches).toBe(false);