LayoutTests/accessibility/smart-invert.html

   1 <html>
   2 <head>
   3 <title>Smart Invert Images and Video Test</title>
   4 <style type="text/css">
   5     /* Testing explicit author overrides. */
   6     .no-invert { filter: none; }
   7     .preserve-filter { filter: grayscale(1); }
   8 </style>
   9 <script>
  10 if (window.testRunner)
  11     testRunner.waitUntilDone();
  12
  13 const NONE_VALUE = "none";
  14 const INVERTED_VALUE = "invert(1)";
  15 const PRESERVED_VALUE = "grayscale(1)";
  16
  17 function getUIScript() {
  18     return `
  19     (function() {
  20         uiController.simulateAccessibilitySettingsChangeNotification(function() {
  21             uiController.uiScriptComplete("Done");
  22         });
  23     })();`
  24 }
  25
  26 function expectFilterValueForElements(value, elements, msg) {
  27     if (typeof msg !== "string")
  28         msg = "";
  29     let result = document.getElementById("result");
  30     for (el of elements) {
  31         var filter = window.getComputedStyle(el).filter;
  32         var resultString = filter === value ? "PASS" : "FAIL";
  33         resultString += ": filter for " + el.tagName;
  34         resultString += el.id ? "#" + el.id : "";
  35         resultString += el.className ? "." + el.className : "";
  36         resultString += " is '" + filter + "'.";
  37         resultString += filter !== value ? "Expected: '" + value + "'." : "";
  38         resultString += msg ? " " + msg : "";
  39         resultString += "<br>";
  40         result.innerHTML += resultString;
  41     }
  42 }
  43
  44 function runTest() {
  45     if (!window.internals)
  46         return;
  47
  48     document.getElementById("result").innerHTML += "DEFAULTS<br>";
  49
  50     // Elements img, picture, video should not be inverted by default.
  51     expectFilterValueForElements(NONE_VALUE, document.querySelectorAll("#a, #b, #c, #d, .no-invert"));
  52
  53     // Verify default for elements with author-provided filter values.
  54     expectFilterValueForElements(PRESERVED_VALUE, document.querySelectorAll(".preserve-filter"));
  55
  56     window.internals.settings.forcedColorsAreInvertedAccessibilityValue = "on";
  57
  58     if (testRunner.runUIScript) {
  59         testRunner.runUIScript(getUIScript(), function(result) {
  60
  61             document.getElementById("result").innerHTML += "<br>AFTER INVERT-COLORS IS APPLIED<br>";
  62
  63             // Eventually elements img amd picture will be double-inverted when invert colors is on. Not shipping yet.
  64             expectFilterValueForElements(NONE_VALUE, document.querySelectorAll("#a, #b"), "Change once IMG/PICTURE elements are inverted, too.");
  65
  66             // Element <video> should be double-inverted when invert colors is on.
  67             expectFilterValueForElements(INVERTED_VALUE, document.querySelectorAll("#c, #d"));
  68
  69             // Verify it is not applied to nested picture>img (fallback images).
  70             expectFilterValueForElements(NONE_VALUE, document.querySelectorAll("#b > img"));
  71
  72             // Author overrides should be supported.
  73             expectFilterValueForElements(NONE_VALUE, document.querySelectorAll(".no-invert"));
  74             expectFilterValueForElements(PRESERVED_VALUE, document.querySelectorAll(".preserve-filter"));
  75
  76             testRunner.dumpAsText();
  77             testRunner.notifyDone();
  78         });
  79     }
  80 }
  81
  82 window.addEventListener("load", runTest, false);
  83 </script>
  84 </head>
  85 <body>
  86
  87   <img id="a">
  88   <picture id="b"><img class="fallback"></picture>
  89   <video id="c"></video>
  90   <video id="d" controls></video>
  91   <br>
  92   <img class="no-invert">
  93   <picture class="no-invert"><img class="fallback" alt=""></picture>
  94   <video class="no-invert"></video>
  95   <video class="no-invert" controls></video>
  96   <br>
  97   <img class="preserve-filter" alt="">
  98   <picture class="preserve-filter"><img class="fallback" alt=""></picture>
  99   <video class="preserve-filter"></video>
 100   <video class="preserve-filter" controls></video>
 101
 102   <div id="result"></div>
 103 </body>
 104 </html>