Add CSS system colors Mark and MarkText.

CSS Color Module Level 4 defines new system colors
(https://www.w3.org/TR/css-color-4/#css-system-colors).
This CL implements Mark and MarkText.

Bug: 1299441
Change-Id: Id184ee58c49e7d55a32b3776e5d0d9489eb4e9cb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3536909
Reviewed-by: Stephen Chenney <schenney@chromium.org>
Commit-Queue: Stephen Chenney <schenney@chromium.org>
Cr-Commit-Position: refs/heads/main@{#983348}

third_party/blink/renderer/core/css/css.dict

@@ -204,6 +204,8 @@
 "inactivecaptiontext"
 "infobackground"
 "infotext"
+"mark"
+"marktext"
 "menutext"
 "scrollbar"
 "threeddarkshadow"

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

@@ -214,6 +214,8 @@
     "infobackground",
     "infotext",
     "linktext",
+    "mark",
+    "marktext",
     "menutext",
     "scrollbar",
     "threeddarkshadow",

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

@@ -73,8 +73,7 @@ bool StyleColor::IsSystemColorIncludingDeprecated(CSSValueID id) {
 
 bool StyleColor::IsSystemColor(CSSValueID id) {
   switch (id) {
-    // SelectedItem, SelectedItemText, Mark, MarkText not
-    // understood yet.
+    // SelectedItem, SelectedItemText not understood yet.
     case CSSValueID::kCanvas:
     case CSSValueID::kCanvastext:
     case CSSValueID::kLinktext:
@@ -88,6 +87,8 @@ bool StyleColor::IsSystemColor(CSSValueID id) {
     case CSSValueID::kHighlight:
     case CSSValueID::kHighlighttext:
     case CSSValueID::kGraytext:
+    case CSSValueID::kMark:
+    case CSSValueID::kMarktext:
       return true;
     default:
       return false;

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

@@ -1123,8 +1123,8 @@ pre, xmp, plaintext, listing {
 }
 
 mark {
-    background-color: yellow;
-    color: black
+    background-color: Mark;
+    color: MarkText;
 }
 
 big {

third_party/blink/renderer/core/layout/layout_theme.cc

@@ -652,6 +652,10 @@ Color LayoutTheme::DefaultSystemColor(
                                                               : 0xFF000000;
     case CSSValueID::kLinktext:
       return 0xFF0000EE;
+    case CSSValueID::kMark:
+      return 0xFFFFFF00;
+    case CSSValueID::kMarktext:
+      return 0xFF000000;
     case CSSValueID::kMenu:
       return color_scheme == mojom::blink::ColorScheme::kDark ? 0xFF404040
                                                               : 0xFFF7F7F7;

third_party/blink/web_tests/external/wpt/css/css-color/parsing/system-color-valid-expected.txt

@@ -11,6 +11,8 @@ PASS e.style['color'] = "GrayText" should set the property value
 PASS e.style['color'] = "Highlight" should set the property value
 PASS e.style['color'] = "HighlightText" should set the property value
 PASS e.style['color'] = "LinkText" should set the property value
+PASS e.style['color'] = "Mark" should set the property value
+PASS e.style['color'] = "MarkText" should set the property value
 PASS e.style['color'] = "VisitedText" should set the property value
 FAIL e.style['color'] = "SelectedItem" should set the property value assert_not_equals: property should be set got disallowed value ""
 FAIL e.style['color'] = "SelectedItemText" should set the property value assert_not_equals: property should be set got disallowed value ""

third_party/blink/web_tests/external/wpt/css/css-color/parsing/system-color-valid.html

@@ -23,6 +23,8 @@
 test_valid_value("color", "Highlight", "highlight");
 test_valid_value("color", "HighlightText", "highlighttext");
 test_valid_value("color", "LinkText", "linktext");
+test_valid_value("color", "Mark", "mark");
+test_valid_value("color", "MarkText", "marktext");
 test_valid_value("color", "VisitedText", "visitedtext");
 test_valid_value("color", "SelectedItem", "selecteditem");
 test_valid_value("color", "SelectedItemText", "selecteditemtext");

third_party/blink/web_tests/external/wpt/css/css-color/system-color-consistency.html

@@ -19,12 +19,16 @@
   <div id="buttons">
     <button name="button"></button><input type="submit" name="submit button"><input type="reset" name="reset button">
   </div>
+  <mark id="mark">Marked text</mark>
   <script>
     for (let element of document.getElementById("buttons").children) {
       style = document.defaultView.getComputedStyle(element);
       test_computed_value(`color`, `ButtonText`, style.getPropertyValue('color'), 'has the same color as text on a ' + element.name);
     }
-    // Test with no specified target contrast
+    // Mark and MarkText
+    style = document.defaultView.getComputedStyle(document.getElementById('mark'));
+    test_computed_value('color', 'Mark', style.getPropertyValue('background-color'), 'has the same color as the background-color of a mark element');
+    test_computed_value('color', 'MarkText', style.getPropertyValue('color'), 'has the same color as the color of a mark element');
   </script>
 </body>
 

third_party/blink/web_tests/svg/css/rect-system-color-expected.txt

@@ -76,6 +76,12 @@ PASS computedStyleText.stroke is computedStyleDiv.get('color').toString()
 Testing system colorLinkText
 PASS computedStyleText.fill is computedStyleDiv.get('color').toString()
 PASS computedStyleText.stroke is computedStyleDiv.get('color').toString()
+Testing system colorMark
+PASS computedStyleText.fill is computedStyleDiv.get('color').toString()
+PASS computedStyleText.stroke is computedStyleDiv.get('color').toString()
+Testing system colorMarkText
+PASS computedStyleText.fill is computedStyleDiv.get('color').toString()
+PASS computedStyleText.stroke is computedStyleDiv.get('color').toString()
 Testing system colorMenu
 PASS computedStyleText.fill is computedStyleDiv.get('color').toString()
 PASS computedStyleText.stroke is computedStyleDiv.get('color').toString()

third_party/blink/web_tests/svg/css/rect-system-color.xhtml

@@ -28,7 +28,7 @@ var systemColors = new Array("ActiveBorder", "ActiveCaption", "ActiveText", "App
                              "ButtonFace", "ButtonHighlight", "ButtonShadow", "ButtonText", "Canvas", "CanvasText",
                              "CaptionText", "Field", "FieldText", "GrayText", "Highlight", "HighlightText",
                              "InactiveBorder", "InactiveCaption", "InactiveCaptionText", "InfoBackground",
-                             "InfoText", "LinkText", "Menu", "MenuText", "Scrollbar", "ThreeDDarkShadow",
+                             "InfoText", "LinkText", "Mark", "MarkText", "Menu", "MenuText", "Scrollbar", "ThreeDDarkShadow",
                              "ThreeDFace", "ThreeDHighlight", "ThreeDLightShadow", "ThreeDShadow", "VisitedText",
                              "Window", "WindowFrame", "WindowText");
 var svgElement = document.getElementsByTagName("svg")[0];