Skip to content
Permalink
master
Switch branches/tags

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?
Go to file
 
 
Cannot retrieve contributors at this time
<!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>