sibling-index-keyframe-length-value-dynamic.html (950B)
1 <!DOCTYPE html> 2 <title>CSS Values and Units Test: sibling-index() changing length value during @keyframes animation</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 @keyframes --anim { 8 from { 9 top: calc(100px * sibling-index()); 10 } 11 to { 12 top: 0px; 13 } 14 } 15 #target { 16 animation: --anim 1000s step-end; 17 position: absolute; 18 top: 13px; 19 width: 100px; 20 height: 100px; 21 } 22 </style> 23 <div> 24 <div id="rm"></div> 25 <div id="target"></div> 26 </div> 27 <script> 28 test(() => { 29 assert_equals(getComputedStyle(target).top, "200px"); 30 }, "Initially, the sibling-index() is 2 for #target"); 31 32 test(() => { 33 rm.remove(); 34 assert_equals(getComputedStyle(target).top, "100px"); 35 }, "Removing a preceding sibling of #target reduces the sibling-index()"); 36 37 </script>