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 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2055431 Reviewed-by: Rune Lillesveen <[email protected]> Commit-Queue: Alison Maher <[email protected]> Cr-Commit-Position: refs/heads/master@{#743163}
andruud · Feb 20, 2020 · ae1a412 · ae1a412
1 parent b45f50b
commit ae1a412
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 94 deletions.
diff --git a/forced-colors-mode/forced-colors-mode-18-ref.html b/forced-colors-mode/forced-colors-mode-18-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode - svg.
+  Only foreignObject svg elements should have styles
+  overridden in forced colors mode.
+</title>
+<style>
+  svg, text, foreignObject {
+    forced-color-adjust: none;
+  }
+</style>
+<body>
+  <svg height="600" width="600">
+    <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;"/>
+    <foreignObject x="20" y="100" width="160" height="160">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="color: orange;">
+        This text should be orange in forced colors mode due to inheritance.
+      </div>
+      <svg height="20" width="20">
+        <rect x="0" height="20" y="0" width="20" style="fill: green; stroke: purple;"/>
+      </svg>
+    </foreignObject>
+  </svg>
+
+  <svg height="600" width="600">
+    <foreignObject x="20" y="100" width="160" height="160" style="color: CanvasText;">
+      <div xmlns="http://www.w3.org/1999/xhtml">
+        This text should be CanvasText in forced colors mode.
+      </div>
+    </foreignObject>
+  </svg>
+</body>
diff --git a/forced-colors-mode/forced-colors-mode-18.html b/forced-colors-mode/forced-colors-mode-18.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<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-ref.html">
+<body>
+  <svg height="600" width="600" style="color: orange">
+    <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;"/>
+    <foreignObject x="20" y="100" width="160" height="160" style="color: blue;">
+      <div xmlns="http://www.w3.org/1999/xhtml">
+        This text should be orange in forced colors mode due to inheritance.
+      </div>
+      <svg height="20" width="20">
+        <rect x="0" height="20" y="0" width="20" style="fill: green; stroke: purple;"/>
+      </svg>
+    </foreignObject>
+  </svg>
+
+  <svg height="600" width="600">
+    <foreignObject x="20" y="100" width="160" height="160" style="color: blue;">
+      <div xmlns="http://www.w3.org/1999/xhtml">
+        This text should be CanvasText in forced colors mode.
+      </div>
+    </foreignObject>
+  </svg>
+</body>
diff --git a/forced-colors-mode/forced-colors-mode-18.tentative-ref.html b/forced-colors-mode/forced-colors-mode-18.tentative-ref.html
diff --git a/forced-colors-mode/forced-colors-mode-18.tentative.html b/forced-colors-mode/forced-colors-mode-18.tentative.html
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