Refactoring: Pull all fullscreen code out of Document and into its own helper class
[WebKit-https.git] / 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(INVERTED_VALUE, document.querySelectorAll("#a, #b"));
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>