anchor-transition-attr.tentative.html (1420B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: Transition when the anchor attribute changes</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/"> 4 <link rel="help" href="https://github.com/whatwg/html/pull/9144"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 #cb { 9 display: inline-block; 10 position: relative; 11 width: 250px; 12 height: 250px; 13 border: 1px solid black; 14 } 15 #anchor1, #anchor2 { 16 width: 100px; 17 } 18 #anchor1 { 19 background: wheat; 20 height: 50px; 21 } 22 #anchor2 { 23 background: tomato; 24 height: 90px; 25 } 26 #anchored { 27 position: absolute; 28 position-anchor: auto; 29 width: anchor-size(width); 30 height: anchor-size(height); 31 top: anchor(top); 32 left: anchor(right); 33 transition-duration: 1000s; 34 transition-timing-function: steps(2, start); 35 transition-property: top, height; 36 background-color: skyblue; 37 } 38 </style> 39 <div id=cb> 40 <div id=anchor1>Anchor1</div> 41 <div id=anchor2>Anchor2</div> 42 <div id=anchored anchor=anchor1></div> 43 </div> 44 <script> 45 test(() => { 46 assert_equals(anchored.offsetTop, 0); 47 assert_equals(anchored.offsetHeight, 50); 48 anchored.setAttribute('anchor', 'anchor2'); 49 assert_equals(anchored.offsetTop, 25); 50 assert_equals(anchored.offsetHeight, 70); 51 }, 'Transition when the anchor attribute changes'); 52 </script>