blob: b180338f15e007662c0bba0b708e509a80a8376f [file] [log] [blame]
<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>