Force fill/stroke color at used value time

Forced colors should now happen at used value time. This change adjusts the used value of fill, stroke, -internal-visited-fill, and -internal-visited-stroke to take forced colors into account. No internal properties were needed since we only ever force fill and stroke to one value in forced colors mode. The other forced color properties will be moved in follow up changes. Note: This change will result in some functional differences with the current fill/stroke behavior in forced colors mode. SVG elements have "forced-color-adjust:none" set. Previously, SVG elements could inherit forced colors from their ancestors. Now, since we force at used value time, the used value of fill/stroke for SVG elements can no longer inherit forced colors (unless "forced-color-adjust:auto" is set by the author). The related web tests have been updated to reflect this change in behavior. Bug: 970285 Change-Id: I5bcc498a67dbd49d7b319f7f079d062d73586013 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2515228 Commit-Queue: Alison Maher <almaher@microsoft.com> Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/master@{#829948}
web-platform-tests · Nov 21, 2020 · 6411b45 · 6411b45
1 parent bb2b039
commit 6411b45
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 13 deletions.
diff --git a/forced-colors-mode/forced-colors-mode-26-ref.html b/forced-colors-mode/forced-colors-mode-26-ref.html
@@ -8,8 +8,12 @@
   }
 </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" />
+  The triangle below should NOT get overridden in forced colors mode.
+  <svg height="200" width="350">
+    <path fill="red" stroke="blue" d="M150 0 L75 200 L225 200 Z" />
+  </svg>
+  The triangle below should be currentColor in forced colors mode.
+  <svg height="200" width="350">
+    <path fill="currentColor" stroke="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
@@ -12,8 +12,12 @@
 </style>
 <body>
   <div>
-    The triangle below should be currentColor when forced colors mode.
-    <svg height="600" width="600">
+    The triangle below should NOT get overridden in forced colors mode.
+    <svg height="200" width="350">
+      <path d="M150 0 L75 200 L225 200 Z" />
+    </svg>
+    The triangle below should be currentColor in forced colors mode.
+    <svg height="200" width="350" style="forced-color-adjust: auto;">
       <path d="M150 0 L75 200 L225 200 Z" />
     </svg>
   </div>

diff --git a/forced-colors-mode/forced-colors-mode-35-ref.html b/forced-colors-mode/forced-colors-mode-35-ref.html
@@ -4,14 +4,17 @@
 </title>
 <style>
   a {
-    fill: VisitedText;
+    color: VisitedText;
     forced-color-adjust: none;
   }
 </style>
 <a href="">
-  The triangle below should not preserve the blue/green fill/stroke colors
-  in forced colors mode.
-  <svg height="600" width="600">
-    <path d="M150 0 L75 200 L225 200 Z" />
+  The triangle below should NOT get overridden in forced colors mode.
+  <svg height="200" width="350">
+    <path fill="blue" stroke="green" d="M150 0 L75 200 L225 200 Z" />
+  </svg>
+  The triangle below should be currentColor in forced colors mode.
+  <svg height="200" width="350">
+    <path fill="currentColor" stroke="currentColor" d="M150 0 L75 200 L225 200 Z" />
   </svg>
 </a>
diff --git a/forced-colors-mode/forced-colors-mode-35.html b/forced-colors-mode/forced-colors-mode-35.html
@@ -15,9 +15,12 @@
   }
 </style>
 <a href="">
-  The triangle below should not preserve the blue/green fill/stroke colors
-  in forced colors mode.
-  <svg height="600" width="600">
+  The triangle below should NOT get overridden in forced colors mode.
+  <svg height="200" width="350">
+    <path d="M150 0 L75 200 L225 200 Z" />
+  </svg>
+  The triangle below should be currentColor in forced colors mode.
+  <svg height="200" width="350" style="forced-color-adjust: auto;">
     <path d="M150 0 L75 200 L225 200 Z" />
   </svg>
 </a>
diff --git a/forced-colors-mode/forced-colors-mode-40.html b/forced-colors-mode/forced-colors-mode-40.html
@@ -10,6 +10,8 @@
   div {
     background-color: green;
     border-color: green;
+    fill: green;
+    stroke: green;
   }
 </style>
 <div id="div">
@@ -23,6 +25,8 @@
     "border-left-color",
     "border-right-color",
     "border-top-color",
+    "fill",
+    "stroke"
   ];
   for (let property of properties_to_test) {
     test(function() {