sibling-index-keyframe-value-dynamic.html (1119B)
1 <!DOCTYPE html> 2 <title>CSS Values and Units Test: sibling-index() changing 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 z-index: sibling-index(); 10 } 11 to { 12 z-index: 1; 13 } 14 } 15 #target { 16 animation: --anim 1000s step-end; 17 position: relative; 18 width: 100px; 19 height: 100px; 20 background: red; 21 } 22 #abs { 23 position: absolute; 24 width: 100px; 25 height: 100px; 26 z-index: 3; 27 background: green; 28 } 29 </style> 30 <p>You should see a green square below.</p> 31 <div> 32 <div id="rm"></div> 33 <div id="abs"></div> 34 <div id="target"></div> 35 </div> 36 <script> 37 test(() => { 38 assert_equals(getComputedStyle(target).zIndex, "3"); 39 }, "Initially, the sibling-index() is 3 for #target"); 40 41 test(() => { 42 rm.remove(); 43 assert_equals(getComputedStyle(target).zIndex, "2"); 44 }, "Removing a preceding sibling of #target reduces the sibling-index()"); 45 46 </script>