Split two css/css-cascade tests (#34081)

web-platform-tests · May 18, 2022 · 76522e2 · 76522e2
1 parent 01e527f
commit 76522e2
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 95 deletions.
diff --git a/css/css-cascade/layer-cssom-order-reverse-at-property.html b/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>
diff --git 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;
 }
 </style>
 
@@ -113,58 +112,6 @@
     },
     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) {

diff --git a/css/css-cascade/layer-replaceSync-clears-stale.html b/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>
diff --git a/css/css-cascade/layer-statement-before-import.html b/css/css-cascade/layer-statement-before-import.html
@@ -130,60 +130,27 @@
       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);
 }