Force border color at used value time

Forced colors should now happen at used value time. This change adds
an internal property to store the forced colors value of
border-color. This internal value is then applied to the visited
/unvisited border-bottom-color, border-top-color, border-right-color
and border-left-color at used value time when appropriate.

The other forced color properties will be moved in follow up changes.

Bug: 970285
Change-Id: If2da52205595edf38b5009adaedcb0008c87d0e6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2511858
Commit-Queue: Alison Maher <almaher@microsoft.com>
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#829899}

third_party/blink/public/mojom/use_counter/css_property_id.mojom

@@ -38,6 +38,7 @@ enum CSSSampleId {
     kInternalVisitedTextStrokeColor = 0,
     kInternalFontSizeDelta = 0,
     kInternalForcedBackgroundColor = 0,
+    kInternalForcedBorderColor = 0,
 
     // This CSSSampleId represents page load for CSS histograms. It is recorded once
     // per page visit for each CSS histogram being logged on the blink side and the

third_party/blink/renderer/core/animation/css_color_interpolation_type.cc

@@ -141,8 +141,9 @@ Color CSSColorInterpolationType::ResolveInterpolableColor(
                                *state.Style())
               .Access();
     }
-    AddPremultipliedColor(red, green, blue, alpha, currentcolor_fraction,
-                          current_style_color.GetColor());
+    AddPremultipliedColor(
+        red, green, blue, alpha, currentcolor_fraction,
+        current_style_color.Resolve(Color(), state.Style()->UsedColorScheme()));
   }
   const TextLinkColors& colors = state.GetDocument().GetTextLinkColors();
   if (double webkit_activelink_fraction =

third_party/blink/renderer/core/css/css_properties.json5

@@ -6082,6 +6082,19 @@
       valid_for_first_letter: true,
       valid_for_cue: true,
     },
+    {
+      name: "-internal-forced-border-color",
+      property_methods: ["ParseSingleValue", "CSSValueFromComputedStyleInternal", "ColorIncludingFallback"],
+      field_group: "*",
+      field_template: "external",
+      include_paths: ["third_party/blink/renderer/core/css/style_color.h"],
+      default_value: "StyleColor::CurrentColor()",
+      type_name: "StyleColor",
+      computed_style_custom_functions: ["getter"],
+      converter: "ConvertStyleColor",
+      style_builder_template: "color",
+      valid_for_first_letter: true,
+    },
 
     // Name: -internal-empty-line-height:
     // Value: none | fabricated

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

@@ -577,11 +577,6 @@ void StyleCascade::ForceColors() {
   const SVGComputedStyle& svg_style = style->SvgStyle();
 
   MaybeForceColor(GetCSSPropertyColor(), style->GetColor());
-  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());
@@ -594,14 +589,6 @@ void StyleCascade::ForceColors() {
                   style->TextEmphasisColor());
   MaybeForceColor(GetCSSPropertyInternalVisitedColor(),
                   style->InternalVisitedColor());
-  MaybeForceColor(GetCSSPropertyInternalVisitedBorderBottomColor(),
-                  style->InternalVisitedBorderBottomColor());
-  MaybeForceColor(GetCSSPropertyInternalVisitedBorderLeftColor(),
-                  style->InternalVisitedBorderLeftColor());
-  MaybeForceColor(GetCSSPropertyInternalVisitedBorderRightColor(),
-                  style->InternalVisitedBorderRightColor());
-  MaybeForceColor(GetCSSPropertyInternalVisitedBorderTopColor(),
-                  style->InternalVisitedBorderTopColor());
   MaybeForceColor(GetCSSPropertyInternalVisitedFill(),
                   svg_style.InternalVisitedFillPaint().GetColor());
   MaybeForceColor(GetCSSPropertyInternalVisitedOutlineColor(),

third_party/blink/renderer/core/css/style_engine_test.cc

@@ -3483,7 +3483,8 @@ TEST_F(StyleEngineTest, DisabledAdvanceOverrideDescriptor) {
 
 // Properties stored for forced colors mode should only be usable by the UA.
 TEST_F(StyleEngineTest, InternalForcedProperties) {
-  String properties_to_test[] = {"-internal-forced-background-color"};
+  String properties_to_test[] = {"-internal-forced-background-color",
+                                 "-internal-forced-border-color"};
   for (auto property : properties_to_test) {
     String declaration = property + ":red";
     ASSERT_TRUE(

third_party/blink/renderer/core/html/resources/forced_colors.css

@@ -34,7 +34,7 @@
   }
 
   fieldset {
-    border-color: CanvasText;
+    -internal-forced-border-color: CanvasText;
   }
 
   mark {
@@ -48,9 +48,9 @@
   input,
   textarea {
     background-color: Canvas;
-    border-color: ButtonText;
     color: CanvasText;
     -internal-forced-background-color: Canvas;
+    -internal-forced-border-color: ButtonText;
   }
 
   input:hover,
@@ -58,7 +58,7 @@
   input[type="file"]:hover::-webkit-file-upload-button,
   input:focus,
   textarea:focus {
-    border-color: Highlight;
+    -internal-forced-border-color: Highlight;
   }
 
   input[type="text"]:disabled,
@@ -75,9 +75,9 @@
   input[type="datetime-local"]:disabled,
   textarea:disabled {
     background-color: ButtonFace;
-    border-color: GrayText;
     color: GrayText;
     -internal-forced-background-color: ButtonFace;
+    -internal-forced-border-color: GrayText;
   }
 
   input::-webkit-calendar-picker-indicator {
@@ -118,10 +118,10 @@
   input[type="submit"],
   input[type="reset"],
   input[type="file"]::-webkit-file-upload-button {
-    border-color: ButtonText;
     background-color: ButtonFace;
     color: ButtonText;
     -internal-forced-background-color: ButtonFace;
+    -internal-forced-border-color: ButtonText;
   }
 
   button:hover,
@@ -132,15 +132,15 @@
   input[type="button"]:focus,
   input[type="submit"]:focus,
   input[type="reset"]:focus {
-    border-color: Highlight;
+    -internal-forced-border-color: Highlight;
   }
 
   button:disabled,
   input[type="button"]:disabled,
   input[type="submit"]:disabled,
   input[type="reset"]:disabled {
-    border-color: GrayText;
     color: GrayText;
+    -internal-forced-border-color: GrayText;
   }
 
   /* same color as hyperlinks */
@@ -150,8 +150,8 @@
 
   select:-internal-list-box {
     background-color: Canvas !important;
-    border-color: ButtonText;
     -internal-forced-background-color: Canvas !important;
+    -internal-forced-border-color: ButtonText;
   }
 
   /* option disabled */
@@ -196,9 +196,9 @@
 
   select {
     background-color: Canvas;
-    border-color: CanvasText;
     color: CanvasText;
     -internal-forced-background-color: Canvas;
+    -internal-forced-border-color: CanvasText;
   }
 
   select:not(:-internal-list-box) {
@@ -207,23 +207,23 @@
   }
 
   select:hover {
-    border-color: Highlight;
+    -internal-forced-border-color: Highlight;
   }
 
   select:focus {
-    border-color: Highlight;
+    -internal-forced-border-color: Highlight;
   }
 
   select:disabled {
-    border-color: GrayText;
     color: GrayText;
     opacity: 1;
+    -internal-forced-border-color: GrayText;
   }
 
   meter::-webkit-meter-bar {
     background-color: ButtonFace;
-    border-color: CanvasText;
     -internal-forced-background-color: ButtonFace;
+    -internal-forced-border-color: CanvasText;
   }
 
   meter::-webkit-meter-even-less-good-value,

third_party/blink/renderer/core/style/computed_style.h

@@ -111,6 +111,7 @@ class Fill;
 class Float;
 class FloodColor;
 class InternalForcedBackgroundColor;
+class InternalForcedBorderColor;
 class InternalVisitedBackgroundColor;
 class InternalVisitedBorderBottomColor;
 class InternalVisitedBorderLeftColor;
@@ -218,6 +219,7 @@ class ComputedStyle : public ComputedStyleBase,
   friend class css_longhand::Float;
   friend class css_longhand::FloodColor;
   friend class css_longhand::InternalForcedBackgroundColor;
+  friend class css_longhand::InternalForcedBorderColor;
   friend class css_longhand::InternalVisitedBackgroundColor;
   friend class css_longhand::InternalVisitedBorderBottomColor;
   friend class css_longhand::InternalVisitedBorderLeftColor;
@@ -2845,6 +2847,9 @@ class ComputedStyle : public ComputedStyleBase,
   const StyleColor& InternalForcedBackgroundColor() const {
     return InternalForcedBackgroundColorInternal();
   }
+  const StyleColor& InternalForcedBorderColor() const {
+    return InternalForcedBorderColorInternal();
+  }
 
   StyleColor DecorationColorIncludingFallback(bool visited_link) const;
 

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

@@ -9,6 +9,7 @@
 <style>
   div {
     background-color: green;
+    border-color: green;
   }
 </style>
 <div id="div">
@@ -18,6 +19,10 @@
 <script>
   const properties_to_test = [
     "background-color",
+    "border-bottom-color",
+    "border-left-color",
+    "border-right-color",
+    "border-top-color",
   ];
   for (let property of properties_to_test) {
     test(function() {

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

+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode - resolved value.
+  Forced colors happens at used value time. The resolved values of certain color
+  properties are used values. This test ensures that those values are forced in
+  forced colors mode.
+</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>
+  div {
+    background-color: green;
+    border-color: green;
+  }
+</style>
+<div id="div"></div>
+
+<script>
+  const properties_to_test = [
+    "background-color",
+    "border-bottom-color",
+    "border-left-color",
+    "border-right-color",
+    "border-top-color",
+  ];
+  for (let property of properties_to_test) {
+    test(function() {
+      let value =
+        window.getComputedStyle(document.getElementById("div")).getPropertyValue(property);
+        assert_not_equals(value, "rgb(0, 128, 0)")
+    }, "Forced colors affects the resolved value of " + property);
+  }
+</script>