Bug 1629063 [wpt PR 22856] - [css-variables] Clone style when there are no variable references, a=testonly
authorJavier Fernandez <jfernandez@igalia.com>
Wed, 13 May 2020 09:39:27 +0000
changeset 531055 19a7b343525ff50af27134cf96e315dffa2f9394
parent 531054 41e84eec6ab95581c52e4864bad75ec99b7fbf28
child 531056 526af2b81b9d46d5880e937e460f832894c53390
push id37435
push userapavel@mozilla.com
push dateWed, 20 May 2020 15:28:23 +0000
treeherdermozilla-central@5415da14ec9a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1629063, 22856, 1056209, 2111172, 765278
milestone78.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1629063 [wpt PR 22856] - [css-variables] Clone style when there are no variable references, a=testonly 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
testing/web-platform/tests/css/css-properties-values-api/registered-property-change-style-001.html
testing/web-platform/tests/css/css-variables/css-variable-change-style-001.html
testing/web-platform/tests/css/css-variables/css-variable-change-style-002.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/registered-property-change-style-001.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Variables Test: Style changes on registered 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>
+<div id="outer">
+    <div id="inbetween">
+        <div id="inner"></div>
+    </div>
+</div>
+<script>
+    "use strict";
+    test( function () {
+        outer.style.cssText = '';
+        inbetween.style.cssText = '';
+        inner.style.cssText = 'color: var(--color1)';
+        let initialValue = getComputedStyle(inner).getPropertyValue('color');
+        assert_equals(initialValue, "rgb(0, 0, 0)", "Initial value");
+
+        inbetween.style.cssText = 'color: green';
+        let inheritedValue = getComputedStyle(inner).getPropertyValue('color');
+        assert_equals(inheritedValue, "rgb(0, 128, 0)", "Inherited value");
+
+        CSS.registerProperty({name: '--color1', syntax: '<color>', initialValue: 'red', inherits: true});
+        let actualValue = getComputedStyle(inner).getPropertyValue('color');
+        assert_equals(actualValue, "rgb(255, 0, 0)", "Resolved value");
+    }, "New registered property declaration");
+
+    test( function () {
+        outer.style.cssText = '';
+        inbetween.style.cssText = '';
+        inner.style.cssText = 'color: var(--color2)';
+        let initialValue = getComputedStyle(inner).getPropertyValue('color');
+        assert_equals(initialValue, "rgb(0, 0, 0)", "Initial value");
+
+        outer.style.cssText = '--color2: blue';
+        inbetween.style.cssText = 'color: green';
+        let resolvedValue = getComputedStyle(inner).getPropertyValue('color');
+        assert_equals(resolvedValue, "rgb(0, 0, 255)", "Resolved value");
+
+        outer.style.cssText = '';
+        CSS.registerProperty({name: '--color2', syntax: '<color>', initialValue: 'red', inherits: true});
+        let actualValue = getComputedStyle(inner).getPropertyValue('color');
+        assert_equals(actualValue, "rgb(255, 0, 0)", "Resolved value");
+    }, "Registered property overrides a previous declaration ");
+</script>
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-variables/css-variable-change-style-001.html
@@ -0,0 +1,96 @@
+<!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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-variables/css-variable-change-style-002.html
@@ -0,0 +1,56 @@
+<!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>