Update inverted-colors UA styles to match spec

https://bugs.webkit.org/show_bug.cgi?id=259416 Reviewed by Tim Nguyen. Updated the style for the inverted-colors media query in html.css the new styles are taken directly from the spec. Spec: https://drafts.csswg.org/mediaqueries-5/#inverted * LayoutTests/fast/media/mq-inverted-colors-ua-styles-expected.txt: Added. * LayoutTests/fast/media/mq-inverted-colors-ua-styles-img-expected.html: Added. * LayoutTests/fast/media/mq-inverted-colors-ua-styles-img.html: Added. * LayoutTests/fast/media/mq-inverted-colors-ua-styles.html: Added. * Source/WebCore/css/html.css: (@media (inverted-colors) img:not(picture>img), picture, video): (@media (inverted-colors) img, picture, video): Deleted. Canonical link: https://commits.webkit.org/266234@main
WebKit · Jul 23, 2023 · 87011db · 87011db
1 parent e31512b
commit 87011db
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 2 deletions.
diff --git a/LayoutTests/fast/media/mq-inverted-colors-ua-styles-expected.txt b/LayoutTests/fast/media/mq-inverted-colors-ua-styles-expected.txt
@@ -0,0 +1,13 @@
+inverted-colors ua style test
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS getComputedStyle(document.querySelector('img')).filter is 'invert(1)'
+PASS getComputedStyle(document.querySelector('picture')).filter is 'invert(1)'
+PASS getComputedStyle(document.querySelector('picture>img')).filter is 'none'
+PASS getComputedStyle(document.querySelector('video')).filter is 'invert(1)'
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/media/mq-inverted-colors-ua-styles-img-expected.html b/LayoutTests/fast/media/mq-inverted-colors-ua-styles-img-expected.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<img src="resources/apple_logo_big.jpg">
+
+<script>
+  if (window.internals) {
+    window.internals.settings.forcedColorsAreInvertedAccessibilityValue = "on";
+  }
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/media/mq-inverted-colors-ua-styles-img.html b/LayoutTests/fast/media/mq-inverted-colors-ua-styles-img.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<picture>
+  <img src="resources/apple_logo_big.jpg">
+</picture>
+<script>
+  if (window.internals) {
+    window.internals.settings.forcedColorsAreInvertedAccessibilityValue = "on";
+  }
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/media/mq-inverted-colors-ua-styles.html b/LayoutTests/fast/media/mq-inverted-colors-ua-styles.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<body>
+<script src="../../resources/js-test.js"></script>
+
+<img>
+<picture>
+  <img>
+</picture>
+<video></video>
+
+<script>
+  if (window.testRunner && window.internals) {
+    window.testRunner.dumpAsText();
+    window.internals.settings.forcedColorsAreInvertedAccessibilityValue = "on";
+    description("inverted-colors ua style test");
+    shouldEvaluateTo("getComputedStyle(document.querySelector('img')).filter", "'invert(1)'");
+    shouldEvaluateTo("getComputedStyle(document.querySelector('picture')).filter", "'invert(1)'");
+    shouldEvaluateTo("getComputedStyle(document.querySelector('picture>img')).filter", "'none'");
+    shouldEvaluateTo("getComputedStyle(document.querySelector('video')).filter", "'invert(1)'");
+  }
+</script>
+</body>
+</html>
diff --git a/Source/WebCore/css/html.css b/Source/WebCore/css/html.css
@@ -1426,9 +1426,10 @@ applet, embed, object, img {
     }
 }
 
-/* Default support for "Smart Invert" where all content color except media is inverted. */ 
+/* Default support for "Smart Invert" where all content color except media is inverted. */
+/* https://drafts.csswg.org/mediaqueries-5/#inverted */
 @media (inverted-colors) {
-    img, picture, video { filter: invert(100%); } /* Images and videos double-inverted. */
+    img:not(picture>img), picture, video { filter: invert(100%); } /* Images and videos double-inverted. */
 }
 
 /* https://drafts.csswg.org/css-text-decor-4/#text-decoration-skipping */