<!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 {
    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 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 = [
    "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_equals(inherited_value, specified_value);
    }, "System color computes to itself on " + property);
    test(function() {
      let inherited_value =
        document.getElementById("inherited").computedStyleMap()
          .get(property);
      assert_regexp_match(inherited_value, /menu/i);
    }, "Inherited system color keyword is observable on " + property);
  }
</script>