Respect author/user system colors in Forced Colors Mode

As resolved by the CSSWG [1], we should respect system color rules
set by the author/user in Forced Colors Mode. This CL adds the logic
to accomplish this.

[1] https://github.com/w3c/csswg-drafts/issues/4178

Bug: 970285
Change-Id: I9eb4a33f8767f48d0c0a6fd65faec15f11edc140
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2390865
Commit-Queue: Alison Maher <almaher@microsoft.com>
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/master@{#805469}

third_party/blink/renderer/core/css/resolver/style_cascade.cc

@@ -550,32 +550,49 @@ void StyleCascade::ForceColors() {
 
   int bg_color_alpha =
       style->VisitedDependentColor(GetCSSPropertyBackgroundColor()).Alpha();
-
-  MaybeForceColor(GetCSSPropertyColor());
-  MaybeForceColor(GetCSSPropertyBackgroundColor());
-  MaybeForceColor(GetCSSPropertyBorderBottomColor());
-  MaybeForceColor(GetCSSPropertyBorderLeftColor());
-  MaybeForceColor(GetCSSPropertyBorderRightColor());
-  MaybeForceColor(GetCSSPropertyBorderTopColor());
-  MaybeForceColor(GetCSSPropertyFill());
-  MaybeForceColor(GetCSSPropertyOutlineColor());
-  MaybeForceColor(GetCSSPropertyStroke());
-  MaybeForceColor(GetCSSPropertyTextDecorationColor());
-  MaybeForceColor(GetCSSPropertyColumnRuleColor());
-  MaybeForceColor(GetCSSPropertyWebkitTapHighlightColor());
-  MaybeForceColor(GetCSSPropertyWebkitTextEmphasisColor());
-  MaybeForceColor(GetCSSPropertyInternalVisitedColor());
-  MaybeForceColor(GetCSSPropertyInternalVisitedBackgroundColor());
-  MaybeForceColor(GetCSSPropertyInternalVisitedBorderBottomColor());
-  MaybeForceColor(GetCSSPropertyInternalVisitedBorderLeftColor());
-  MaybeForceColor(GetCSSPropertyInternalVisitedBorderRightColor());
-  MaybeForceColor(GetCSSPropertyInternalVisitedBorderTopColor());
-  MaybeForceColor(GetCSSPropertyInternalVisitedFill());
-  MaybeForceColor(GetCSSPropertyInternalVisitedOutlineColor());
-  MaybeForceColor(GetCSSPropertyInternalVisitedStroke());
-  MaybeForceColor(GetCSSPropertyInternalVisitedTextDecorationColor());
-  MaybeForceColor(GetCSSPropertyInternalVisitedColumnRuleColor());
-  MaybeForceColor(GetCSSPropertyInternalVisitedTextEmphasisColor());
+  const SVGComputedStyle& svg_style = style->SvgStyle();
+
+  MaybeForceColor(GetCSSPropertyColor(), style->GetColor());
+  MaybeForceColor(GetCSSPropertyBackgroundColor(), style->BackgroundColor());
+  MaybeForceColor(GetCSSPropertyBorderBottomColor(),
+                  style->BorderBottomColor());
+  MaybeForceColor(GetCSSPropertyBorderLeftColor(), style->BorderLeftColor());
+  MaybeForceColor(GetCSSPropertyBorderRightColor(), style->BorderRightColor());
+  MaybeForceColor(GetCSSPropertyBorderTopColor(), style->BorderTopColor());
+  MaybeForceColor(GetCSSPropertyFill(), svg_style.FillPaint().GetColor());
+  MaybeForceColor(GetCSSPropertyOutlineColor(), style->OutlineColor());
+  MaybeForceColor(GetCSSPropertyStroke(), svg_style.StrokePaint().GetColor());
+  MaybeForceColor(GetCSSPropertyTextDecorationColor(),
+                  style->TextDecorationColor());
+  MaybeForceColor(GetCSSPropertyColumnRuleColor(), style->ColumnRuleColor());
+  MaybeForceColor(GetCSSPropertyWebkitTapHighlightColor(),
+                  style->TapHighlightColor());
+  MaybeForceColor(GetCSSPropertyWebkitTextEmphasisColor(),
+                  style->TextEmphasisColor());
+  MaybeForceColor(GetCSSPropertyInternalVisitedColor(),
+                  style->InternalVisitedColor());
+  MaybeForceColor(GetCSSPropertyInternalVisitedBackgroundColor(),
+                  style->InternalVisitedBackgroundColor());
+  MaybeForceColor(GetCSSPropertyInternalVisitedBorderBottomColor(),
+                  style->InternalVisitedBorderBottomColor());
+  MaybeForceColor(GetCSSPropertyInternalVisitedBorderLeftColor(),
+                  style->InternalVisitedBorderLeftColor());
+  MaybeForceColor(GetCSSPropertyInternalVisitedBorderRightColor(),
+                  style->InternalVisitedBorderRightColor());
+  MaybeForceColor(GetCSSPropertyInternalVisitedBorderTopColor(),
+                  style->InternalVisitedBorderTopColor());
+  MaybeForceColor(GetCSSPropertyInternalVisitedFill(),
+                  svg_style.InternalVisitedFillPaint().GetColor());
+  MaybeForceColor(GetCSSPropertyInternalVisitedOutlineColor(),
+                  style->InternalVisitedOutlineColor());
+  MaybeForceColor(GetCSSPropertyInternalVisitedStroke(),
+                  svg_style.InternalVisitedStrokePaint().GetColor());
+  MaybeForceColor(GetCSSPropertyInternalVisitedTextDecorationColor(),
+                  style->InternalVisitedTextDecorationColor());
+  MaybeForceColor(GetCSSPropertyInternalVisitedColumnRuleColor(),
+                  style->InternalVisitedColumnRuleColor());
+  MaybeForceColor(GetCSSPropertyInternalVisitedTextEmphasisColor(),
+                  style->InternalVisitedTextEmphasisColor());
 
   auto* none = CSSIdentifierValue::Create(CSSValueID::kNone);
   StyleBuilder::ApplyProperty(GetCSSPropertyTextShadow(), state_, *none);
@@ -589,12 +606,15 @@ void StyleCascade::ForceColors() {
           style->GetCurrentColor(), WebColorScheme::kLight, bg_color_alpha)));
 }
 
-void StyleCascade::MaybeForceColor(const CSSProperty& property) {
+void StyleCascade::MaybeForceColor(const CSSProperty& property,
+                                   const StyleColor& color) {
   DCHECK(GetDocument().InForcedColorsMode() &&
          state_.Style()->ForcedColorAdjust() != EForcedColorAdjust::kNone);
 
-  // TODO(almaher): Return early if the current computed color is already a
-  // system color.
+  // Preserve the author/user color if it computes to a system color.
+  if (color.IsSystemColor())
+    return;
+
   StyleBuilder::ApplyProperty(
       property, state_, *GetForcedColorValue(property.GetCSSPropertyName()));
 }

third_party/blink/renderer/core/css/resolver/style_cascade.h

@@ -36,6 +36,7 @@ class CSSVariableData;
 class CSSVariableReferenceValue;
 class CustomProperty;
 class MatchResult;
+class StyleColor;
 class StyleResolverState;
 
 namespace cssvalue {
@@ -209,7 +210,7 @@ class CORE_EXPORT StyleCascade {
   // Update the ComputedStyle to use the colors specified in Forced Colors Mode.
   // https://www.w3.org/TR/css-color-adjust-1/#forced
   void ForceColors();
-  void MaybeForceColor(const CSSProperty& property);
+  void MaybeForceColor(const CSSProperty& property, const StyleColor& color);
   const CSSValue* GetForcedColorValue(CSSPropertyName name);
 
   // Whether or not we are calculating the style for the root element.

third_party/blink/renderer/core/css/style_color.h

@@ -61,6 +61,7 @@ class CORE_EXPORT StyleColor {
   bool IsCurrentColor() const {
     return color_keyword_ == CSSValueID::kCurrentcolor;
   }
+  bool IsSystemColor() const { return IsSystemColor(color_keyword_); }
   Color GetColor() const {
     DCHECK(IsNumeric());
     return color_;

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-08-ref.html

@@ -6,10 +6,10 @@
     forced-color-adjust: none;
     outline-color: CanvasText;
     outline-style: solid;
-    -webkit-column-count: 3;
-    -webkit-column-gap: 40px;
-    -webkit-column-rule-color: CanvasText;
-    -webkit-column-rule-style: solid;
+    column-count: 3;
+    column-gap: 40px;
+    column-rule-color: CanvasText;
+    column-rule-style: solid;
   }
 </style>
 <body>

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-08.html

@@ -7,10 +7,10 @@
   h1 {
     outline-color: rgb(0, 0, 255);
     outline-style: solid;
-    -webkit-column-count: 3;
-    -webkit-column-gap: 40px;
-    -webkit-column-rule-color: rgb(0, 0, 255);
-    -webkit-column-rule-style: solid;
+    column-count: 3;
+    column-gap: 40px;
+    column-rule-color: rgb(0, 0, 255);
+    column-rule-style: solid;
   }
 </style>
 <body>

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-17-ref.html

@@ -6,6 +6,7 @@
     forced-color-adjust: none;
     text-decoration: underline;
     text-decoration-color: CanvasText;
+    text-emphasis: '*' CanvasText;
     -webkit-text-emphasis: '*' CanvasText;
   }
 </style>

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-17.html

@@ -7,6 +7,7 @@
   p {
     text-decoration: underline;
     text-decoration-color: red;
+    text-emphasis: '*' blue;
     -webkit-text-emphasis: '*' blue;
   }
 </style>

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-29-ref.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test forced colors mode on table styles with sys colors</title>
+<style>
+  table {
+    border-collapse: collapse;
+    forced-color-adjust: none;
+  }
+  td, th {
+    border: 1px solid LinkText;
+    padding: 8px;
+    text-align: left;
+  }
+  tr:nth-child(even) {
+    background-color: CanvasText;
+  }
+  tr:nth-child(odd) {
+    color: Canvas;
+    text-decoration: underline;
+    text-decoration-color: LinkText;
+    text-emphasis: '*' LinkText;
+    -webkit-text-emphasis: '*' LinkText;
+  }
+</style>
+<table>
+  <tr>
+    <th>Column</th>
+    <th>Column</th>
+    <th>Column</th>
+  </tr>
+  <tr>
+    <td></td>
+    <td></td>
+    <td></td>
+  </tr>
+  <tr>
+    <td>Entry</td>
+    <td>Entry</td>
+    <td>Entry</td>
+  </tr>
+</table>
\ No newline at end of file

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-29.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test forced colors mode on table styles with sys colors</title>
+<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
+<link rel=match href="forced-colors-mode-29-ref.html">
+<style>
+  table {
+    border-collapse: collapse;
+  }
+  td, th {
+    border: 1px solid LinkText;
+    padding: 8px;
+    text-align: left;
+  }
+  tr:nth-child(even) {
+    background-color: CanvasText;
+  }
+  tr:nth-child(odd) {
+    color: Canvas;
+    text-decoration: underline;
+    text-decoration-color: LinkText;
+    text-emphasis: '*' LinkText;
+    -webkit-text-emphasis: '*' LinkText;
+  }
+</style>
+<table>
+  <tr>
+    <th>Column</th>
+    <th>Column</th>
+    <th>Column</th>
+  </tr>
+  <tr>
+    <td></td>
+    <td></td>
+    <td></td>
+  </tr>
+  <tr>
+    <td>Entry</td>
+    <td>Entry</td>
+    <td>Entry</td>
+  </tr>
+</table>

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-30-ref.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode - fill/stroke with sys colors.
+</title>
+<style>
+  div {
+    fill: LinkText;
+    forced-color-adjust: none;
+    stroke: Link;
+  }
+</style>
+<div>
+  The triangle below should preserve the LinkText and Link fill/stroke colors
+  in forced colors mode.
+  <svg height="600" width="600">
+    <path d="M150 0 L75 200 L225 200 Z" />
+  </svg>
+</div>

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-30.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode - fill/stroke with sys colors.
+</title>
+<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
+<link rel=match href="forced-colors-mode-30-ref.html">
+<style>
+  div {
+    fill: LinkText;
+    stroke: Link;
+  }
+</style>
+<div>
+  The triangle below should preserve the LinkText and Link fill/stroke colors
+  in forced colors mode.
+  <svg height="600" width="600">
+    <path d="M150 0 L75 200 L225 200 Z" />
+  </svg>
+</div>

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-31-ref.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode - outline and column color with sys colors.</title>
+<style>
+  h1 {
+    forced-color-adjust: none;
+    outline-color: LinkText;
+    outline-style: solid;
+    column-count: 3;
+    column-gap: 40px;
+    column-rule-color: LinkText;
+    column-rule-style: solid;
+  }
+</style>
+<h1>
+  The outline-color and column-rule-color should be LinkText when forced colors
+  mode is enabled.
+</h1>

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-31.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode - outline and column color with sys colors.</title>
+<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
+<link rel=match href="forced-colors-mode-31-ref.html">
+<style>
+  :root {
+    --hc-color: LinkText;
+  }
+  h1 {
+    outline-color: var(--hc-color);
+    outline-style: solid;
+    column-count: 3;
+    column-gap: 40px;
+    column-rule-color: var(--hc-color);
+    column-rule-style: solid;
+  }
+</style>
+<h1>
+  The outline-color and column-rule-color should be LinkText when forced colors
+  mode is enabled.
+</h1>

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-32.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode - webkit-tap-highlight-color with sys color.</title>
+<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  a {
+    -webkit-tap-highlight-color: GrayText;
+  }
+</style>
+<a href="https://www.wikipedia.org" id="link">
+  This link color should not be overridden when forced colors mode is enabled.
+</a>
+<a href="" id="ref" style="forced-color-adjust:none"></a>
+
+<script>
+  var gray_text = getComputedStyle(ref).webkitTapHighlightColor;
+  test(function(){
+    assert_equals(getComputedStyle(link).webkitTapHighlightColor, gray_text);
+  }, "Checks hyperlinks are not overridden if a sys color is used.");
+</script>

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-33-ref.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test forced colors mode :visited colors</title>
+<style>
+  a {
+    background-color: Canvas;
+    border: 1px solid VisitedText;
+    color: VisitedText;
+    forced-color-adjust: none;
+    text-decoration: line-through;
+    text-decoration-color: VisitedText;
+    text-emphasis: '*' VisitedText;
+    -webkit-text-emphasis: '*' VisitedText;
+  }
+</style>
+<a href="">Visited link.</a>

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-33.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test forced colors mode :visited colors</title>
+<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
+<link rel=match href="forced-colors-mode-33-ref.html">
+<style>
+  a {
+    background-color: white;
+    border: 1px solid;
+    text-decoration: line-through;
+    text-emphasis: '*';
+    -webkit-text-emphasis: '*';
+  }
+  a:visited {
+    background-color: orange;
+    border: yellow;
+    color: red;
+    text-decoration-color: purple;
+    text-emphasis: blue;
+    -webkit-text-emphasis: blue;
+  }
+</style>
+<a href="">Visited link.</a>

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-34-ref.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test forced colors mode :visited colors with sys colors</title>
+<style>
+  a {
+    background-color: CanvasText;
+    border: 1px solid GrayText;
+    color: GrayText;
+    forced-color-adjust: none;
+    text-decoration: line-through;
+    text-decoration-color: GrayText;
+    text-emphasis: '*' GrayText;
+    -webkit-text-emphasis: '*' GrayText;
+  }
+</style>
+<a href="">Visited link.</a>

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-34.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test forced colors mode :visited colors with sys colors</title>
+<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
+<link rel=match href="forced-colors-mode-34-ref.html">
+<style>
+  a {
+    background-color: white;
+    border: 1px solid;
+    text-decoration: line-through;
+    text-emphasis: '*';
+    -webkit-text-emphasis: '*';
+  }
+  a:visited {
+    background-color: CanvasText;
+    border: GrayText;
+    color: GrayText;
+    text-decoration-color: GrayText;
+    text-emphasis: GrayText;
+    -webkit-text-emphasis: GrayText;
+  }
+</style>
+<a href="">Visited link.</a>

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-35-ref.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode - :visited fill/stroke.
+</title>
+<style>
+  a {
+    fill: 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" />
+  </svg>
+</a>
\ No newline at end of file

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-35.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode - :visited 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-35-ref.html">
+<style>
+  a {
+    fill: CurrentColor;
+    stroke: CurrentColor;
+  }
+  a:visited {
+    fill: blue;
+    stroke: green;
+  }
+</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" />
+  </svg>
+</a>

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-36-ref.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode - :visited fill/stroke with sys colors.
+</title>
+<style>
+  a {
+    fill: CanvasText;
+    forced-color-adjust: none;
+    stroke: LinkText;
+  }
+</style>
+<a href="">
+  The triangle below should preserve the CanvasText/LinkText fill/stroke colors
+  in forced colors mode.
+  <svg height="600" width="600">
+    <path d="M150 0 L75 200 L225 200 Z" />
+  </svg>
+</a>
\ No newline at end of file

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-36.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode - :visited fill/stroke with sys colors.
+</title>
+<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
+<link rel=match href="forced-colors-mode-36-ref.html">
+<style>
+  a {
+    fill: Canvas;
+    stroke: Canvas;
+  }
+  a:visited {
+    fill: CanvasText;
+    stroke: LinkText;
+  }
+</style>
+<a href="">
+  The triangle below should preserve the CanvasText/LinkText fill/stroke colors
+  in forced colors mode.
+  <svg height="600" width="600">
+    <path d="M150 0 L75 200 L225 200 Z" />
+  </svg>
+</a>

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-37-ref.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode - :visited outline and column color.</title>
+<style>
+  a {
+    forced-color-adjust: none;
+    outline-color: VisitedText;
+    outline-style: solid;
+    column-count: 3;
+    column-gap: 40px;
+    column-rule-color: VisitedText;
+    column-rule-style: solid;
+  }
+</style>
+<a href="">
+  The outline-color and column-rule-color should be overridden when forced colors
+  mode is enabled.
+</a>

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-37.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode - :visited outline and column color.</title>
+<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
+<link rel=match href="forced-colors-mode-37-ref.html">
+<style>
+  :root {
+    --hc-color: red;
+  }
+  a {
+    outline-style: solid;
+    column-count: 3;
+    column-gap: 40px;
+    column-rule-style: solid;
+  }
+  a:visited {
+    outline-color: var(--hc-color);
+    column-rule-color: var(--hc-color);
+  }
+</style>
+<a href="">
+  The outline-color and column-rule-color should be overridden when forced colors
+  mode is enabled.
+</a>

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-38-ref.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode - :visited outline and column color with sys colors.</title>
+<style>
+  a {
+    forced-color-adjust: none;
+    outline-color: GrayText;
+    outline-style: solid;
+    column-count: 3;
+    column-gap: 40px;
+    column-rule-color: GrayText;
+    column-rule-style: solid;
+  }
+</style>
+<a href="">
+  The outline-color and column-rule-color should be GrayText when forced colors
+  mode is enabled.
+</a>

third_party/blink/web_tests/external/wpt/forced-colors-mode/forced-colors-mode-38.html

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode - :visited outline and column color with sys colors.</title>
+<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
+<link rel=match href="forced-colors-mode-38-ref.html">
+<style>
+  :root {
+    --hc-color: GrayText;
+  }
+  a {
+    outline-style: solid;
+    column-count: 3;
+    column-gap: 40px;
+    column-rule-style: solid;
+  }
+  a:visited {
+    outline-color: var(--hc-color);
+    column-rule-color: var(--hc-color);
+  }
+</style>
+<a href="">
+  The outline-color and column-rule-color should be GrayText when forced colors
+  mode is enabled.
+</a>