Bug 1848809 [wpt PR 41471] - [@scope] Prepend implicitly nested rule …

…with kScopeActivation, a=testonly

Automatic update from web-platform-tests
[@scope] Prepend implicitly nested rule with kScopeActivation

This CL fixes an issue when @scope is a nested group rule.

Consider the following example:

  .a {
    @scope (.b) {
      color: green;
    }
  }

We incorrectly inserted an implicit &-rule, making it
equivalent to:

  .a {
    @scope (.b) {
      & { color: green; }
    }
  }

When we should have inserted an implicit :scope-rule:

  .a {
    @scope (.b) {
      :scope { color: green; }
    }
  }

Since the implicit &-rule lacked a kScopeActivation, the rule would
never match.

Fixed: 1456435
Change-Id: I885dbb2e2588e3f2421b5bb3cf4f31376443f2ff
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4780629
Commit-Queue: Anders Hartvoll Ruud <[email protected]>
Reviewed-by: Rune Lillesveen <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1184675}

--

wpt-commits: 307933840daac547b86c7d6ed2eb7b06c658c82e
wpt-pr: 41471

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

@@ -334,3 +334,40 @@
   assert_equals(getComputedStyle(c).zIndex, 'auto');
 }, 'Implicit rule within nested @scope ');
 </script>
+
+<template id=test_direct_declarations_in_nested_scope_proximity>
+  <div>
+    <style>
+      .a {
+        /* We're supposed to prepend :scope to this declaration. If we do that,
+           then :where() does not matter, since :scope does not gain any
+           specificity from the enclosing @scope rule. However, if an
+           implementation incorrectly prepends & instead, then :where() is
+           needed to avoid the test incorrectly passing due to specificity. */
+        @scope (:where(&) .b) {
+          z-index: 1; /* Should win due to proximity */
+        }
+      }
+      .b { z-index: 2; }
+    </style>
+    <div class=a>
+      <div class="b x">
+        <div class=c>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+test((t) => {
+  t.add_cleanup(() => main.replaceChildren());
+  main.append(test_direct_declarations_in_nested_scope_proximity.content.cloneNode(true));
+
+  let a = document.querySelector('.a');
+  let b = document.querySelector('.b');
+  let c = document.querySelector('.c');
+  assert_equals(getComputedStyle(a).zIndex, 'auto');
+  assert_equals(getComputedStyle(b).zIndex, '1');
+  assert_equals(getComputedStyle(c).zIndex, 'auto');
+}, 'Implicit rule within nested @scope (proximity)');
+</script>