- Revision
- 260092
- Author
- commit-qu...@webkit.org
- Date
- 2020-04-14 13:23:55 -0700 (Tue, 14 Apr 2020)
Log Message
AX: Smart Invert doesn't handle the picture elements on foxnews.com
<https://webkit.org/b/210472>
Patch by James Craig <jcr...@apple.com> on 2020-04-14
Reviewed by Chris Fleizach.
Source/WebCore:
Tests: accessibilty/smart-invert.html
accessibilty/smart-invert-reference.html
Filled out more variants in the test cases, and removed the unnecessary :not() selector.
* css/html.css:
(@media (inverted-colors) img, picture, video):
(@media (inverted-colors) img:not(picture>img), picture, video): Deleted.
LayoutTests:
Filled out more variants in the test cases, and removed the unnecessary :not() selector.
* accessibility/smart-invert-expected.txt:
* accessibility/smart-invert-reference-expected.html:
* accessibility/smart-invert-reference.html:
* accessibility/smart-invert.html:
Modified Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (260091 => 260092)
--- trunk/LayoutTests/ChangeLog 2020-04-14 20:23:15 UTC (rev 260091)
+++ trunk/LayoutTests/ChangeLog 2020-04-14 20:23:55 UTC (rev 260092)
@@ -1,3 +1,17 @@
+2020-04-14 James Craig <jcr...@apple.com>
+
+ AX: Smart Invert doesn't handle the picture elements on foxnews.com
+ <https://webkit.org/b/210472>
+
+ Reviewed by Chris Fleizach.
+
+ Filled out more variants in the test cases, and removed the unnecessary :not() selector.
+
+ * accessibility/smart-invert-expected.txt:
+ * accessibility/smart-invert-reference-expected.html:
+ * accessibility/smart-invert-reference.html:
+ * accessibility/smart-invert.html:
+
2020-04-14 Simon Fraser <simon.fra...@apple.com>
Scroll snap in subframes is often broken
Modified: trunk/LayoutTests/accessibility/smart-invert-expected.txt (260091 => 260092)
--- trunk/LayoutTests/accessibility/smart-invert-expected.txt 2020-04-14 20:23:15 UTC (rev 260091)
+++ trunk/LayoutTests/accessibility/smart-invert-expected.txt 2020-04-14 20:23:55 UTC (rev 260092)
@@ -1,17 +1,17 @@
-
-
-
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 PICTURE#c is 'none'.
PASS: filter for VIDEO#d is 'none'.
+PASS: filter for VIDEO#e is 'none'.
PASS: filter for IMG.no-invert is 'none'.
PASS: filter for PICTURE.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 'grayscale(1)'.
PASS: filter for PICTURE.preserve-filter is 'grayscale(1)'.
+PASS: filter for PICTURE.preserve-filter is 'grayscale(1)'.
PASS: filter for VIDEO.preserve-filter is 'grayscale(1)'.
PASS: filter for VIDEO.preserve-filter is 'grayscale(1)'.
@@ -18,15 +18,17 @@
AFTER INVERT-COLORS IS APPLIED
PASS: filter for IMG#a is 'invert(1)'.
PASS: filter for PICTURE#b is 'invert(1)'.
-PASS: filter for VIDEO#c is 'invert(1)'.
+PASS: filter for PICTURE#c is 'invert(1)'.
PASS: filter for VIDEO#d is 'invert(1)'.
-PASS: filter for IMG.fallback is 'none'.
+PASS: filter for VIDEO#e is 'invert(1)'.
PASS: filter for IMG.no-invert is 'none'.
PASS: filter for PICTURE.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 'grayscale(1)'.
PASS: filter for PICTURE.preserve-filter is 'grayscale(1)'.
+PASS: filter for PICTURE.preserve-filter is 'grayscale(1)'.
PASS: filter for VIDEO.preserve-filter is 'grayscale(1)'.
PASS: filter for VIDEO.preserve-filter is 'grayscale(1)'.
Modified: trunk/LayoutTests/accessibility/smart-invert-reference-expected.html (260091 => 260092)
--- trunk/LayoutTests/accessibility/smart-invert-reference-expected.html 2020-04-14 20:23:15 UTC (rev 260091)
+++ trunk/LayoutTests/accessibility/smart-invert-reference-expected.html 2020-04-14 20:23:55 UTC (rev 260092)
@@ -2,6 +2,7 @@
<head>
<title>Smart Invert Images and Video Test</title>
<style type="text/css">
+ picture, img, video { width: 150px; filter: none; }
/* Testing explicit author overrides. */
.invert { filter: invert(1); }
.no-invert { filter: none; }
@@ -11,20 +12,32 @@
</head>
<body>
- <img class="invert" src="" alt="">
- <picture class="invert" ><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>
+ <img class="invert" src="" alt="">
+ <picture class="invert"><img class="fallback no-invert" src="" alt=""></picture>
+ <picture class="invert">
+ <source media="screen" srcset="../compositing/resources/simple_image_opaque.png 150w">
+ <img class="fallback no-invert" src="" alt="">
+ </picture>
+ <video class="invert" poster="../compositing/resources/simple_image_opaque.png"></video>
+ <video class="invert" poster="../compositing/resources/simple_image_opaque.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>
+ <img class="no-invert" src=""
+ <picture class="no-invert"><img class="fallback" src="" alt=""></picture>
+ <picture class="no-invert">
+ <source media="screen" class="no-invert" srcset="../compositing/resources/simple_image_opaque.png 150w">
+ <img class="fallback no-invert" src="" 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="" 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>
+ <img class="preserve-filter" src="" alt="">
+ <picture class="preserve-filter"><img class="fallback" src="" alt=""></picture>
+ <picture class="preserve-filter">
+ <source media="screen" class="preserve-filter" srcset="../compositing/resources/simple_image_opaque.png 150w">
+ <img class="fallback preserve-filter" src="" 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 id="result"></div>
</body>
Modified: trunk/LayoutTests/accessibility/smart-invert-reference.html (260091 => 260092)
--- trunk/LayoutTests/accessibility/smart-invert-reference.html 2020-04-14 20:23:15 UTC (rev 260091)
+++ trunk/LayoutTests/accessibility/smart-invert-reference.html 2020-04-14 20:23:55 UTC (rev 260092)
@@ -2,6 +2,7 @@
<head>
<title>Smart Invert Images and Video Ref Test</title>
<style type="text/css">
+ picture, img, video { width: 150px; }
/* Testing explicit author overrides. */
.no-invert { filter: none; }
.preserve-filter { filter: grayscale(1); }
@@ -38,20 +39,32 @@
</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>
+ <img id="a" src="" alt="">
+ <picture id="b"><img class="fallback" src="" alt=""></picture>
+ <picture id="c">
+ <source media="screen" srcset="../compositing/resources/simple_image_opaque.png 150w">
+ <img class="fallback" src="" 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=""
- <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>
+ <img class="no-invert" src=""
+ <picture class="no-invert"><img class="fallback" src="" alt=""></picture>
+ <picture class="no-invert">
+ <source media="screen" srcset="../compositing/resources/simple_image_opaque.png 150w">
+ <img class="fallback" src="" 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="" 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>
+ <img class="preserve-filter" src="" alt="">
+ <picture class="preserve-filter"><img class="fallback" src="" alt=""></picture>
+ <picture class="preserve-filter">
+ <source media="screen" srcset="../compositing/resources/simple_image_opaque.png 150w">
+ <img class="fallback" src="" 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 id="result"></div>
</body>
Modified: trunk/LayoutTests/accessibility/smart-invert.html (260091 => 260092)
--- trunk/LayoutTests/accessibility/smart-invert.html 2020-04-14 20:23:15 UTC (rev 260091)
+++ trunk/LayoutTests/accessibility/smart-invert.html 2020-04-14 20:23:55 UTC (rev 260092)
@@ -2,6 +2,7 @@
<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); }
@@ -48,7 +49,7 @@
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"));
+ 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"));
@@ -60,19 +61,18 @@
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(INVERTED_VALUE, document.querySelectorAll("#a, #b"));
+ // 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("#c, #d"));
+ expectFilterValueForElements(INVERTED_VALUE, document.querySelectorAll("#d, #e"));
- // 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"));
+ document.getElementById("content").hidden = true;
+
testRunner.dumpAsText();
testRunner.notifyDone();
});
@@ -83,22 +83,34 @@
</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="content">
+ <img id="a" src="" alt="">
+ <picture id="b"><img class="fallback" src="" alt=""></picture>
+ <picture id="c">
+ <source media="screen" srcset="../compositing/resources/simple_image_opaque.png 150w">
+ <img class="fallback" src="" 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="" alt="">
+ <picture class="no-invert"><img class="fallback" src="" alt=""></picture>
+ <picture class="no-invert">
+ <source media="screen" srcset="../compositing/resources/simple_image_opaque.png 150w">
+ <img class="fallback" src="" 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="" alt="">
+ <picture class="preserve-filter"><img class="fallback" src="" alt=""></picture>
+ <picture class="preserve-filter">
+ <source media="screen" srcset="../compositing/resources/simple_image_opaque.png 150w">
+ <img class="fallback" src="" 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>
Modified: trunk/Source/WebCore/ChangeLog (260091 => 260092)
--- trunk/Source/WebCore/ChangeLog 2020-04-14 20:23:15 UTC (rev 260091)
+++ trunk/Source/WebCore/ChangeLog 2020-04-14 20:23:55 UTC (rev 260092)
@@ -1,3 +1,19 @@
+2020-04-14 James Craig <jcr...@apple.com>
+
+ AX: Smart Invert doesn't handle the picture elements on foxnews.com
+ <https://webkit.org/b/210472>
+
+ Reviewed by Chris Fleizach.
+
+ Tests: accessibilty/smart-invert.html
+ accessibilty/smart-invert-reference.html
+
+ Filled out more variants in the test cases, and removed the unnecessary :not() selector.
+
+ * css/html.css:
+ (@media (inverted-colors) img, picture, video):
+ (@media (inverted-colors) img:not(picture>img), picture, video): Deleted.
+
2020-04-14 Wenson Hsieh <wenson_hs...@apple.com>
[iPadOS] Wikipedia articles lay out incorrectly in 1/3 multitasking window
Modified: trunk/Source/WebCore/css/html.css (260091 => 260092)
--- trunk/Source/WebCore/css/html.css 2020-04-14 20:23:15 UTC (rev 260091)
+++ trunk/Source/WebCore/css/html.css 2020-04-14 20:23:55 UTC (rev 260092)
@@ -1302,5 +1302,5 @@
/* Default support for "Smart Invert" where all content color except media is inverted. */
@media (inverted-colors) {
- img:not(picture>img), picture, video { filter: invert(100%); } /* Images and videos double-inverted. */
+ img, picture, video { filter: invert(100%); } /* Images and videos double-inverted. */
}
