Add failing CSS cascade layer test

domenic · domenic · commit 501b1cca1f8c · 2025-04-13T19:12:01.000+09:00
See #3785.
diff --git a/test/web-platform-tests/to-upstream-expectations.yaml b/test/web-platform-tests/to-upstream-expectations.yaml
@@ -1,3 +1,4 @@
+css/css-cascade/layers-basic.html: [fail, https://github.com/jsdom/jsdom/issues/3785]
 css/cssom/style-width-calc-vh-vw.html: [fail, https://github.com/jsdom/jsdom/issues/1332]
 dom/nodes/Element-closest-null-selectors.html: [fail, https://github.com/jsdom/jsdom/issues/3466]
 dom/nodes/Element-matches-active-pseudo-class.html: [fail, https://github.com/jsdom/jsdom/issues/3610]
diff --git a/test/web-platform-tests/to-upstream/css/css-cascade/layers-basic.html b/test/web-platform-tests/to-upstream/css/css-cascade/layers-basic.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<title>CSS @layers basic example</title>
+<meta charset="utf-8">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-cascade-5/#layering">
+<!-- Regression test for https://github.com/jsdom/jsdom/issues/3785 -->
+
+<style>
+  @layer foo, bar;
+  @layer foo {
+    p {
+      color: yellow;
+    }
+  }
+
+  @layer bar {
+    p {
+      background-color: black;
+    }
+  }
+
+  p {
+    font-size: 4rem;
+  }
+</style>
+
+<p id="testP">Test paragraph</p>
+
+<script>
+"use strict";
+
+test(() => {
+  const p = document.getElementById("testP");
+  const styles = window.getComputedStyle(p);
+
+  assert_equals(styles.color, "rgb(255, 255, 0)");
+  assert_equals(styles.backgroundColor, "rgb(0, 0, 0)");
+  assert_equals(styles.fontSize, "64px");
+});
+</script>

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+css/css-cascade/layers-basic.html: [fail, https://github.com/jsdom/jsdom/issues/3785]`
`1`	`2`	`css/cssom/style-width-calc-vh-vw.html: [fail, https://github.com/jsdom/jsdom/issues/1332]`
`2`	`3`	`dom/nodes/Element-closest-null-selectors.html: [fail, https://github.com/jsdom/jsdom/issues/3466]`
`3`	`4`	`dom/nodes/Element-matches-active-pseudo-class.html: [fail, https://github.com/jsdom/jsdom/issues/3610]`