diff options
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.html | 184 |
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> |