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