[@scope] Add WPT for nth-child invalidation in @scope
Bug: 1450473
Change-Id: I20785a1e5a3840b4a407a3bcdd226a6f4fef410e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4778618
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1183557}
diff --git a/css/css-cascade/scope-invalidation.html b/css/css-cascade/scope-invalidation.html
index b8b82c4..d53257e 100644
--- a/css/css-cascade/scope-invalidation.html
+++ b/css/css-cascade/scope-invalidation.html
@@ -625,3 +625,158 @@
assert_not_green(inner_a);
}, ':not(scope) in limit ancestor');
</script>
+
+<template>
+ <style>
+ @scope (:nth-child(2n of .a)) {
+ :scope { background-color: green; }
+ }
+ </style>
+ <div id=wrapper>
+ <div class=a></div>
+ <div></div>
+ <div class=a></div>
+ <div></div>
+ <div class=a></div>
+ <div></div>
+ <div class=a></div>
+ <div></div>
+ </div>
+</template>
+<script>
+test_scope_invalidation(document.currentScript, () => {
+ let e = main.querySelectorAll('#wrapper > div');
+ assert_equals(e.length, 8);
+
+ // <div class=a></div>
+ // <div></div>
+ // <div class=a></div>
+ // <div></div>
+ // <div class=a></div>
+ // <div></div>
+ // <div class=a></div>
+ // <div></div>
+ assert_not_green(e[0]);
+ assert_not_green(e[1]);
+ assert_green(e[2]);
+ assert_not_green(e[3]);
+ assert_not_green(e[4]);
+ assert_not_green(e[5]);
+ assert_green(e[6]);
+ assert_not_green(e[7]);
+
+ e[1].classList.add('a');
+ // <div class=a></div>
+ // <div class=a></div>
+ // <div class=a></div>
+ // <div></div>
+ // <div class=a></div>
+ // <div></div>
+ // <div class=a></div>
+ // <div></div>
+ assert_not_green(e[0]);
+ assert_green(e[1]);
+ assert_not_green(e[2]);
+ assert_not_green(e[3]);
+ assert_green(e[4]);
+ assert_not_green(e[5]);
+ assert_not_green(e[6]);
+ assert_not_green(e[7]);
+
+ e[1].classList.remove('a');
+ // <div class=a></div>
+ // <div></div>
+ // <div class=a></div>
+ // <div></div>
+ // <div class=a></div>
+ // <div></div>
+ // <div class=a></div>
+ // <div></div>
+ assert_not_green(e[0]);
+ assert_not_green(e[1]);
+ assert_green(e[2]);
+ assert_not_green(e[3]);
+ assert_not_green(e[4]);
+ assert_not_green(e[5]);
+ assert_green(e[6]);
+ assert_not_green(e[7]);
+}, ':nth-child() in scope root');
+</script>
+
+<template>
+ <style>
+ @scope (#wrapper) to (:nth-child(4n of .a)) {
+ div { background-color: green; }
+ }
+ </style>
+ <div id=wrapper>
+ <div class=a></div>
+ <div></div>
+ <div class=a></div>
+ <div></div>
+ <div class=a></div>
+ <div></div>
+ <div class=a></div>
+ <div></div>
+ </div>
+</template>
+<script>
+test_scope_invalidation(document.currentScript, () => {
+ let e = main.querySelectorAll('#wrapper > div');
+ assert_equals(e.length, 8);
+
+ // <div class=a></div>
+ // <div></div>
+ // <div class=a></div>
+ // <div></div>
+ // <div class=a></div>
+ // <div></div>
+ // <div class=a></div> <= limit
+ // <div></div>
+ assert_green(e[0]);
+ assert_green(e[1]);
+ assert_green(e[2]);
+ assert_green(e[3]);
+ assert_green(e[4]);
+ assert_green(e[5]);
+ assert_not_green(e[6]);
+ assert_green(e[7]);
+
+ e[1].classList.add('a');
+ // <div class=a></div>
+ // <div class=a></div>
+ // <div class=a></div>
+ // <div></div>
+ // <div class=a></div> <= limit
+ // <div></div>
+ // <div class=a></div>
+ // <div></div>
+ assert_green(e[0]);
+ assert_green(e[1]);
+ assert_green(e[2]);
+ assert_green(e[3]);
+ assert_not_green(e[4]);
+ assert_green(e[5]);
+ assert_green(e[6]);
+ assert_green(e[7]);
+
+ e[1].classList.remove('a');
+ // <div class=a></div>
+ // <div></div>
+ // <div class=a></div>
+ // <div></div>
+ // <div class=a></div>
+ // <div></div>
+ // <div class=a></div> <= limit
+ // <div></div>
+ assert_green(e[0]);
+ assert_green(e[1]);
+ assert_green(e[2]);
+ assert_green(e[3]);
+ assert_green(e[4]);
+ assert_green(e[5]);
+ assert_not_green(e[6]);
+ assert_green(e[7]);
+}, ':nth-child() in scope limit');
+
+</script>
