Issue #2862 - add initial nested css test file

2026-05-26 13:58:49 +00:00 · 2026-03-11 22:08:14 -04:00
parent ce4b9975db
commit fc09c7cb34
2 changed files with 131 additions and 0 deletions
@@ -71,6 +71,7 @@ support-files = file_animations_with_disabled_properties.html
 [test_at_rule_parse_serialize.html]
 [test_attribute_selector_eof_behavior.html]
 [test_background_blend_mode.html]
+[test_basic_nesting_lowering.html]
 [test_box_size_keywords.html]
 [test_bug73586.html]
 [test_bug74880.html]
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test for Basic CSS Nesting Lowering</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" href="/tests/SimpleTest/test.css">
+</head>
+<body>
+<div id="scope" class="scope order">
+  <span id="desc" class="desc"></span>
+</div>
+<div id="button" class="button active"></div>
+<pre id="standalone-log"></pre>
+<script>
+"use strict";
+
+function colorOf(win, element, property) {
+  return win.getComputedStyle(element).getPropertyValue(property);
+}
+
+function appendTestSheet() {
+  var style = document.createElement("style");
+  style.textContent =
+    ".scope {\n" +
+    "  color: rgb(1, 2, 3);\n" +
+    "  .desc {\n" +
+    "    color: rgb(4, 5, 6);\n" +
+    "  }\n" +
+    "  background-color: rgb(7, 8, 9);\n" +
+    "}\n" +
+    "\n" +
+    ".button {\n" +
+    "  &.active {\n" +
+    "    color: rgb(10, 11, 12);\n" +
+    "  }\n" +
+    "}\n" +
+    "\n" +
+    ".order {\n" +
+    "  border-top-style: solid;\n" +
+    "  @media all {\n" +
+    "    & {\n" +
+    "      border-top-color: rgb(13, 14, 15);\n" +
+    "    }\n" +
+    "  }\n" +
+    "  border-right-style: solid;\n" +
+    "  border-right-color: rgb(16, 17, 18);\n" +
+    "}\n";
+  document.head.appendChild(style);
+  return style;
+}
+
+function runChecks(style, report) {
+  var scope = document.getElementById("scope");
+  var desc = document.getElementById("desc");
+  var button = document.getElementById("button");
+
+  report(colorOf(window, scope, "color") === "rgb(1, 2, 3)",
+         "outer rule declarations should apply",
+         colorOf(window, scope, "color"),
+         "rgb(1, 2, 3)");
+  report(colorOf(window, desc, "color") === "rgb(4, 5, 6)",
+         "nested descendant rule should be lowered",
+         colorOf(window, desc, "color"),
+         "rgb(4, 5, 6)");
+  report(colorOf(window, scope, "background-color") === "rgb(7, 8, 9)",
+         "declarations after a nested rule should preserve order",
+         colorOf(window, scope, "background-color"),
+         "rgb(7, 8, 9)");
+  report(colorOf(window, button, "color") === "rgb(10, 11, 12)",
+         "ampersand selectors should be expanded",
+         colorOf(window, button, "color"),
+         "rgb(10, 11, 12)");
+  report(colorOf(window, scope, "border-top-color") === "rgb(13, 14, 15)",
+         "nested group rules should target the parent selector",
+         colorOf(window, scope, "border-top-color"),
+         "rgb(13, 14, 15)");
+  report(colorOf(window, scope, "border-right-color") === "rgb(16, 17, 18)",
+         "declarations after nested group rules should still apply",
+         colorOf(window, scope, "border-right-color"),
+         "rgb(16, 17, 18)");
+  report(style.sheet.cssRules.length === 7,
+         "lowering should produce flat top-level rules",
+         String(style.sheet.cssRules.length),
+         "7");
+}
+
+function runStandalone() {
+  var log = document.getElementById("standalone-log");
+  var lines = [
+    "Standalone mode.",
+    "This page only demonstrates nesting if layout.css.nesting.enabled is already true in the browser.",
+    ""
+  ];
+  var style = appendTestSheet();
+
+  runChecks(style, function(pass, message, actual, expected) {
+    lines.push((pass ? "PASS" : "FAIL") + ": " + message);
+    if (!pass) {
+      lines.push("  expected: " + expected);
+      lines.push("  actual:   " + actual);
+    }
+  });
+
+  log.textContent = lines.join("\n");
+}
+
+function runMochitest() {
+  SimpleTest.waitForExplicitFinish();
+  SpecialPowers.pushPrefEnv({
+    set: [["layout.css.nesting.enabled", true]]
+  }, function() {
+    var style = appendTestSheet();
+
+    runChecks(style, function(pass, message, actual, expected) {
+      is(actual, expected, message);
+    });
+
+    SimpleTest.finish();
+  });
+}
+
+if (typeof SimpleTest !== "undefined" && typeof SpecialPowers !== "undefined") {
+  runMochitest();
+} else {
+  runStandalone();
+}
+</script>
+</body>
+</html>