first-child-last-child.html (2019B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Selectors Invalidation: :first-child :last-child</title> 6 <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-first-child-pseudo"> 7 <meta name="assert" content="This tests that the :first-child and :last-child selectors are effective"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <style> 11 div { 12 color: black; 13 } 14 span:first-child { 15 color: blue; 16 } 17 span:last-child { 18 color: red; 19 } 20 </style> 21 </head> 22 <body> 23 <div id="target"><span>first-initially</span><span>last-initially</span></div> 24 <script> 25 26 'use strict'; 27 const black = 'rgb(0, 0, 0)'; 28 const blue = 'rgb(0, 0, 255)'; 29 const red = 'rgb(255, 0, 0)'; 30 31 test(() => { 32 const target = document.querySelector('#target'); 33 const first = target.firstChild; 34 assert_equals(getComputedStyle(first).color, blue); 35 target.insertAdjacentHTML('afterbegin', '\n<span>foo</span><span>bar</span>'); 36 assert_equals(getComputedStyle(target.firstElementChild).color, blue); 37 assert_equals(getComputedStyle(first).color, black); 38 while (target.firstElementChild !== first) 39 target.removeChild(target.firstElementChild); 40 assert_equals(getComputedStyle(first).color, blue); 41 }, 'Adding multiple nodes at once should invalidate :first-child correctly.'); 42 43 test(() => { 44 const target = document.querySelector('#target'); 45 const last = target.lastChild; 46 assert_equals(getComputedStyle(last).color, red); 47 target.insertAdjacentHTML('beforeend', '\n<span>foo</span><span>bar</span>'); 48 assert_equals(getComputedStyle(target.lastChild).color, red); 49 assert_equals(getComputedStyle(last).color, black); 50 while (target.lastChild !== last) 51 target.removeChild(target.lastChild); 52 assert_equals(getComputedStyle(last).color, red); 53 }, 'Adding multiple nodes at once should invalidate :last-child correctly.'); 54 55 </script> 56 </body> 57 </html>