1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>Matches :has pseudo class to uninserted elements</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">
<script>
// Test that |selector| returns matching status.
function test_matches(node, selector, expected) {
test(function() {
assert_equals(node.matches(selector), expected);
}, `${selector} matches expectedly`);
}
subject = document.createElement('subject');
subject.innerHTML = '<child></child>';
test_matches(subject, ':has(child)', true);
test_matches(subject, ':has(> child)', true);
subject.innerHTML = '<child><descendant></descendant></child>';
test_matches(subject, ':has(descendant)', true);
test_matches(subject, ':has(> descendant)', false);
subject.innerHTML = '<child></child><direct_sibling></direct_sibling><indirect_sibling></indirect_sibling>';
test_matches(subject.firstChild, ':has(~ direct_sibling)', true);
test_matches(subject.firstChild, ':has(+ direct_sibling)', true);
test_matches(subject.firstChild, ':has(~ indirect_sibling)', true);
test_matches(subject.firstChild, ':has(+ indirect_sibling)', false);
test_matches(subject, ':has(*)', true);
test_matches(subject, ':has(> *)', true);
test_matches(subject, ':has(~ *)', false);
test_matches(subject, ':has(+ *)', false);
</script>
|
