summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/selectors/has-relative-argument.html
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/selectors/has-relative-argument.html')
-rw-r--r--testing/web-platform/tests/css/selectors/has-relative-argument.html184
1 files changed, 184 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/selectors/has-relative-argument.html b/testing/web-platform/tests/css/selectors/has-relative-argument.html
new file mode 100644
index 0000000000..aad7436884
--- /dev/null
+++ b/testing/web-platform/tests/css/selectors/has-relative-argument.html
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>:has pseudo class behavior with various relative arguments</title>
+<link rel="author" title="Byungwoo Lee" href="mailto:blee@igalia.com">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
+
+<main id=main>
+ <div id=d01>
+ <div id=d02 class="x">
+ <div id=d03 class="a"></div>
+ <div id=d04></div>
+ <div id=d05 class="b"></div>
+ </div>
+ <div id=d06 class="x">
+ <div id=d07 class="x">
+ <div id=d08 class="a"></div>
+ </div>
+ </div>
+ <div id=d09 class="x">
+ <div id=d10 class="a">
+ <div id=d11 class="b"></div>
+ </div>
+ </div>
+ <div id=d12 class="x">
+ <div id=d13 class="a">
+ <div id=d14>
+ <div id=d15 class="b"></div>
+ </div>
+ </div>
+ <div id=d16 class="b"></div>
+ </div>
+ </div>
+ <div id=d17>
+ <div id=d18 class="x"></div>
+ <div id=d19 class="x"></div>
+ <div id=d20 class="a"></div>
+ <div id=d21 class="x"></div>
+ <div id=d22 class="a">
+ <div id=d23 class="b"></div>
+ </div>
+ <div id=d24 class="x"></div>
+ <div id=d25 class="a">
+ <div id=d26>
+ <div id=d27 class="b"></div>
+ </div>
+ </div>
+ <div id=d28 class="x"></div>
+ <div id=d29 class="a"></div>
+ <div id=d30 class="b">
+ <div id=d31 class="c"></div>
+ </div>
+ <div id=d32 class="x"></div>
+ <div id=d33 class="a"></div>
+ <div id=d34 class="b">
+ <div id=d35>
+ <div id=d36 class="c"></div>
+ </div>
+ </div>
+ <div id=d37 class="x"></div>
+ <div id=d38 class="a"></div>
+ <div id=d39 class="b"></div>
+ <div id=d40 class="x"></div>
+ <div id=d41 class="a"></div>
+ <div id=d42></div>
+ <div id=d43 class="b">
+ <div id=d44 class="x">
+ <div id=d45 class="c"></div>
+ </div>
+ </div>
+ <div id=d46 class="x"></div>
+ <div id=d47 class="a">
+ </div>
+ </div>
+ <div>
+ <div id=d48 class="x">
+ <div id=d49 class="x">
+ <div id=d50 class="x d">
+ <div id=d51 class="x d">
+ <div id=d52 class="x">
+ <div id=d53 class="x e">
+ <div id=d54 class="f"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div id=d55 class="x"></div>
+ <div id=d56 class="x d"></div>
+ <div id=d57 class="x d"></div>
+ <div id=d58 class="x"></div>
+ <div id=d59 class="x e"></div>
+ <div id=d60 class="f"></div>
+ </div>
+ <div>
+ <div id=d61 class="x"></div>
+ <div id=d62 class="x y"></div>
+ <div id=d63 class="x y">
+ <div id=d64 class="y g">
+ <div id=d65 class="y">
+ <div id=d66 class="y h">
+ <div id=d67 class="i"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div id=d68 class="x y">
+ <div id=d69 class="x"></div>
+ <div id=d70 class="x"></div>
+ <div id=d71 class="x y">
+ <div id=d72 class="y g">
+ <div id=d73 class="y">
+ <div id=d74 class="y h">
+ <div id=d75 class="i"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div id=d76 class="x"></div>
+ <div id=d77 class="j"><div id=d78><div id=d79></div></div></div>
+ </div>
+ <div id=d80 class="j"></div>
+ </div>
+</main>
+
+<script>
+ function formatElements(elements) {
+ return elements.map(e => e.id).sort().join();
+ }
+
+ // Test that |selector| returns the given elements in #main.
+ function test_selector_all(selector, expected) {
+ test(function() {
+ let actual = Array.from(main.querySelectorAll(selector));
+ assert_equals(formatElements(actual), formatElements(expected));
+ }, `${selector} matches expected elements`);
+ }
+
+ test_selector_all('.x:has(.a)', [d02, d06, d07, d09, d12]);
+ test_selector_all('.x:has(.a > .b)', [d09]);
+ test_selector_all('.x:has(.a .b)', [d09, d12]);
+ test_selector_all('.x:has(.a + .b)', [d12]);
+ test_selector_all('.x:has(.a ~ .b)', [d02, d12]);
+
+ test_selector_all('.x:has(> .a)', [d02, d07, d09, d12]);
+ test_selector_all('.x:has(> .a > .b)', [d09]);
+ test_selector_all('.x:has(> .a .b)', [d09, d12]);
+ test_selector_all('.x:has(> .a + .b)', [d12]);
+ test_selector_all('.x:has(> .a ~ .b)', [d02, d12]);
+
+ test_selector_all('.x:has(+ .a)', [d19, d21, d24, d28, d32, d37, d40, d46]);
+ test_selector_all('.x:has(+ .a > .b)', [d21]);
+ test_selector_all('.x:has(+ .a .b)', [d21, d24]);
+ test_selector_all('.x:has(+ .a + .b)', [d28, d32, d37]);
+ test_selector_all('.x:has(+ .a ~ .b)', [d19, d21, d24, d28, d32, d37, d40]);
+
+ test_selector_all('.x:has(~ .a)', [d18, d19, d21, d24, d28, d32, d37, d40, d46]);
+ test_selector_all('.x:has(~ .a > .b)', [d18, d19, d21]);
+ test_selector_all('.x:has(~ .a .b)', [d18, d19, d21, d24]);
+ test_selector_all('.x:has(~ .a + .b)', [d18, d19, d21, d24, d28, d32, d37]);
+ test_selector_all('.x:has(~ .a + .b > .c)', [d18, d19, d21, d24, d28]);
+ test_selector_all('.x:has(~ .a + .b .c)', [d18, d19, d21, d24, d28, d32]);
+
+ test_selector_all('.x:has(.d .e)', [d48, d49, d50]);
+ test_selector_all('.x:has(.d .e) .f', [d54]);
+ test_selector_all('.x:has(> .d)', [d49, d50]);
+ test_selector_all('.x:has(> .d) .f', [d54]);
+ test_selector_all('.x:has(~ .d ~ .e)', [d48, d55, d56]);
+ test_selector_all('.x:has(~ .d ~ .e) ~ .f', [d60]);
+ test_selector_all('.x:has(+ .d ~ .e)', [d55, d56]);
+ test_selector_all('.x:has(+ .d ~ .e) ~ .f', [d60]);
+
+ test_selector_all('.y:has(> .g .h)', [d63, d71])
+ test_selector_all('.y:has(.g .h)', [d63, d68, d71])
+ test_selector_all('.y:has(> .g .h) .i', [d67, d75])
+ test_selector_all('.y:has(.g .h) .i', [d67, d75])
+
+ test_selector_all('.d .x:has(.e)', [d51, d52])
+
+ test_selector_all('.d ~ .x:has(~ .e)', [d57, d58])
+
+</script>