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