heading.html (1933B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>:heading and :heading() pseudo-classes</title> 4 <link rel="help" href="https://drafts.csswg.org/selectors-5/#headings"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <h1 data-expect-match="1"></h1> 9 <h2 data-expect-match="2"></h2> 10 <h3 data-expect-match="3"></h3> 11 <h4 data-expect-match="4"></h4> 12 <h5 data-expect-match="5"></h5> 13 <h6 data-expect-match="6"></h6> 14 <h7 data-expect-match=""></h7> 15 <h8 data-expect-match=""></h8> 16 <h9 data-expect-match=""></h9> 17 <h0 data-expect-match=""></h0> 18 <h1 data-expect-match="1" aria-level="2"></h1> 19 <section><h1 data-expect-match="1"></h1></section> 20 <hgroup data-expect-match=""></hgroup> 21 <p role="heading" aria-level="1" data-expect-match=""></p> 22 23 <script> 24 const els = document.querySelectorAll('[data-expect-match]'); 25 const tests = [ 26 {args: ['1'], match: [1]}, 27 {args: ['2'], match: [2]}, 28 {args: ['3'], match: [3]}, 29 {args: ['4'], match: [4]}, 30 {args: ['5'], match: [5]}, 31 {args: ['6'], match: [6]}, 32 {args: ['7'], match: []}, 33 {args: ['8'], match: []}, 34 {args: ['9'], match: []}, 35 {args: ['0'], match: []}, 36 {args: ['0', '1', '2'], match: [1, 2]}, 37 {args: ['6', '7'], match: [6]}, 38 ]; 39 for (const el of els) { 40 const testName = el.outerHTML + (el.parentNode === document.body ? '' : ' in ' + el.parentNode.localName); 41 42 test(() => { 43 const matches = el.matches(':heading'); 44 const shouldMatch = el.dataset.expectMatch !== ""; 45 assert_equals(matches, shouldMatch); 46 }, testName + ' :heading'); 47 48 for (const t of tests) { 49 const selector = `:heading(${t.args.join(', ')})`; 50 test(() => { 51 const matches = el.matches(selector); 52 const expectMatchLevel = parseInt(el.dataset.expectMatch, 10); 53 const shouldMatch = t.match.includes(expectMatchLevel); 54 assert_equals(matches, shouldMatch, selector); 55 }, testName + ' ' + selector); 56 } 57 } 58 </script>