1 files changed, 112 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-color/system-color-compute.html b/testing/web-platform/tests/css/css-color/system-color-compute.html
new file mode 100644
index 0000000000..ed4f3b947e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-color/system-color-compute.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<title>CSS Color 4: System colors compute to absolute colors</title>
+<link rel="help" href="https://www.w3.org/TR/css-color-4/#resolving-color-values">
+<meta name="assert" content="Tests that system color keywords resolve to absolute colors at computed value time">
+<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 {
+    color: Menu;
+    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 {
+    color: 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 were to
+  // compute to itself, then child elements inheriting a system color value
+  // will incorrectly inherit the keyword, not the color it resolves to. We can
+  // detect whether this is happening 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 = [
+    "color",
+    "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_not_equals(inherited_value, specified_value);
+    }, "System color doesn't compute to itself on " + property);
+    test(function() {
+      let inherited_value =
+        document.getElementById("inherited").computedStyleMap()
+          .get(property);
+      assert_false(/menu/i.test(inherited_value));
+    }, "Inherited system color keyword is observable on " + property);
+  }
+</script>