forked from mirrors/gecko-dev
aec22aaff6
Automatic update from web-platform-tests [css-variables] Clone style when there are no variable references When resolving the CSS Custom Properties inheritance, we recalculate all the styles of nodes in the hierarchy. Following a similar approach to the one used for 'independent properties', we can just clone the node's parent style and propagate just the InheritedVariables data structure. We'll only recalc the styles if a node has any variable reference, defined as :var(--*), to a custom property. Bug: 1056209 Change-Id: I81081e11cd69f06e69a6030b97fabce3a50630b3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2111172 Commit-Queue: Javier Fernandez <jfernandez@igalia.com> Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/master@{#765278} -- wpt-commits: 2237420ac3aeffa6cdd1ceff6d8b1886fa9005dc wpt-pr: 22856
56 lines
2.3 KiB
HTML
56 lines
2.3 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>
|
|
.test1 > div > div { color: var(--x); }
|
|
.test2 > div > div { background-color: var(--x); }
|
|
.test3 > div > div { white-space: var(--x); }
|
|
</style>
|
|
<div id="outer">
|
|
<div>
|
|
<div id="inner1"></div>
|
|
</div>
|
|
<div>
|
|
<div id="inner2"></div>
|
|
</div>
|
|
<div>
|
|
<div id="inner3"></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
"use strict";
|
|
|
|
let colorValues = [
|
|
{ Id: "case1", value: "red", expected: "rgb(255, 0, 0)" },
|
|
{ Id: "case2", value: "green", expected: "rgb(0, 128, 0)" },
|
|
];
|
|
let whiteSpaceValues = [
|
|
{ Id: "case1", value: "pre-wrap", expected: "pre-wrap" },
|
|
{ Id: "case2", value: "nowrap", expected: "nowrap" },
|
|
];
|
|
let testcases = [
|
|
{ property: "color", className: "test1", values: colorValues, },
|
|
{ property: "background-color", className: "test2", values: colorValues, },
|
|
{ property: "white-space", className: "test3", values: whiteSpaceValues},
|
|
];
|
|
|
|
testcases.forEach(function (testcase) {
|
|
test( function () {
|
|
outer.className = testcase.className;
|
|
testcase.values.forEach(function (entry) {
|
|
document.body.style.cssText = "--x: " + entry.value;
|
|
let actualValue = getComputedStyle(inner1).getPropertyValue(testcase.property);
|
|
assert_equals(actualValue, entry.expected, entry.Id + "-1");
|
|
actualValue = getComputedStyle(inner2).getPropertyValue(testcase.property);
|
|
assert_equals(actualValue, entry.expected, entry.Id + "-2");
|
|
actualValue = getComputedStyle(inner3).getPropertyValue(testcase.property);
|
|
assert_equals(actualValue, entry.expected, entry.Id + "-3");
|
|
});
|
|
}, "Declaration changes on '" + testcase.property + "' propagate to all variable references");
|
|
});
|
|
</script>
|