insert-sibling-003.html (1387B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Selectors Invalidation: insert sibling of ancestor</title> 5 <link rel="help" href="https://drafts.csswg.org/selectors-4/#adjacent-sibling-combinators"> 6 <meta name="assert" content="This tests that the + next-sibling selector is effective"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 .c * { background-color: blue; } 11 12 .a + * + .c * { background-color: green; } 13 </style> 14 </head> 15 <body> 16 <div> 17 <div id="first" class="a"></div> 18 <div></div> 19 <div class="c"> 20 <div> 21 <div id="target"></div> 22 </div> 23 </div> 24 </div> 25 <script> 26 'use strict'; 27 const green = 'rgb(0, 128, 0)'; 28 const blue = 'rgb(0, 0, 255)'; 29 30 test(function() { 31 const first = document.getElementById('first'); 32 const target = document.getElementById('target'); 33 const parent = first.parentElement; 34 assert_equals(getComputedStyle(target).backgroundColor, green, "initial color"); 35 36 parent.removeChild(first); 37 assert_equals(getComputedStyle(target).backgroundColor, blue, "color after removal"); 38 39 parent.insertBefore(first, parent.firstChild); 40 assert_equals(getComputedStyle(target).backgroundColor, green, "color after insert") 41 }, "Remove/Insert earlier sibling of ancestor"); 42 </script> 43 </body> 44 </html>