<html>
<head>
<title>CSS4 media query test: dynamic-range: high.</title>
<style type="text/css">
p { color: black; }

@media (dynamic-range: high) {
    #a { color: green; }
}
</style>
<script>
if (window.testRunner) {
    testRunner.waitUntilDone();
    testRunner.dumpAsText();
}

window.addEventListener('load', event => {
    if (!window.internals)
        return;

    window.internals.settings.setHDRMediaCapabilitiesEnabled(true);
    window.internals.settings.forcedSupportsHighDynamicRangeValue = "off";
    var element = document.getElementById("a");
    document.getElementById("before").textContent = window.getComputedStyle(element).color;
    window.internals.settings.forcedSupportsHighDynamicRangeValue = "on";
    document.getElementById("after").textContent = window.getComputedStyle(element).color;
    testRunner.notifyDone();
});
</script>
</head>
<body>
  <p id="a"></p>
  <p>Before was: <span id="before"></span> - should be rgb(0, 0, 0)</p>
  <p>After was: <span id="after"></span> - should be rgb(0, 128, 0)</p>
</body>
</html>