Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
wpt/css/css-color/system-color-compute.html
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |