<html>
<head>
<title>Smart Invert Images and Video Test</title>
<style type="text/css">
    /* 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, .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>";

            // Eventually elements img amd picture will be double-inverted when invert colors is on. Not shipping yet.
            expectFilterValueForElements(INVERTED_VALUE, document.querySelectorAll("#a, #b"));

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

            // Verify it is not applied to nested picture>img (fallback images).
            expectFilterValueForElements(NONE_VALUE, document.querySelectorAll("#b > img"));

            // Author overrides should be supported.
            expectFilterValueForElements(NONE_VALUE, document.querySelectorAll(".no-invert"));
            expectFilterValueForElements(PRESERVED_VALUE, document.querySelectorAll(".preserve-filter"));
            
            testRunner.dumpAsText();
            testRunner.notifyDone();
        });
    }
}

window.addEventListener("load", runTest, false);
</script>
</head>
<body>

  <img id="a">
  <picture id="b"><img class="fallback"></picture>
  <video id="c"></video>
  <video id="d" controls></video>
  <br>
  <img class="no-invert">
  <picture class="no-invert"><img class="fallback" alt=""></picture>
  <video class="no-invert"></video>
  <video class="no-invert" controls></video>
  <br>
  <img class="preserve-filter" alt="">
  <picture class="preserve-filter"><img class="fallback" alt=""></picture>
  <video class="preserve-filter"></video>
  <video class="preserve-filter" controls></video>
  
  <div id="result"></div>
</body>
</html>