<html>
<head>
<title>CSS4 media query test: prefers-reduced-motion.</title>
<style type="text/css">
#a { color: black; }
#b { color: black; }
#c { color: black; }
#d { color: black; }
</style>
<script>
window.addEventListener("load", function () {

    if (!window.internals) {
        ["a", "b", "c", "d"].forEach(id => { document.getElementById(id).textContent = "This expected result requires DRT/WKTR."; });
        return;
    }

    if (window.internals.userPrefersReducedMotion())
        ["a", "b", "c"].forEach(id => { document.getElementById(id).style.color = "green"; });
    else
        document.getElementById("d").style.color = "green";

}, false);
</script>
</head>
<body>
  <p id="a">This text should be green if the user requested reduced motion. Black otherwise.</p>
  <p id="b">This text should be green if the user requested reduced motion. Black otherwise.</p>
  <p id="c">This text should be green if the user requested reduced motion. Black otherwise.</p>
  <p id="d">This text should be green if the user has not requested reduced motion. Black otherwise.</p>
</body>
</html>
