has-matches-to-uninserted-elements.html (1520B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Matches :has pseudo class to uninserted elements</title> 4 <link rel="author" title="Byungwoo Lee" href="mailto:blee@igalia.com"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <link rel="help" href="https://drafts.csswg.org/selectors/#relational"> 8 9 <script> 10 // Test that |selector| returns matching status. 11 function test_matches(node, selector, expected) { 12 test(function() { 13 assert_equals(node.matches(selector), expected); 14 }, `${selector} matches expectedly`); 15 } 16 17 subject = document.createElement('subject'); 18 19 subject.innerHTML = '<child></child>'; 20 test_matches(subject, ':has(child)', true); 21 test_matches(subject, ':has(> child)', true); 22 23 subject.innerHTML = '<child><descendant></descendant></child>'; 24 test_matches(subject, ':has(descendant)', true); 25 test_matches(subject, ':has(> descendant)', false); 26 27 subject.innerHTML = '<child></child><direct_sibling></direct_sibling><indirect_sibling></indirect_sibling>'; 28 test_matches(subject.firstChild, ':has(~ direct_sibling)', true); 29 test_matches(subject.firstChild, ':has(+ direct_sibling)', true); 30 test_matches(subject.firstChild, ':has(~ indirect_sibling)', true); 31 test_matches(subject.firstChild, ':has(+ indirect_sibling)', false); 32 33 test_matches(subject, ':has(*)', true); 34 test_matches(subject, ':has(> *)', true); 35 test_matches(subject, ':has(~ *)', false); 36 test_matches(subject, ':has(+ *)', false); 37 </script>