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

@media (prefers-reduced-motion) {
#a { color: green; }
}

@media (prefers-reduced-motion: reduce) {
#b { color: green; }
}

@media (prefers-reduced-motion: no-preference) {
#d { color: green; }
}
</style>
<script>
window.addEventListener("load", function () {
    if (window.matchMedia("(prefers-reduced-motion)").matches)
        document.getElementById("c").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>