has-side-effect.html (1364B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Selector Invalidation: Invalidate :has() as result of insertion/removal</title> 4 <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> 5 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <link rel="help" href="https://drafts.csswg.org/selectors/#relational"> 9 <style> 10 div, main { color: grey } 11 #subject:has(+ #next_sibling) { color: red; } 12 #prev_sibling:has(+ #subject + #next_sibling) { color: green; } 13 </style> 14 15 <main id=main> 16 <div id=prev_sibling></div> 17 <div id=subject></div> 18 <div id=blocks_match></div> 19 <div id=next_sibling></div> 20 </main> 21 22 <script> 23 const grey = 'rgb(128, 128, 128)'; 24 const red = 'rgb(255, 0, 0)'; 25 const green = 'rgb(0, 128, 0)'; 26 27 function testColors(test_name, subject_color, prev_sibling_color) { 28 test(function() { 29 assert_equals(getComputedStyle(subject).color, subject_color); 30 assert_equals(getComputedStyle(prev_sibling).color, prev_sibling_color); 31 }, test_name); 32 } 33 34 testColors('Initial colors', grey, grey); 35 36 const d = blocks_match; 37 d.remove(); 38 39 testColors('Matches after #blocks_match removed', red, green); 40 subject.after(d); 41 42 testColors('Does not match after #blocks_match added', grey, grey); 43 </script>