anchor-size-animation.html (1075B)
1 <!DOCTYPE html> 2 <title>Tests CSS animation of anchor-size()</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 width: 200px; 26 } 27 #anchored { 28 width: 50px; 29 height: 50px; 30 background: skyblue; 31 animation: --anim 9999s steps(2, start); 32 position: absolute; 33 } 34 @keyframes --anim { 35 from { width: anchor-size(--a1 width); } 36 to { width: anchor-size(--a2 width); } 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.offsetWidth, 150); 47 }, 'Animation with anchor-size()'); 48 </script>