Test for a nested :scope inside an :is()

[kizu]

Quoting the specs for :scope,

The :scope pseudo-class represents this scoping root […].

In the following code, there is a scoping root: the .a.

      @scope (.a) {
        .b {
          &:is(:scope.x *) {
            z-index: 1;
          }
      }

However, right now, in the Chromium implementation, when the :scope is mentioned inside nesting, does not “see” the wrapping @scope, and treats it as :root, according to

If there is no scoping root then :scope represents the root of the document (equivalent to :root).

However, this is only true if we'd take the inner &:is(:scope.x *) in isolation, but because it is, in fact, inside the @scope, it should detect the scoping root, as we can think of it as :scope .foo:is(:scope:hover *), which works (see it in action in the CodePen where I stumbled upon this: https://codepen.io/kizu/pen/NWoZYwK); I did also add it as an assertion.

This is not an abstract example, and having this case to work as in the test assertion will be very useful for authors. It could allow us to use this method to clarify the conditions over the root node from inside the nesting, similar to how @at-root works in Sass, or how root reference works in Stylus.

cc @mirisuzanne

Update: cross-linking a Chromium bug I filled about this: https://bugs.chromium.org/p/chromium/issues/detail?id=1512217

[mdubet]

To my understanding of the spec, the inner rule selector should be :is(:scope .b):is(:scope.x *) with :scope representing any .a elements of the page.

The test seems fine (albeit fairly complex to follow 😅), it looks like an implementation bug in Chromium (FWIW, it passes on WebKit main).