| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>CSS Selectors :first-of-type</title> |
| <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-first-of-type-pseudo"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <!-- |
| See also: |
| * of-type-selectors.html |
| * child-indexed-pseudo-class.html |
| * child-indexed-no-parent.html |
| --> |
| <body> |
| |
| <div> |
| <div id="target1">Whitespace nodes should be ignored.</div> |
| </div> |
| |
| <div> |
| <div id="target2">Thre is another child element of the same type.</div> |
| <div></div> |
| </div> |
| |
| <div> |
| <blockquote></blockquote> |
| <div id="target3">There is a prior child element of another type.</div> |
| </div> |
| |
| <div> |
| <div></div> |
| <blockquote> |
| <div id="target4">A previous element of the parent should not affect.</div> |
| </blockquote> |
| </div> |
| |
| <div> |
| <div> |
| <div id="target5">The parent element of the same type should not affect.</div> |
| </div> |
| </div> |
| |
| <div> |
| <blockquote> |
| <div></div> |
| </blockquote> |
| <div id="target6">A child of the previous element should not affect.</div> |
| </div> |
| |
| <div> |
| <div></div> |
| <div id="target7" data-expected="false">The second child element of the same |
| type should not match.</div> |
| </div> |
| |
| <div> |
| <DIV></DIV> |
| <div id="target8" data-expected="false">The second child element of the same |
| type should not match, the first child has case-different tag name.</div> |
| </div> |
| |
| <div> |
| <div id="insertBefore1"></div> |
| </div> |
| |
| <script> |
| for (let i = 1; i <= 8; ++i) { |
| let target = document.querySelector(`#target${i}`); |
| test(() => { |
| if (target.dataset.expected == 'false') |
| assert_false(target.matches('div:first-of-type')); |
| else |
| assert_true(target.matches('div:first-of-type')); |
| }, target.textContent.replaceAll('\n', ' ')); |
| } |
| |
| test(() => { |
| const ib1 = document.querySelector('#insertBefore1'); |
| const target = document.createElement('div'); |
| assert_true(ib1.matches('div:first-of-type')); |
| ib1.parentNode.insertBefore(target, ib1); |
| assert_true(target.matches('div:first-of-type')); |
| assert_false(ib1.matches('div:first-of-type')); |
| |
| target.remove(); |
| assert_true(ib1.matches('div:first-of-type')); |
| }, 'Dynamic insertion and removal'); |
| </script> |
| |