has-invalidation-first-in-sibling-chain.html (2312B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Selector Invalidation: Invalidate :has() as a result of first DOM element mutation in sibling chain</title> 4 <link rel="author" title="David Shin" href="mailto:dshin@mozilla.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 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1974022"> 9 <style> 10 div, main { color: grey } 11 #subject1:has(.item ~ .item + .item) { color: red; } 12 #subject2:has(.item + .item + .item) { color: orangered; } 13 #subject3:has(.item .item ~ .item + .item) { color: green; } 14 #subject4:has(.item .item + .item + .item) { color: lightgreen; } 15 </style> 16 17 <main id=main> 18 <div id=subject1> 19 <div class=item></div> 20 <div class=item></div> 21 </div> 22 <div id=subject2> 23 <div class=item></div> 24 <div class=item></div> 25 </div> 26 <div id=subject3> 27 <div class=item> 28 <div class=item></div> 29 <div class=item></div> 30 </div> 31 </div> 32 <div id=subject4> 33 <div class=item> 34 <div class=item></div> 35 <div class=item></div> 36 </div> 37 </div> 38 </main> 39 40 <script> 41 const grey = 'rgb(128, 128, 128)'; 42 const red = 'rgb(255, 0, 0)'; 43 const orangered = 'rgb(255, 69, 0)'; 44 const green = 'rgb(0, 128, 0)'; 45 const lightgreen = 'rgb(144, 238, 144)'; 46 47 function newItem() { 48 const d = document.createElement('div'); 49 d.classList.add('item'); 50 return d; 51 } 52 53 function testColors(test_name, subject, subject_color) { 54 test(function() { 55 assert_equals(getComputedStyle(subject).color, subject_color); 56 }, test_name); 57 } 58 59 const tests = [ 60 { subject: subject1, prependAt: subject1, color: red }, 61 { subject: subject2, prependAt: subject2, color: orangered }, 62 { subject: subject3, prependAt: subject3.firstElementChild, color: green }, 63 { subject: subject4, prependAt: subject4.firstElementChild, color: lightgreen }, 64 ] 65 66 67 for (t of tests) { 68 const id = t.subject.id; 69 testColors(`${id} Initial color`, t.subject, grey); 70 const item = newItem(); 71 t.prependAt.prepend(item); 72 testColors(`#${id} invalidated after adding first sibling`, t.subject, t.color); 73 item.remove(); 74 testColors(`#${id} invalidated after removing first sibling`, t.subject, grey); 75 } 76 </script>