[css-nesting] Make & in top-level rules behave like :scope.

This was a recent and seemingly unannounced change to the spec. Bug: 1095675 Change-Id: I9fec6ffe2f7f48ad1505772578127ad160038956 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4206786 Commit-Queue: Steinar H Gunderson <[email protected]> Reviewed-by: Rune Lillesveen <[email protected]> Cr-Commit-Position: refs/heads/main@{#1100352}
mathiasbynens · Feb 2, 2023 · c82c735 · c82c735
1 parent cfdf7a3
commit c82c735
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 0 deletions.
diff --git a/css/css-nesting/nesting-basic-ref.html b/css/css-nesting/nesting-basic-ref.html
@@ -26,4 +26,5 @@
   <div class="test"></div>
   <div class="test"></div>
   <div class="test"></div>
+  <div class="test"></div>
 </body>
diff --git a/css/css-nesting/nesting-basic.html b/css/css-nesting/nesting-basic.html
@@ -80,6 +80,14 @@
     background-color: green !important;
   }
 
+  /* & at top level counts as :scope, i.e. the root element here */
+  & .test-12 {
+    background-color: green;
+  }
+  & > .test-12 {
+    background-color: red !important;
+  }
+
   body * + * {
     margin-top: 8px;
   }
@@ -100,4 +108,5 @@
   <div class="test test-9 t9-- t9-"><div></div></div>
   <div class="test test-10"><div></div></div>
   <div class="test test-11"><div></div></div>
+  <div class="test test-12"></div>
 </body>
diff --git a/css/css-nesting/top-level-is-scope.html b/css/css-nesting/top-level-is-scope.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<title>Top-level & is treated like :scope</title>
+<link rel="author" title="Steinar H. Gunderson" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-nesting-1/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="p">
+  <div class="match" id="level1">
+    <div class="match" id="level2"></div>
+  </div>
+</div>
+
+<script>
+  test(() => {
+    let matched = [];
+    for (const elem of p.querySelectorAll('& .match')) {
+      matched.push(elem.getAttribute('id'));
+    }
+    assert_array_equals(matched, ['level1', 'level2']);
+  }, '& as direct ancestor');
+
+  test(() => {
+    let matched = [];
+    for (const elem of p.querySelectorAll('& > .match')) {
+      matched.push(elem.getAttribute('id'));
+    }
+    assert_array_equals(matched, ['level1']);
+  }, '& matches scoped element only, not everything');
+</script>