LayoutTests/accessibility/smart-invert-reference.html

<html>
<head>
<title>Smart Invert Images and Video Ref 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 runTest() {
    if (!window.internals)
        return;
    window.internals.settings.forcedColorsAreInvertedAccessibilityValue = "on";
    if (testRunner.runUIScript) {
        testRunner.runUIScript(getUIScript(), function(result) {
            testRunner.notifyDone();
        });
    }
}
window.addEventListener("load", runTest, false);
</script>
</head>
<body>

  <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">
  <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 id="result"></div>
</body>
</html>