Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-variables/css-variable-change-style-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Variables Test: Style changes on properties using variables</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<meta name="assert" content="A change in the custom property declaration must be propagated to all the descendants">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.inner {
color: var(--x);
background-color: var(--x);
white-space: var(--x);
}
</style>
<div id="outer">
<div id="inbetween">
<div id="inner"></div>
</div>
</div>
<script>
"use strict";
let colorValues = [
{ Id: "case1", outer: "red", inbetween: "", expected: "rgb(255, 0, 0)" },
{ Id: "case2", outer: "red", inbetween: "blue", expected: "rgb(0, 0, 255)" },
{ Id: "case3", outer: "green", inbetween: "blue", expected: "rgb(0, 0, 255)" },
{ Id: "case4", outer: "green", inbetween: "", expected: "rgb(0, 128, 0)" },
{ Id: "case5", outer: "green", inbetween: "red", expected: "rgb(255, 0, 0)" },
{ Id: "case6", outer: "" , inbetween: "red", expected: "rgb(255, 0, 0)" },
{ Id: "case7", outer: "blue" , inbetween: "" , expected: "rgb(0, 0, 255)" },
];
let whiteSpaceValues = [
{ Id: "case1", outer: "pre", inbetween: "", expected: "pre" },
{ Id: "case2", outer: "pre-wrap", inbetween: "", expected: "pre-wrap" },
{ Id: "case3", outer: "pre-wrap", inbetween: "nowrap", expected: "nowrap" },
{ Id: "case3", outer: "pre-wrap", inbetween: "", expected: "pre-wrap" },
{ Id: "case4", outer: "pre-line", inbetween: "normal", expected: "normal" },
{ Id: "case5", outer: "pre-line", inbetween: "", expected: "pre-line" },
{ Id: "case6", outer: "", inbetween: "pre-wrap", expected: "pre-wrap" },
{ Id: "case7", outer: "", inbetween: "", expected: "normal" },
];
let testcases = [
{ property: "color", values: colorValues, },
{ property: "background-color", values: colorValues, },
{ property: "white-space", values: whiteSpaceValues },
];
function initializeStyles() {
outer.style.cssText = "";
inbetween.style.cssText = "";
inner.style.cssText = "";
}
testcases.forEach(function (testcase) {
test( function () {
initializeStyles();
inner.style.cssText = testcase.property + ': var(--x)';
testcase.values.forEach(function (value) {
outer.style.cssText = value.outer ? "--x:" + value.outer : "";
inbetween.style.cssText = value.inbetween ? "--x:" + value.inbetween : "";
let computedStyle = getComputedStyle(inner);
let actualValue = computedStyle.getPropertyValue(testcase.property);
assert_equals(actualValue, value.expected, value.Id);
});
}, "Test declaration changes on '" + testcase.property + "' as variable");
test( function () {
initializeStyles();
inbetween.style.cssText = testcase.property + ': inherit';
inner.style.cssText = testcase.property + ': inherit';
testcase.values.forEach(function (value) {
outer.style.cssText = "--x:" + value.outer + "; " + testcase.property + ": " + value.outer;
let actualValue = getComputedStyle(inner).getPropertyValue(testcase.property);
let expectedValue = getComputedStyle(outer).getPropertyValue(testcase.property);
assert_equals(actualValue, expectedValue, value.Id);
});
}, "Avoid masking differences on '" + testcase.property + "' due to declaration changes");
test( function () {
initializeStyles();
inbetween.style.cssText = testcase.property + ': inherit';
inner.style.cssText = testcase.property + ': inherit';
let value1 = testcase.values[0];
let value2 = testcase.values[3];
outer.style.cssText = "--x:" + value2.outer + "; " + testcase.property + ": " + value1.outer;
let actualValue = getComputedStyle(inner).getPropertyValue(testcase.property);
assert_equals(actualValue, value1.expected, value1.Id);
inner.style.cssText = testcase.property + ': var(--x)';
actualValue = getComputedStyle(inner).getPropertyValue(testcase.property);
assert_equals(actualValue, value2.expected, value2.Id);
}, "Test changing '" + testcase.property + "' value to become a css variable");
});
</script>