anchored-transition-display-none-002.html (1643B)
1 <!DOCTYPE html> 2 3 <html class="reftest-wait"> 4 5 <title>When anchor-positioned elements transition from display: block to none, it should keep its position until transition end</title> 6 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1"> 7 <link rel="author" href="mailto:kiet.ho@apple.com"> 8 <link rel="match" href="anchored-transition-display-none-002-ref.html"> 9 <script src="/common/reftest-wait.js"></script> 10 <script src="/common/rendering-utils.js"></script> 11 12 <style> 13 #containing-block { 14 width: 300px; 15 height: 300px; 16 position: relative; 17 outline: 1px black solid; 18 } 19 20 #anchor { 21 width: 100px; 22 height: 100px; 23 position: absolute; 24 top: 100px; 25 left: 0px; 26 background: cyan; 27 anchor-name: --anchor; 28 } 29 30 .anchored { 31 position: absolute; 32 width: 100px; 33 height: 100px; 34 transition: display 99999s allow-discrete; 35 } 36 37 #anchored-anchor-function { 38 top: anchor(--anchor bottom); 39 left: anchor(--anchor right); 40 background: green; 41 } 42 43 #anchored-position-area { 44 position-anchor: --anchor; 45 position-area: top right; 46 background: blue; 47 } 48 </style> 49 50 <body onload="onLoad()"> 51 <div id="containing-block"> 52 <div id="anchor"></div> 53 <div class="anchored" id="anchored-anchor-function"></div> 54 <div class="anchored" id="anchored-position-area"></div> 55 </div> 56 57 <script> 58 function onLoad() { 59 document.getElementById("anchored-anchor-function").style.display = "none"; 60 document.getElementById("anchored-position-area").style.display = "none"; 61 62 waitForAtLeastOneFrame().then(takeScreenshot); 63 } 64 </script> 65 </body> 66 67 </html>