insert-sibling-002.html (1357B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Selectors Invalidation: insert adjacent sibling of parent</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 .d { background-color: blue; } 11 12 .a + .c > .d { background-color: green; } 13 </style> 14 </head> 15 <body> 16 <div> 17 <div id="first" class="a"></div> 18 <div class="c"> 19 <div id="target" class="d"></div> 20 </div> 21 </div> 22 <script> 23 'use strict'; 24 const green = 'rgb(0, 128, 0)'; 25 const blue = 'rgb(0, 0, 255)'; 26 27 test(function() { 28 const first = document.getElementById('first'); 29 const target = document.getElementById('target'); 30 const parent = first.parentElement; 31 assert_equals(getComputedStyle(target).backgroundColor, green, "initial color"); 32 33 parent.removeChild(first); 34 assert_equals(getComputedStyle(target).backgroundColor, blue, "color after removal"); 35 36 parent.insertBefore(first, parent.firstChild); 37 assert_equals(getComputedStyle(target).backgroundColor, green, "color after insert") 38 }, "Remove/Insert adjacent sibling of parent"); 39 </script> 40 </body> 41 </html>