[selectors] selector list with invalid selector #14442
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>CSS Selectors: selector list containing invalid selector</title> | ||
| <link rel="help" href="https://drafts.csswg.org/selectors-4/#grouping"> | ||
| <meta name="assert" content="If a selector is invalid, the entire selector list is invalid."> | ||
| <meta name="assert" content="Pseudo-elements are not valid within :is :not :where."> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <style> | ||
| .a, .b, .c { | ||
| color: lime; | ||
| } | ||
|
|
||
| .a, :nonsense { | ||
| color: red; | ||
| } | ||
|
|
||
| /* Pseudo-elements cannot be represented by the matches-any pseudo-class; they are not valid within :is(). */ | ||
| .b, :is(::before) { | ||
| color: red; | ||
| } | ||
| .b, :not(::before) { | ||
|
There was a problem hiding this comment. Sort of the same comment as https://github.com/web-platform-tests/wpt/pull/14442/files#r240427239, except that there's still ongoing discussion in that issue about how invalidation of |
||
| color: red; | ||
| } | ||
| .b, :where(::before) { | ||
|
There was a problem hiding this comment. |
||
| color: red; | ||
| } | ||
|
|
||
| .c:is(*, :nonsense) { | ||
|
There was a problem hiding this comment. Based on w3c/csswg-drafts#3264 (comment), this one should actually match. |
||
| color: red; | ||
| } | ||
| .c:not(*, :nonsense) { | ||
|
There was a problem hiding this comment. There's remaining discussion in w3c/csswg-drafts#3264 (comment) about what should happen to |
||
| color: red; | ||
| } | ||
| .c:where(*, :nonsense) { | ||
|
There was a problem hiding this comment. As for |
||
| color: red; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="a" class="a"> | ||
| </div> | ||
| <div id="b" class="b"> | ||
| </div> | ||
| <div id="c" class="c"> | ||
| </div> | ||
| <script> | ||
| const lime = "rgb(0, 255, 0)"; | ||
|
|
||
| test(() => { | ||
| assert_equals(getComputedStyle(a).color, lime); | ||
| }, "If a selector is invalid, the entire selector list is invalid."); | ||
|
|
||
| test(() => { | ||
| assert_equals(getComputedStyle(b).color, lime); | ||
| }, "Pseudo-elements are not valid within :is :not :where."); | ||
|
|
||
| test(() => { | ||
| assert_equals(getComputedStyle(c).color, lime); | ||
| }, "If a selector in :is :not :where is invalid, the entire selector is invalid."); | ||
| </script> | ||
| </body> | ||
| </html> | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As the edits for w3c/csswg-drafts#3264 (comment) haven't been done yet and the discussion is still ongoing, it's not entirely clear what should happen to
:is()with a single invalid argument. I would expect that the new invalidation rules would mean that since::beforeis not allowed in:is()it gets discarded, but that this merely cause that argument of:is()(in this case its only argument) to be discarded, and the:is()construct as a whole remains valid, even if it matches nothing. So the whole rule is not treated as a syntax error,.bmatches, and the element turns red. Which makes the test wrong.