sibling-function-invalidation.html (1144B)
1 <!DOCTYPE html> 2 <title>CSS Values and Units Test: Invalidation for sibling-index() and sibling-count()</title> 3 <link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 #t1 { 8 width: calc(10px * sibling-index()); 9 height: 50px; 10 background: teal; 11 } 12 </style> 13 <div> 14 <div id="rm1"></div> 15 <div></div> 16 <div></div> 17 <div></div> 18 <div></div> 19 <div id="t1"></div> 20 </div> 21 <script> 22 test(() => assert_equals(t1.offsetWidth, 60), "Initially 6th sibling"); 23 test(() => { 24 rm1.remove(); 25 assert_equals(t1.offsetWidth, 50); 26 }, "5th sibling after removal"); 27 </script> 28 29 <style> 30 #t2 { 31 width: 50px; 32 height: calc(10px * sibling-count()); 33 background: teal; 34 } 35 </style> 36 <div> 37 <div id="t2"></div> 38 <div></div> 39 <div></div> 40 <div></div> 41 <div></div> 42 <div id="rm2"></div> 43 </div> 44 <script> 45 test(() => assert_equals(t2.offsetHeight, 60), "Initially 6 siblings"); 46 test(() => { 47 rm2.remove(); 48 assert_equals(t2.offsetHeight, 50); 49 }, "5 siblings after removal"); 50 </script>