anchor-transition-name.html (1530B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: Transition when the dereferenced anchor name changes</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/"> 4 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9598"> 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 .anchor-name { 27 anchor-name: --a; 28 } 29 #anchored { 30 position: absolute; 31 width: anchor-size(width); 32 height: anchor-size(height); 33 position-anchor: --a; 34 top: anchor(top); 35 left: anchor(right); 36 transition-duration: 1000s; 37 transition-timing-function: steps(2, start); 38 transition-property: top, height; 39 background-color: skyblue; 40 } 41 </style> 42 <div id=cb> 43 <div id=anchor1 class=anchor-name>Anchor1</div> 44 <div id=anchor2>Anchor2</div> 45 <div id=anchored></div> 46 </div> 47 <script> 48 test(() => { 49 assert_equals(anchored.offsetTop, 0); 50 assert_equals(anchored.offsetHeight, 50); 51 anchor1.classList.toggle('anchor-name'); 52 anchor2.classList.toggle('anchor-name'); 53 assert_equals(anchored.offsetTop, 25); 54 assert_equals(anchored.offsetHeight, 70); 55 }, 'Transition when the dereferenced anchor name changes'); 56 </script>