mirror of
https://github.com/servo/servo.git
synced 2025-06-25 09:34:32 +01:00
96 lines
4.7 KiB
HTML
96 lines
4.7 KiB
HTML
<!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">
|
|
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
|
|
<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 = "--x:" + value.outer;
|
|
inbetween.style.cssText = "--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>
|