Diff
Modified: trunk/LayoutTests/ChangeLog (226384 => 226385)
--- trunk/LayoutTests/ChangeLog 2018-01-04 00:55:41 UTC (rev 226384)
+++ trunk/LayoutTests/ChangeLog 2018-01-04 01:44:15 UTC (rev 226385)
@@ -1,3 +1,22 @@
+2018-01-03 James Craig <jcr...@apple.com>
+
+ AX: when invert colors is on, double-invert certain media elements in UserAgentStyleSheet
+ https://bugs.webkit.org/show_bug.cgi?id=168447
+ <rdar://problem/30559874>
+
+ Reviewed by Simon Fraser.
+
+ Double-invert video when platform "invert colors" setting is enabled. Behavior matches
+ current "Smart Invert" feature of Safari Reader on macOS/iOS and other iOS native apps.
+
+ * TestExpectations: Platform setting only available on Mac and iOS.
+ * accessibility/smart-invert-expected.txt: Added.
+ * accessibility/smart-invert-reference-expected.html: Added.
+ * accessibility/smart-invert-reference.html: Added. Ref to ensure invert and blur filters render as expected.
+ * accessibility/smart-invert.html: Added. Computed expectatons of filter property text values.
+ * platform/ios-wk2/TestExpectations: Runs on iOS.
+ * platform/mac-wk2/TestExpectations: Runs on Mac.
+
2018-01-03 Alexey Proskuryakov <a...@apple.com>
Update expectations for some range tests.
Modified: trunk/LayoutTests/TestExpectations (226384 => 226385)
--- trunk/LayoutTests/TestExpectations 2018-01-04 00:55:41 UTC (rev 226384)
+++ trunk/LayoutTests/TestExpectations 2018-01-04 01:44:15 UTC (rev 226385)
@@ -118,6 +118,8 @@
editing/input/focus-change-with-marked-text.html [ Skip ]
# These only run on Mac and iOS WK2
+accessibility/smart-invert.html [ Skip ]
+accessibility/smart-invert-reference.html [ Skip ]
fast/media/mq-inverted-colors-live-update.html [ Skip ]
fast/media/mq-inverted-colors-live-update-in-subframes.html [ Skip ]
fast/media/mq-monochrome-live-update.html [ Skip ]
Added: trunk/LayoutTests/accessibility/smart-invert-expected.txt (0 => 226385)
--- trunk/LayoutTests/accessibility/smart-invert-expected.txt (rev 0)
+++ trunk/LayoutTests/accessibility/smart-invert-expected.txt 2018-01-04 01:44:15 UTC (rev 226385)
@@ -0,0 +1,32 @@
+
+
+
+DEFAULTS
+PASS: filter for IMG#a is 'none'.
+PASS: filter for PICTURE#b is 'none'.
+PASS: filter for VIDEO#c is 'none'.
+PASS: filter for VIDEO#d is 'none'.
+PASS: filter for IMG.no-invert is 'none'.
+PASS: filter for PICTURE.no-invert is 'none'.
+PASS: filter for VIDEO.no-invert is 'none'.
+PASS: filter for VIDEO.no-invert is 'none'.
+PASS: filter for IMG.preserve-filter is 'blur(3px)'.
+PASS: filter for PICTURE.preserve-filter is 'blur(3px)'.
+PASS: filter for VIDEO.preserve-filter is 'blur(3px)'.
+PASS: filter for VIDEO.preserve-filter is 'blur(3px)'.
+
+AFTER INVERT-COLORS IS APPLIED
+PASS: filter for IMG#a is 'none'. Change once IMG/PICTURE elements are inverted, too.
+PASS: filter for PICTURE#b is 'none'. Change once IMG/PICTURE elements are inverted, too.
+PASS: filter for VIDEO#c is 'invert(1)'.
+PASS: filter for VIDEO#d is 'invert(1)'.
+PASS: filter for IMG.fallback is 'none'.
+PASS: filter for IMG.no-invert is 'none'.
+PASS: filter for PICTURE.no-invert is 'none'.
+PASS: filter for VIDEO.no-invert is 'none'.
+PASS: filter for VIDEO.no-invert is 'none'.
+PASS: filter for IMG.preserve-filter is 'blur(3px)'.
+PASS: filter for PICTURE.preserve-filter is 'blur(3px)'.
+PASS: filter for VIDEO.preserve-filter is 'blur(3px)'.
+PASS: filter for VIDEO.preserve-filter is 'blur(3px)'.
+
Added: trunk/LayoutTests/accessibility/smart-invert-reference-expected.html (0 => 226385)
--- trunk/LayoutTests/accessibility/smart-invert-reference-expected.html (rev 0)
+++ trunk/LayoutTests/accessibility/smart-invert-reference-expected.html 2018-01-04 01:44:15 UTC (rev 226385)
@@ -0,0 +1,31 @@
+<html>
+<head>
+<title>Smart Invert Images and Video Test</title>
+<style type="text/css">
+ /* Testing explicit author overrides. */
+ .invert { filter: invert(1); }
+ .no-invert { filter: none; }
+ .preserve-filter { filter: blur(3px); }
+ #result { position: absolute; top: -5000px; }
+</style>
+</head>
+<body>
+
+ <img src="" alt="">
+ <picture><img class="fallback" src="" alt=""></picture>
+ <video class="invert" poster="../compositing/resources/simple_image.png"></video>
+ <video class="invert" poster="../compositing/resources/simple_image.png" controls></video>
+ <br>
+ <img class="no-invert" src=""
+ <picture class="no-invert"><img class="fallback" src="" alt=""></picture>
+ <video class="no-invert" poster="../compositing/resources/simple_image.png"></video>
+ <video class="no-invert" poster="../compositing/resources/simple_image.png" controls></video>
+ <br>
+ <img class="preserve-filter" src="" alt="">
+ <picture class="preserve-filter"><img class="fallback" src="" alt=""></picture>
+ <video class="preserve-filter" poster="../compositing/resources/simple_image.png"></video>
+ <video class="preserve-filter" poster="../compositing/resources/simple_image.png" controls></video>
+
+ <div id="result"></div>
+</body>
+</html>
Added: trunk/LayoutTests/accessibility/smart-invert-reference.html (0 => 226385)
--- trunk/LayoutTests/accessibility/smart-invert-reference.html (rev 0)
+++ trunk/LayoutTests/accessibility/smart-invert-reference.html 2018-01-04 01:44:15 UTC (rev 226385)
@@ -0,0 +1,58 @@
+<html>
+<head>
+<title>Smart Invert Images and Video Ref Test</title>
+<style type="text/css">
+ /* Testing explicit author overrides. */
+ .no-invert { filter: none; }
+ .preserve-filter { filter: blur(3px); }
+</style>
+<script>
+if (window.testRunner)
+ testRunner.waitUntilDone();
+
+const NONE_VALUE = "none";
+const INVERTED_VALUE = "invert(1)";
+const PRESERVED_VALUE = "blur(3px)";
+
+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="" alt="">
+ <picture id="b"><img class="fallback" src="" alt=""></picture>
+ <video id="c" poster="../compositing/resources/simple_image.png"></video>
+ <video id="d" poster="../compositing/resources/simple_image.png" controls></video>
+ <br>
+ <img class="no-invert" src=""
+ <picture class="no-invert"><img class="fallback" src="" alt=""></picture>
+ <video class="no-invert" poster="../compositing/resources/simple_image.png"></video>
+ <video class="no-invert" poster="../compositing/resources/simple_image.png" controls></video>
+ <br>
+ <img class="preserve-filter" src="" alt="">
+ <picture class="preserve-filter"><img class="fallback" src="" alt=""></picture>
+ <video class="preserve-filter" poster="../compositing/resources/simple_image.png"></video>
+ <video class="preserve-filter" poster="../compositing/resources/simple_image.png" controls></video>
+
+ <div id="result"></div>
+</body>
+</html>
Added: trunk/LayoutTests/accessibility/smart-invert.html (0 => 226385)
--- trunk/LayoutTests/accessibility/smart-invert.html (rev 0)
+++ trunk/LayoutTests/accessibility/smart-invert.html 2018-01-04 01:44:15 UTC (rev 226385)
@@ -0,0 +1,104 @@
+<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: blur(3px); }
+</style>
+<script>
+if (window.testRunner)
+ testRunner.waitUntilDone();
+
+const NONE_VALUE = "none";
+const INVERTED_VALUE = "invert(1)";
+const PRESERVED_VALUE = "blur(3px)";
+
+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(NONE_VALUE, document.querySelectorAll("#a, #b"), "Change once IMG/PICTURE elements are inverted, too.");
+
+ // 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>
Modified: trunk/LayoutTests/platform/ios-wk2/TestExpectations (226384 => 226385)
--- trunk/LayoutTests/platform/ios-wk2/TestExpectations 2018-01-04 00:55:41 UTC (rev 226384)
+++ trunk/LayoutTests/platform/ios-wk2/TestExpectations 2018-01-04 01:44:15 UTC (rev 226385)
@@ -15,6 +15,8 @@
tiled-drawing/ios [ Pass ]
editing/selection/character-granularity-rect.html [ Pass ]
+accessibility/smart-invert.html [ Pass ]
+accessibility/smart-invert-reference.html [ Pass ]
fast/media/mq-inverted-colors-live-update.html [ Pass ]
fast/media/mq-inverted-colors-live-update-in-subframes.html [ Pass ]
fast/media/mq-monochrome-live-update.html [ Pass ]
Modified: trunk/LayoutTests/platform/mac-wk2/TestExpectations (226384 => 226385)
--- trunk/LayoutTests/platform/mac-wk2/TestExpectations 2018-01-04 00:55:41 UTC (rev 226384)
+++ trunk/LayoutTests/platform/mac-wk2/TestExpectations 2018-01-04 01:44:15 UTC (rev 226385)
@@ -13,6 +13,8 @@
fast/events/autoscroll-when-zoomed.html [ Pass ]
fast/events/autoscroll-main-document.html [ Pass ]
+accessibility/smart-invert.html [ Pass ]
+accessibility/smart-invert-reference.html [ Pass ]
fast/media/mq-inverted-colors-live-update.html [ Pass ]
fast/media/mq-inverted-colors-live-update-in-subframes.html [ Pass ]
fast/media/mq-monochrome-live-update.html [ Pass ]
Modified: trunk/Source/WebCore/ChangeLog (226384 => 226385)
--- trunk/Source/WebCore/ChangeLog 2018-01-04 00:55:41 UTC (rev 226384)
+++ trunk/Source/WebCore/ChangeLog 2018-01-04 01:44:15 UTC (rev 226385)
@@ -1,3 +1,25 @@
+2018-01-03 James Craig <jcr...@apple.com>
+
+ AX: when invert colors is on, double-invert certain media elements in UserAgentStyleSheet
+ https://bugs.webkit.org/show_bug.cgi?id=168447
+ <rdar://problem/30559874>
+
+ Reviewed by Simon Fraser.
+
+ Double-invert video when platform 'invert colors' setting is enabled. Behavior matches
+ current 'Smart Invert' feature of Safari Reader on macOS/iOS and other iOS native apps.
+
+ Tests: accessibility/smart-invert-reference.html
+ accessibility/smart-invert.html
+
+ * Modules/modern-media-controls/controls/media-controls.css:
+ (@media (inverted-colors)):
+ (:host):
+ (picture):
+ * css/html.css:
+ (@media (inverted-colors)):
+ (video):
+
2018-01-03 Youenn Fablet <you...@apple.com>
LayoutTest http/tests/media/media-stream/disconnected-frame.html to consistently fail an assertion: !m_adoptionIsRequired
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css (226384 => 226385)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css 2018-01-04 00:55:41 UTC (rev 226384)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css 2018-01-04 01:44:15 UTC (rev 226385)
@@ -127,3 +127,9 @@
from { opacity: 0 }
to { opacity: 1 }
}
+
+/* Default support for "Smart Invert" where all content color except media is inverted. */
+@media (inverted-colors) {
+ :host { filter: invert(100%); } /* WebKit native audio and video. */
+ picture { filter: none; } /* Don't invert the control buttons. */
+}
\ No newline at end of file
Modified: trunk/Source/WebCore/css/html.css (226384 => 226385)
--- trunk/Source/WebCore/css/html.css 2018-01-04 00:55:41 UTC (rev 226384)
+++ trunk/Source/WebCore/css/html.css 2018-01-04 01:44:15 UTC (rev 226385)
@@ -1236,3 +1236,7 @@
/* noscript is handled internally, as it depends on settings. */
+/* Default support for "Smart Invert" where all content color except media is inverted. */
+@media (inverted-colors) {
+ video { filter: invert(100%); } /* Only videos double-inverted for now. */
+}
