anchor-animation-dynamic-name.html (1162B)
1 <!DOCTYPE html> 2 <title>Tests CSS animation of anchor(), dynamic anchor-name changes</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 #cb { 8 border: 1px solid black; 9 width: 400px; 10 height: 400px; 11 position: relative; 12 } 13 #a1, #a2 { 14 width: 100px; 15 height: 100px; 16 } 17 #a1 { 18 background: tomato; 19 } 20 #a2 { 21 background: seagreen; 22 } 23 .anchor { anchor-name: --a; } 24 #anchored { 25 width: 50px; 26 height: 50px; 27 background: skyblue; 28 animation: --anim 1s steps(2, start); 29 position: absolute; 30 position-anchor: --a; 31 } 32 @keyframes --anim { 33 from { top: anchor(top); } 34 to { top: anchor(bottom); } 35 } 36 </style> 37 <div id=cb> 38 <div id=a1 class=anchor></div> 39 <div id=a2></div> 40 <div id=anchored></div> 41 </div> 42 <script> 43 test(() => { 44 assert_equals(anchored.offsetTop, 50); 45 a1.classList.toggle('anchor'); 46 a2.classList.toggle('anchor'); 47 assert_equals(anchored.offsetTop, 150); 48 }, 'Animation with anchor() responds to anchor-name change'); 49 </script>