Bug 1769628 [wpt PR 34081] - Split two css/css-cascade tests, a=testonly
authorXiaocheng Hu <xiaochengh@chromium.org>
Mon, 23 May 2022 10:01:02 +0000
changeset 618661 f3347c816e310c4ec7e12213ba3803980814aa43
parent 618660 661e97a5caa67f596169e0a99d979b2dcb90130f
child 618662 f269d884d1fc189b91a8cb1d0755263143ff11a2
push id163376
push userwptsync@mozilla.com
push dateTue, 24 May 2022 10:19:51 +0000
treeherderautoland@2ef7c238533c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1769628, 34081
milestone102.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 1769628 [wpt PR 34081] - Split two css/css-cascade tests, a=testonly Automatic update from web-platform-tests Split two css/css-cascade tests (#34081) -- wpt-commits: 76522e294f9408b0ca42e55a0475a731f044b165 wpt-pr: 34081
testing/web-platform/tests/css/css-cascade/layer-cssom-order-reverse-at-property.html
testing/web-platform/tests/css/css-cascade/layer-cssom-order-reverse.html
testing/web-platform/tests/css/css-cascade/layer-replaceSync-clears-stale.html
testing/web-platform/tests/css/css-cascade/layer-statement-before-import.html
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>