chrome-445458885-crash.html (1050B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://crbug.com/445458885"> 3 <style> 4 #scroll-container { 5 overflow: hidden scroll; 6 width: 300px; 7 height: 100px; 8 } 9 10 #anchor1 { 11 anchor-name: --a1; 12 width: 100px; 13 height: 100px; 14 background: orange; 15 } 16 17 #anchor2 { 18 anchor-name: --a2; 19 width: 100px; 20 height: 50px; 21 background: yellow; 22 } 23 24 .spacer { 25 height: 100px; 26 } 27 28 .anchored { 29 position-visibility: anchors-visible; 30 position-area: bottom; 31 width: 100px; 32 height: 50px; 33 background: red; 34 position: absolute; 35 top: 0; 36 left: 0; 37 } 38 39 #chained { 40 position-anchor: --a1; 41 } 42 43 #target { 44 position-anchor: --a2; 45 } 46 </style> 47 48 <div id="scroll-container"> 49 <div id="anchor1">anchor1</div> 50 <div class="spacer"></div> 51 <div id="chained" class="anchored"> 52 <div id="anchor2">chained</div> 53 </div> 54 <div id="target" class="anchored">target</div> 55 </div> 56 <script> 57 requestAnimationFrame(() => { 58 document.getElementById('target').style.display = 'none'; 59 }); 60 </script>