<html>
<head>
<title>Smart Invert Images and Video Test</title>
<style type="text/css">
    picture, img, video { width: 150px; }
    /* Testing explicit author overrides. */
    .no-invert { filter: none; }
    .preserve-filter { filter: grayscale(1); }
</style>
<script>
if (window.testRunner)
    testRunner.waitUntilDone();

const NONE_VALUE = "none";
const INVERTED_VALUE = "invert(1)";
const PRESERVED_VALUE = "grayscale(1)";

function getUIScript() {
    return `
    (function() {
        uiController.simulateAccessibilitySettingsChangeNotification(function() {
            uiController.uiScriptComplete("Done");
        });
    })();`
}

function expectFilterValueForElements(value, elements, msg) {
    if (typeof msg !== "string")
        msg = "";
    let result = document.getElementById("result");
    for (el of elements) {
        var filter = window.getComputedStyle(el).filter;
        var resultString = filter === value ? "PASS" : "FAIL";
        resultString += ": filter for " + el.tagName;
        resultString += el.id ? "#" + el.id : "";
        resultString += el.className ? "." + el.className : "";
        resultString += " is '" + filter + "'.";
        resultString += filter !== value ? "Expected: '" + value + "'." : "";
        resultString += msg ? " " + msg : "";
        resultString += "<br>";
        result.innerHTML += resultString;
    }
}

function runTest() {
    if (!window.internals)
        return;

    document.getElementById("result").innerHTML += "DEFAULTS<br>";

    // Elements img, picture, video should not be inverted by default.
    expectFilterValueForElements(NONE_VALUE, document.querySelectorAll("#a, #b, #c, #d, #e, .no-invert"));

    // Verify default for elements with author-provided filter values.
    expectFilterValueForElements(PRESERVED_VALUE, document.querySelectorAll(".preserve-filter"));

    window.internals.settings.forcedColorsAreInvertedAccessibilityValue = "on";
    
    if (testRunner.runUIScript) {
        testRunner.runUIScript(getUIScript(), function(result) {

            document.getElementById("result").innerHTML += "<br>AFTER INVERT-COLORS IS APPLIED<br>";

            // Elements <img> amd <picture> should be double-inverted when invert colors is on.
            expectFilterValueForElements(INVERTED_VALUE, document.querySelectorAll("#a, #b, #c"));

            // Element <video> should be double-inverted when invert colors is on.
            expectFilterValueForElements(INVERTED_VALUE, document.querySelectorAll("#d, #e"));

            // Author overrides should be supported.
            expectFilterValueForElements(NONE_VALUE, document.querySelectorAll(".no-invert"));
            expectFilterValueForElements(PRESERVED_VALUE, document.querySelectorAll(".preserve-filter"));
            
            document.getElementById("content").hidden = true;

            testRunner.dumpAsText();
            testRunner.notifyDone();
        });
    }
}

window.addEventListener("load", runTest, false);
</script>
</head>
<body>
  <div id="content">
    <img id="a" src="../compositing/resources/simple_image_opaque.png" alt="">
    <picture id="b"><img class="fallback" src="../compositing/resources/simple_image_opaque.png" alt=""></picture>
    <picture id="c">
      <source media="screen" srcset="../compositing/resources/simple_image_opaque.png 150w">
      <img class="fallback" src="../compositing/resources/simple_image.png" alt="">
    </picture>
    <video id="d" poster="../compositing/resources/simple_image_opaque.png"></video>
    <video id="e" poster="../compositing/resources/simple_image_opaque.png" controls ></video>
    <br>
    <img class="no-invert" src="../compositing/resources/simple_image_opaque.png" alt="">
    <picture class="no-invert"><img class="fallback" src="../compositing/resources/simple_image_opaque.png" alt=""></picture>
    <picture class="no-invert">
      <source media="screen" srcset="../compositing/resources/simple_image_opaque.png 150w">
      <img class="fallback" src="../compositing/resources/simple_image.png" alt="">
    </picture>
    <video class="no-invert" poster="../compositing/resources/simple_image_opaque.png"></video>
    <video class="no-invert" poster="../compositing/resources/simple_image_opaque.png" controls></video>
    <br>
    <img class="preserve-filter" src="../compositing/resources/simple_image_opaque.png" alt="">
    <picture class="preserve-filter"><img class="fallback" src="../compositing/resources/simple_image_opaque.png" alt=""></picture>
    <picture class="preserve-filter">
      <source media="screen" srcset="../compositing/resources/simple_image_opaque.png 150w">
      <img class="fallback" src="../compositing/resources/simple_image.png" alt="">
    </picture>
    <video class="preserve-filter" poster="../compositing/resources/simple_image_opaque.png"></video>
    <video class="preserve-filter" poster="../compositing/resources/simple_image_opaque.png" controls></video>
  </div>
  <div id="result"></div>
</body>
</html>