2018-01-03 James Craig <jcraig@apple.com>
authorjcraig@apple.com <jcraig@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 4 Jan 2018 01:44:15 +0000 (01:44 +0000)
committerjcraig@apple.com <jcraig@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 4 Jan 2018 01:44:15 +0000 (01:44 +0000)
        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

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@226385 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/TestExpectations
LayoutTests/accessibility/smart-invert-expected.txt [new file with mode: 0644]
LayoutTests/accessibility/smart-invert-reference-expected.html [new file with mode: 0644]
LayoutTests/accessibility/smart-invert-reference.html [new file with mode: 0644]
LayoutTests/accessibility/smart-invert.html [new file with mode: 0644]
LayoutTests/platform/ios-wk2/TestExpectations
LayoutTests/platform/mac-wk2/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/Modules/modern-media-controls/controls/media-controls.css
Source/WebCore/css/html.css

index da278f8..af88bda 100644 (file)
@@ -1,3 +1,22 @@
+2018-01-03  James Craig  <jcraig@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  <ap@apple.com>
 
         Update expectations for some range tests.
index 4152e75..e5c8f25 100644 (file)
@@ -118,6 +118,8 @@ editing/selection/character-granularity-rect.html [ Skip ]
 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 ]
diff --git a/LayoutTests/accessibility/smart-invert-expected.txt b/LayoutTests/accessibility/smart-invert-expected.txt
new file mode 100644 (file)
index 0000000..242b0cf
--- /dev/null
@@ -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)'.
+
diff --git a/LayoutTests/accessibility/smart-invert-reference-expected.html b/LayoutTests/accessibility/smart-invert-reference-expected.html
new file mode 100644 (file)
index 0000000..15165b7
--- /dev/null
@@ -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="../compositing/resources/simple_image.png" alt="">
+  <picture><img class="fallback" src="../compositing/resources/simple_image.png" 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="../compositing/resources/simple_image.png">
+  <picture class="no-invert"><img class="fallback" src="../compositing/resources/simple_image.png" 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="../compositing/resources/simple_image.png" alt="">
+  <picture class="preserve-filter"><img class="fallback" src="../compositing/resources/simple_image.png" 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>
diff --git a/LayoutTests/accessibility/smart-invert-reference.html b/LayoutTests/accessibility/smart-invert-reference.html
new file mode 100644 (file)
index 0000000..f992c0a
--- /dev/null
@@ -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="../compositing/resources/simple_image.png" alt="">
+  <picture id="b"><img class="fallback" src="../compositing/resources/simple_image.png" 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="../compositing/resources/simple_image.png">
+  <picture class="no-invert"><img class="fallback" src="../compositing/resources/simple_image.png" 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="../compositing/resources/simple_image.png" alt="">
+  <picture class="preserve-filter"><img class="fallback" src="../compositing/resources/simple_image.png" 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>
diff --git a/LayoutTests/accessibility/smart-invert.html b/LayoutTests/accessibility/smart-invert.html
new file mode 100644 (file)
index 0000000..58a5407
--- /dev/null
@@ -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>
index cd9a829..3ea0ef8 100644 (file)
@@ -15,6 +15,8 @@ scrollingcoordinator/ios [ Pass ]
 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 ]
index 65df4c9..4f3a269 100644 (file)
@@ -13,6 +13,8 @@ swipe [ Pass ]
 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 ]
index 0debd41..d0211f5 100644 (file)
@@ -1,3 +1,25 @@
+2018-01-03  James Craig  <jcraig@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  <youenn@apple.com>
 
         LayoutTest http/tests/media/media-stream/disconnected-frame.html to consistently fail an assertion: !m_adoptionIsRequired
index 8c53772..464c111 100644 (file)
     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
index f9fc6d9..f9c7499 100644 (file)
@@ -1236,3 +1236,7 @@ attachment {
 
 /* 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. */
+}