anchor-transition-002.html (1631B)
1 <!DOCTYPE html> 2 <title>Tests CSS transition of anchor() across tree scopes</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/8180"></script> 5 <link rel="author" href="mailto:xiaochengh@chromium.org"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <style> 10 body { 11 margin: 0; 12 } 13 14 #anchor1 { 15 width: 100px; 16 height: 100px; 17 background: orange; 18 anchor-name: --a; 19 } 20 21 #anchor2 { 22 width: 100px; 23 height: 100px; 24 margin-top: 200px; 25 margin-left: 300px; 26 background: orange; 27 } 28 29 #anchor2.after::part(target) { 30 top: anchor(--a top); 31 left: anchor(--a right); 32 } 33 </style> 34 35 <div id="anchor1"></div> 36 <div id="anchor2"></div> 37 38 <script> 39 setup(() => { 40 let shadow = anchor2.attachShadow({mode: 'open'}); 41 shadow.innerHTML = ` 42 <style> 43 :host { anchor-name: --a; } 44 #target { 45 position: fixed; 46 width: 100px; 47 height: 100px; 48 background: lime; 49 top: anchor(--a top); 50 left: anchor(--a right); 51 transition: all 10s -5s linear; 52 } 53 </style> 54 <div id="target" part="target"></div> 55 `; 56 }); 57 58 test(() => { 59 let target = anchor2.shadowRoot.getElementById('target'); 60 61 // Forces layout 62 target.offsetLeft; 63 64 // Triggers a transition from using #anchor2 to using #anchor1, 65 // starting immediately at 50% progress. 66 anchor2.classList.add('after'); 67 assert_equals(target.offsetLeft, 250); 68 assert_equals(target.offsetTop, 150); 69 }, 'Transition with anchor names defined in different tree scopes'); 70 </script>