anchor-animation-dynamic-default.html (1202B)
1 <!DOCTYPE html> 2 <title>Tests CSS animation of anchor(), dynamic position-anchor 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 #anchor1, #anchor2 { 14 width: 100px; 15 height: 100px; 16 background: tomato; 17 } 18 #anchor1 { 19 background: coral; 20 anchor-name: --a1; 21 } 22 #anchor2 { 23 background: seagreen; 24 anchor-name: --a2; 25 } 26 #anchored { 27 width: 50px; 28 height: 50px; 29 background: skyblue; 30 animation: --anim 9999s steps(2, start); 31 position: absolute; 32 position-anchor: --a1; 33 } 34 @keyframes --anim { 35 from { top: anchor(top); } 36 to { top: anchor(bottom); } 37 } 38 </style> 39 <div id=cb> 40 <div id=anchor1></div> 41 <div id=anchor2></div> 42 <div id=anchored></div> 43 </div> 44 <script> 45 test(() => { 46 assert_equals(anchored.offsetTop, 50); 47 anchored.style.positionAnchor = '--a2'; 48 assert_equals(anchored.offsetTop, 150); 49 }, 'Animation with anchor() responds to position-anchor change'); 50 </script>