From 76522e294f9408b0ca42e55a0475a731f044b165 Mon Sep 17 00:00:00 2001 From: Xiaocheng Hu Date: Wed, 18 May 2022 13:13:07 +0000 Subject: [PATCH] Split two css/css-cascade tests (#34081) --- ...layer-cssom-order-reverse-at-property.html | 94 +++++++++++++++++++ .../layer-cssom-order-reverse.html | 53 ----------- .../layer-replaceSync-clears-stale.html | 56 +++++++++++ .../layer-statement-before-import.html | 51 ++-------- 4 files changed, 159 insertions(+), 95 deletions(-) create mode 100644 css/css-cascade/layer-cssom-order-reverse-at-property.html create mode 100644 css/css-cascade/layer-replaceSync-clears-stale.html diff --git a/css/css-cascade/layer-cssom-order-reverse-at-property.html b/css/css-cascade/layer-cssom-order-reverse-at-property.html new file mode 100644 index 00000000000000..dfa6bbfcfbdf72 --- /dev/null +++ b/css/css-cascade/layer-cssom-order-reverse-at-property.html @@ -0,0 +1,94 @@ + +CSS Cascade Layers: @property rule invalidation on layer order changes + + + + + + + +
Lorem ipsum
+
Lorem ipsum
+ + diff --git a/css/css-cascade/layer-cssom-order-reverse.html b/css/css-cascade/layer-cssom-order-reverse.html index 0bc05c2142af93..ddc5977d42c41e 100644 --- a/css/css-cascade/layer-cssom-order-reverse.html +++ b/css/css-cascade/layer-cssom-order-reverse.html @@ -10,7 +10,6 @@ color: green; font: 20px/1 ahem; width: max-content; - --foo: green; } @@ -113,58 +112,6 @@ }, property: 'width', }, - { - title: 'Insert layer invalidates @property', - sheets: [ - '', - ` - @layer first { - @property --foo { - syntax: ''; - inherits: false; - initial-value: green; - } - } - @layer second { - @property --foo { - syntax: ''; - 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: ''; - inherits: false; - initial-value: red; - } - } - @layer second { - @property --foo { - syntax: ''; - inherits: false; - initial-value: green; - } - } - `, - ], - update: function(sheets) { - sheets[0].deleteRule(0); - }, - property: '--foo', - }, ]; for (let testCase of testCases) { diff --git a/css/css-cascade/layer-replaceSync-clears-stale.html b/css/css-cascade/layer-replaceSync-clears-stale.html new file mode 100644 index 00000000000000..c9d88681bd250b --- /dev/null +++ b/css/css-cascade/layer-replaceSync-clears-stale.html @@ -0,0 +1,56 @@ + +CSS Cascade Layers: CSSStyleSheet.replaceSync clears stale statements + + + + + +
+
+ + diff --git a/css/css-cascade/layer-statement-before-import.html b/css/css-cascade/layer-statement-before-import.html index 7d099368d86a62..fcde9605325b4c 100644 --- a/css/css-cascade/layer-statement-before-import.html +++ b/css/css-cascade/layer-statement-before-import.html @@ -130,29 +130,6 @@ 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'); @@ -160,30 +137,20 @@ 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); }