sibling-index-keyframe-transform-dynamic.html (961B)
1 <!DOCTYPE html> 2 <title>CSS Values and Units Test: sibling-index() changing transform 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 transform: translateX(calc(10px * sibling-index())); 10 } 11 to { 12 transform: none; 13 } 14 } 15 #target { 16 animation: --anim 1000s step-end; 17 } 18 </style> 19 <div> 20 <div id="rm"></div> 21 <div></div> 22 <div id="target"></div> 23 </div> 24 <script> 25 test(() => { 26 assert_equals(getComputedStyle(target).transform, "matrix(1, 0, 0, 1, 30, 0)"); 27 }, "Initially, the sibling-index() is 3 for #target"); 28 29 test(() => { 30 rm.remove(); 31 assert_equals(getComputedStyle(target).transform, "matrix(1, 0, 0, 1, 20, 0)"); 32 }, "Removing a preceding sibling of #target reduces the sibling-index()"); 33 34 </script>