| <html> |
| <head> |
| <title>CSS4 media query test: prefers-reduced-motion using matchMedia and addListener.</title> |
| <script> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| function runTest() |
| { |
| if (!window.internals) |
| return; |
| |
| var motionQuery = window.matchMedia("(prefers-reduced-motion)"); |
| motionQuery.addListener(() => { |
| document.getElementById("after").textContent = motionQuery.matches ? "true" : "false"; |
| queryFired = true; |
| checkDone(); |
| }); |
| |
| document.getElementById("before").textContent = motionQuery.matches ? "true" : "false"; |
| window.internals.settings.forcedPrefersReducedMotionAccessibilityValue = "on"; |
| testRunner.runUIScript(` |
| (function() { |
| uiController.simulateAccessibilitySettingsChangeNotification(function() { |
| uiController.uiScriptComplete("Done"); |
| }); |
| })();`, function (result) { |
| scriptRan = true; |
| checkDone(); |
| }); |
| } |
| |
| let queryFired = false; |
| let scriptRan = false; |
| |
| function checkDone() { |
| if (queryFired && scriptRan) |
| testRunner.notifyDone(); |
| } |
| |
| window.addEventListener("load", runTest, false); |
| </script> |
| </head> |
| <body> |
| <p>Initial value of motionQuery.matches: <span id="before">unknown</span> - should be false</p> |
| <p>Updated value of motionQuery.matches: <span id="after">unknown</span> - should be true</p> |
| <p>Note the updated value will only be filled if the listener fires.</p> |
| </body> |
| </html> |
