Bug 1822476 [wpt PR 39005] - [@scope] Enable nesting features within @scope's body, a=testonly

Automatic update from web-platform-tests
[@scope] Enable nesting features within @scope's body

This CL passes a parent rule and accompanying CSSNestingType
to the ConsumeRuleList call which handles @scope's body. This has
the following effects:

 - A :scope descendant compound is implicitly inserted if the selector
   is not scope-containing.
 - The parent selector (&) now refers to the <scope-start>
   selector list.
 - Relative selectors are enabled.

The code to resize the arena in ConsumeStyleRule must now be detached
from whether or not parent_rule_for_nesting is nullptr. This is because
we can now enter ConsumeStyleRule with parent_rule_for_nesting!=nullptr
without another call to ConsumeStyleRule below us on the stack
(via ConsumeScopeRule).

Bug: 1280240
Change-Id: Ibe6b1e40e22d535a094b0ec464ae119952b015f5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4272459
Reviewed-by: Steinar H Gunderson <sesse@chromium.org>
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1119257}

--

wpt-commits: 00b9747943d4c008b366cb42a2b50d5717189e0e
wpt-pr: 39005

testing/web-platform/tests/css/css-cascade/scope-evaluation.html

@@ -70,10 +70,27 @@ test_scope(document.currentScript, () => {
   </div>
 </template>
 <script>
+test_scope(document.currentScript, () => {
+  assert_not_green('.a');
+  assert_not_green('.a > span');
+}, 'Scope can not match its own root without :scope');
+</script>
+
+<template>
+  <style>
+    @scope (.a) {
+      :scope { background-color: green; }
+    }
+  </style>
+  <div class=a> <!-- green -->
+    <span>not green</span>
+  </div>
+</template>
+<script>
 test_scope(document.currentScript, () => {
   assert_green('.a');
   assert_not_green('.a > span');
-}, 'Single scope (self)');
+}, 'Selecting self with :scope');
 </script>
 
 <template>
@@ -354,7 +371,7 @@ test_scope(document.currentScript, () => {
 test_scope(document.currentScript, () => {
   assert_not_green('#above');
   assert_not_green('#adjacent');
-  assert_green('.a');
+  assert_not_green('.a');
   assert_green('.a > div');
   assert_not_green('.b');
   assert_not_green('#below');
@@ -382,7 +399,7 @@ test_scope(document.currentScript, () => {
 test_scope(document.currentScript, () => {
   assert_not_green('#above');
   assert_not_green('#adjacent');
-  assert_green('.a');
+  assert_not_green('.a');
   assert_green('.a > div');
   assert_green('.b');
   assert_not_green('#limit');
@@ -457,3 +474,20 @@ test_scope(document.currentScript, () => {
   assert_not_green('.c');
 }, ':scope indirect adjacent sibling');
 </script>
+
+
+<template>
+  <style>
+    @scope (.a) {
+      > span { background-color: green; }
+    }
+  </style>
+  <div class=a>
+    <span>green</span>
+  </div>
+</template>
+<script>
+test_scope(document.currentScript, () => {
+  assert_green('.a > span');
+}, 'Relative selector inside @scope');
+</script>

testing/web-platform/tests/css/css-cascade/scope-invalidation.html

@@ -66,7 +66,7 @@ test_scope_invalidation(document.currentScript, () => {
 <template>
   <style>
     @scope (.a) {
-      .b { background-color: green; }
+      :scope { background-color: green; }
     }
   </style>
   <div class=b></div>
@@ -79,10 +79,9 @@ test_scope_invalidation(document.currentScript, () => {
   assert_green(b);
   b.classList.remove('a');
   assert_not_green(b);
-}, 'Element becoming scope root, with inner selector matching that root');
+}, 'Element becoming scope root, with inner :scope rule');
 </script>
 
-
 <template>
   <style>
     @scope (.a) to (.b) {

testing/web-platform/tests/css/css-cascade/scope-nesting.html

@@ -93,3 +93,28 @@ test((t) => {
   assert_equals(getComputedStyle(outside).zIndex, 'auto');
 }, 'Relative selectors in <scope-end>');
 </script>
+
+<template id=test_inner_nest>
+  <div>
+    <style>
+      @scope (.a) {
+        & + & {
+          z-index:1;
+        }
+      }
+    </style>
+    <div class=a>
+      <div id=inner1 class=a></div>
+      <div id=inner2 class=a></div>
+    </div>
+  </div>
+</template>
+<script>
+test((t) => {
+  t.add_cleanup(() => main.replaceChildren());
+  main.append(test_inner_nest.content.cloneNode(true));
+
+  assert_equals(getComputedStyle(inner1).zIndex, 'auto');
+  assert_equals(getComputedStyle(inner2).zIndex, '1');
+}, 'Nesting-selector in the scope\'s <stylesheet>');
+</script>