| author | Xiaocheng Hu <xiaochengh@chromium.org> |
| Mon, 23 May 2022 10:01:02 +0000 | |
| changeset 618661 | f3347c816e310c4ec7e12213ba3803980814aa43 |
| parent 618660 | 661e97a5caa67f596169e0a99d979b2dcb90130f |
| child 618662 | f269d884d1fc189b91a8cb1d0755263143ff11a2 |
| push id | 163376 |
| push user | wptsync@mozilla.com |
| push date | Tue, 24 May 2022 10:19:51 +0000 |
| treeherder | autoland@2ef7c238533c [default view] [failures only] |
| perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
| reviewers | testonly |
| bugs | 1769628, 34081 |
| milestone | 102.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
|
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-cascade/layer-cssom-order-reverse-at-property.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<title>CSS Cascade Layers: @property rule invalidation on layer order changes</title> +<link rel="help" href="https://drafts.csswg.org/css-cascade-5/#layering"> +<link rel="author" href="mailto:xiaochengh@chromium.org"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#reference { + color: green; + --foo: green; +} +</style> + +<div id=target>Lorem ipsum</div> +<div id=reference>Lorem ipsum</div> + +<script> +const testCases = [ + { + title: 'Insert layer invalidates @property', + sheets: [ + '', + ` + @layer first { + @property --foo { + syntax: '<color>'; + inherits: false; + initial-value: green; + } + } + @layer second { + @property --foo { + syntax: '<color>'; + inherits: false; + initial-value: red; + } + } + `, + ], + update: function(sheets) { + sheets[0].insertRule('@layer second {}', 0); + }, + property: '--foo', + }, + { + title: 'Delete layer invalidates @property', + sheets: [ + '@layer second {}', + ` + @layer first { + @property --foo { + syntax: '<color>'; + inherits: false; + initial-value: red; + } + } + @layer second { + @property --foo { + syntax: '<color>'; + inherits: false; + initial-value: green; + } + } + `, + ], + update: function(sheets) { + sheets[0].deleteRule(0); + }, + property: '--foo', + }, +]; + +for (let testCase of testCases) { + test(testObj => { + const styleElements = testCase.sheets.map(sheet => { + const element = document.createElement('style'); + element.appendChild(document.createTextNode(sheet)); + document.head.appendChild(element); + return element; + }); + testObj.add_cleanup(() => { + for (let element of styleElements) + element.remove(); + }); + + const sheets = styleElements.map(element => element.sheet); + testCase.update(sheets); + const actual = getComputedStyle(target).getPropertyValue(testCase.property); + const expected = getComputedStyle(reference).getPropertyValue(testCase.property); + assert_equals(actual, expected); + }, testCase.title); +} +</script>
--- a/testing/web-platform/tests/css/css-cascade/layer-cssom-order-reverse.html +++ b/testing/web-platform/tests/css/css-cascade/layer-cssom-order-reverse.html @@ -5,17 +5,16 @@ <link rel="stylesheet" href="/fonts/ahem.css"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <style> #reference { color: green; font: 20px/1 ahem; width: max-content; - --foo: green; } </style> <div id=target>Lorem ipsum</div> <div id=reference>Lorem ipsum</div> <script> const testCases = [ @@ -108,68 +107,16 @@ const testCases = [ await document.fonts.load('20px/1 ahem'); await document.fonts.load('20px/1 custom'); document.body.offsetLeft; // Force style recalc sheets[0].deleteRule(0); await document.fonts.load('20px/1 custom'); }, property: 'width', }, - { - title: 'Insert layer invalidates @property', - sheets: [ - '', - ` - @layer first { - @property --foo { - syntax: '<color>'; - inherits: false; - initial-value: green; - } - } - @layer second { - @property --foo { - syntax: '<color>'; - inherits: false; - initial-value: red; - } - } - `, - ], - update: function(sheets) { - sheets[0].insertRule('@layer second {}', 0); - }, - property: '--foo', - }, - { - title: 'Delete layer invalidates @property', - sheets: [ - '@layer second {}', - ` - @layer first { - @property --foo { - syntax: '<color>'; - inherits: false; - initial-value: red; - } - } - @layer second { - @property --foo { - syntax: '<color>'; - inherits: false; - initial-value: green; - } - } - `, - ], - update: function(sheets) { - sheets[0].deleteRule(0); - }, - property: '--foo', - }, ]; for (let testCase of testCases) { promise_test(async test => { const styleElements = testCase.sheets.map(sheet => { const element = document.createElement('style'); element.appendChild(document.createTextNode(sheet)); document.head.appendChild(element);
new file mode 100644 --- /dev/null +++ b/testing/web-platform/tests/css/css-cascade/layer-replaceSync-clears-stale.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<title>CSS Cascade Layers: CSSStyleSheet.replaceSync clears stale statements</title> +<link rel="author" href="mailto:xiaochengh@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-cascade-5/#layering"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="target"></div> +<div id="reference" style="color: green"></div> + +<script> +// In all test cases, the 'color' property value of #target should be green. + +const testCases = [ + { + title: 'replaceSync clears stale layer statements', + style: ` + @layer second, first; + @layer second { + #target { color: green; } + } + @layer first { + #target { color: red; } + } + `, + operations: function(sheet) { + sheet.replaceSync(` + @layer first { + #target { color: red; } + } + @layer second { + #target { color: green; } + } + `); + } + }, +]; + +const target = document.getElementById('target'); +const reference = document.getElementById('reference'); + +for (let testCase of testCases) { + test(t => { + let sheet = new CSSStyleSheet(); + sheet.replaceSync(testCase.style); + document.adoptedStyleSheets = [sheet]; + + try { + testCase.operations(sheet); + assert_equals(getComputedStyle(target).color, getComputedStyle(reference).color); + } finally { + document.adoptedStyleSheets = []; + } + }, testCase.title); +} +</script>
--- a/testing/web-platform/tests/css/css-cascade/layer-statement-before-import.html +++ b/testing/web-platform/tests/css/css-cascade/layer-statement-before-import.html @@ -125,66 +125,33 @@ const testCases = [ #target { color: red; } `, operations: function(sheet) { sheet.deleteRule(4); } }, - { - title: 'replaceSync clears stale layer statements', - style: ` - @layer second, first; - @layer second { - #target { color: green; } - } - @layer first { - #target { color: red; } - } - `, - operations: function(sheet) { - sheet.replaceSync(` - @layer first { - #target { color: red; } - } - @layer second { - #target { color: green; } - } - `); - }, - constructedStyleSheet: true - } ]; const target = document.getElementById('target'); const reference = document.getElementById('reference'); for (let testCase of testCases) { promise_test(async t => { - let styleElement; - let sheet; - if (!testCase.constructedStyleSheet) { - styleElement = document.createElement('style'); - styleElement.textContent = testCase.style; - await new Promise(resolve => { - styleElement.onload = resolve; - styleElement.onerror = resolve; - document.head.append(styleElement); - }); - sheet = styleElement.sheet; - } else { - sheet = new CSSStyleSheet(); - sheet.replaceSync(testCase.style); - document.adoptedStyleSheets = [sheet]; - } + let styleElement = document.createElement('style'); + styleElement.textContent = testCase.style; + await new Promise(resolve => { + styleElement.onload = resolve; + styleElement.onerror = resolve; + document.head.append(styleElement); + }); + let sheet = styleElement.sheet; try { testCase.operations(sheet); assert_equals(getComputedStyle(target).color, getComputedStyle(reference).color); } finally { - if (styleElement) - styleElement.remove(); - document.adoptedStyleSheets = []; + styleElement.remove(); } }, testCase.title); } </script>