117 lines
4.9 KiB
HTML
117 lines
4.9 KiB
HTML
<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>
|