Make system color keywords compute to themselves

Prior to this change, system color keywords would be resolved to RGBA values at computed-value time. With this change, we defer resolution until resolved-value time, to align with css-color-4. The kernel of the change is in StyleBuilderConverter which allows for storing an unresolved system color keyword, and in StyleColor which can now be constructed from a system color keyword and requires a WebColorScheme value to resolve colors. The remainder of the change consists of updates at call sites to plumb in the used color scheme. Bug: 1081945 Change-Id: I3b704cdf38c72b5284ad61a20e28825ee3e8e9e8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2253198 Commit-Queue: Kevin Babbitt <kbabbitt@microsoft.com> Reviewed-by: Fredrik Söderquist <fs@opera.com> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Reviewed-by: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/master@{#786380}
web-platform-tests · Jul 8, 2020 · 1ebdb4d · 1ebdb4d
1 parent dcc2ecf
commit 1ebdb4d
Showing 1 changed file with 102 additions and 0 deletions.
diff --git a/css/css-color/system-color-compute.html b/css/css-color/system-color-compute.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<title>CSS Color 4: System colors should compute to themselves</title>
+<link rel="help" href="https://www.w3.org/TR/css-color-4/#resolving-color-values">
+<meta name="assert" content="Tests if system color keywords compute to themselves">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+.parent {
+    border: 1px solid black;
+    width: 100px;
+    height: 170px;
+    margin: 5px;
+    padding: 5px;
+    color-scheme: light;
+}
+
+.child {
+    position: relative;
+    border: 1px solid black;
+    width: 80px;
+    height: 50px;
+    margin: 4px;
+    padding: 4px;
+    color-scheme: dark;
+}
+
+.specified {
+    background-color: Menu;
+    box-shadow: 2px 2px Menu;
+    text-shadow: 2px 2px Menu;
+    border-color: Menu;
+    column-rule-color: Menu;
+    outline-color: Menu;
+    caret-color: Menu;
+    fill: Menu;
+    stroke: Menu;
+}
+
+.inherit {
+    background-color: inherit;
+    box-shadow: inherit;
+    text-shadow: inherit;
+    border-color: inherit;
+    column-rule-color: inherit;
+    outline-color: inherit;
+    caret-color: inherit;
+    fill: inherit;
+    stroke: inherit;
+}
+</style>
+
+<div id="parent" class="specified parent">Parent
+  <div id="specified" class="specified child">Specified Child</div>
+  <div id="inherited" class="inherit child">Inherit Child</div>
+</div>
+
+<script>
+  // The premise behind this test is that if a system color keyword computes to
+  // itself, then child elements inheriting a system color value will inherit
+  // the keyword, not the color it resolves to. We can detect this by applying
+  // different color schemes to parent and child, then comparing the results we
+  // get between a child that inherited a system color versus a child that
+  // received the system color directly.
+
+  // As a precondition check, validate that the color-scheme property results
+  // in a different resolved color.
+  test(function() {
+    let light_value =
+        getComputedStyle(document.getElementById("parent")).backgroundColor;
+    let dark_value =
+        getComputedStyle(document.getElementById("specified")).backgroundColor;
+    assert_not_equals(light_value, dark_value);
+  }, "color-scheme property affects Menu system color keyword");
+
+  // Test several color properties.
+  const properties_to_test = [
+    "background-color",
+    "box-shadow",
+    "text-shadow",
+    "border-left-color",
+    "border-top-color",
+    "border-right-color",
+    "border-bottom-color",
+    "column-rule-color",
+    "outline-color",
+    "caret-color",
+    "fill",
+    "stroke",
+  ];
+
+  for (let property of properties_to_test) {
+    test(function() {
+      let specified_value =
+        getComputedStyle(document.getElementById("specified"))
+            .getPropertyValue(property);
+        let inherited_value =
+          getComputedStyle(document.getElementById("inherited"))
+            .getPropertyValue(property);
+        assert_equals(inherited_value, specified_value);
+    }, "System color computes to itself on " + property);
+  }
+</script>