mozilla-central/testing/web-platform/tests/css/css-color/system-color-compute.html

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

<!DOCTYPE html>
<title>CSS Color 4: System colors compute to absolute colors</title>
<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>