Don't adjust SVG text in forced colors mode

As per the following spec resolution, SVG text no longer should be adjusted in forced colors mode by default. w3c/csswg-drafts#3855 Bug: 970285 Change-Id: I11a785f64ca6f7e7840b17d6b59d4ce9b9f8b4e1
web-platform-tests · Feb 18, 2020 · 70e3427 · 70e3427
1 parent ceff4d5
commit 70e3427
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 52 deletions.
diff --git a/.../forced-colors-mode-18.tentative-ref.html → ...olors-mode/forced-colors-mode-18-ref.html b/.../forced-colors-mode-18.tentative-ref.html → ...olors-mode/forced-colors-mode-18-ref.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
-<title>Forced colors mode - fill and stroke reference.
-  Only text and foreignObject svg elements should have fill and stroke
+<title>Forced colors mode - svg.
+  Only foreignObject svg elements should have styles
   overridden in forced colors mode.
 </title>
 <style>
@@ -11,8 +11,8 @@
 </style>
 <body>
   <svg height="600" width="600">
-    <text x="0" y="15" fill="WindowText">
-      This text should have a WindowText fill and transparent stroke color in
+    <text x="0" y="15" fill="red" stroke="blue">
+      This text should have a red fill and blue stroke color in
       forced colors mode.
     </text>
     <rect x="0" height="60" y="30" width="180" style="fill: red; stroke: blue;"/>

diff --git a/...mode/forced-colors-mode-18.tentative.html → ...ed-colors-mode/forced-colors-mode-18.html b/...mode/forced-colors-mode-18.tentative.html → ...ed-colors-mode/forced-colors-mode-18.html
@@ -1,22 +1,20 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
-<title>Forced colors mode - fill and stroke.
-  Only text and foreignObject svg elements should have fill and stroke
+<title>Forced colors mode - svg.
+  Only foreignObject svg elements should have styles
   overridden in forced colors mode.
 </title>
 <link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
-<link rel=match href="forced-colors-mode-18.tentative-ref.html">
+<link rel=match href="forced-colors-mode-18-ref.html">
 <body>
-  <!-- Discussions on SVG styles in forced colors mode are ongoing:
-       https://github.com/w3c/csswg-drafts/issues/3855 -->
-  <svg height="600" width="600">
+  <svg height="600" width="600" style="color: orange">
     <text x="0" y="15" fill="red" stroke="blue">
-      This text should have a WindowText fill and transparent stroke color in
+      This text should have a red fill and blue stroke color in
       forced colors mode.
     </text>
     <rect x="0" height="60" y="30" width="180" style="fill: red; stroke: blue;"/>
-    <foreignObject x="20" y="100" width="160" height="160">
-      <div xmlns="http://www.w3.org/1999/xhtml" style="color: blue;">
+    <foreignObject x="20" y="100" width="160" height="160" style="color: currentColor;">
+      <div xmlns="http://www.w3.org/1999/xhtml">
         This text should be WindowText color in forced colors mode.
       </div>
       <svg height="20" width="20">

diff --git a/forced-colors-mode/forced-colors-mode-26-ref.html b/forced-colors-mode/forced-colors-mode-26-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode - fill/stroke.
+</title>
+<style>
+  body {
+    forced-color-adjust: none;
+  }
+</style>
+<body>
+  The triangle below should be currentColor when forced colors mode.
+  <svg height="600" width="600">
+    <path fill="currentColor" d="M150 0 L75 200 L225 200 Z" />
+  </svg>
+</body>
diff --git a/forced-colors-mode/forced-colors-mode-26.html b/forced-colors-mode/forced-colors-mode-26.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode - fill/stroke.
+</title>
+<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
+<link rel=match href="forced-colors-mode-26-ref.html">
+<style>
+  div {
+    fill: red;
+    stroke: blue;
+  }
+</style>
+<body>
+  <div>
+    The triangle below should be currentColor when forced colors mode.
+    <svg height="600" width="600">
+      <path d="M150 0 L75 200 L225 200 Z" />
+    </svg>
+  </div>
+</body>
diff --git a/forced-colors-mode/forced-colors-mode-26.tentative-ref.html b/forced-colors-mode/forced-colors-mode-26.tentative-ref.html
diff --git a/forced-colors-mode/forced-colors-mode-26.tentative.html b/forced-colors-mode/forced-colors-mode-26.tentative.html