anchor-animation-iacvt.html (884B)
1 <!DOCTYPE html> 2 <title>Tests CSS animation of anchor(), IACVT behavior</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 #anchored { 14 width: 50px; 15 height: 50px; 16 background: skyblue; 17 animation: --anim 9999s linear; 18 position: absolute; 19 top: 42px; /* This should be overwritten by the anim. effect value. */ 20 } 21 @keyframes --anim { 22 from { top: anchor(--unknown top); } 23 to { top: anchor(--unknown bottom); } 24 } 25 </style> 26 <div id=cb> 27 <div id=anchored></div> 28 </div> 29 <script> 30 test(() => { 31 assert_equals(anchored.offsetTop, 0); // auto 32 }, 'Animation of invalid anchor() with no fallback'); 33 </script>