<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>