| <!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> |
