anchor-loop-crash.html (1487B)
1 <!DOCTYPE html> 2 <html reftest-async-scroll> 3 <style> 4 .container { 5 position: absolute; 6 left: 0; 7 top: 0; 8 } 9 .scroller { 10 position: absolute; 11 overflow: auto; 12 scrollbar-width: none; 13 width: 150px; 14 height: 100px; 15 } 16 .spacer { 17 width: 1px; 18 height: 500px; 19 } 20 .anchor1 { 21 width: 50px; 22 height: 50px; 23 background: blue; 24 anchor-name: --my-anchor1; 25 position: absolute; 26 position-anchor: --my-anchor2; 27 position-visibility: always; 28 left: anchor(right); 29 top: anchor(bottom); 30 } 31 .anchor2 { 32 width: 50px; 33 height: 50px; 34 background: pink; 35 anchor-name: --my-anchor2; 36 position: absolute; 37 position-anchor: --my-anchor3; 38 position-visibility: always; 39 left: anchor(right); 40 top: anchor(bottom); 41 } 42 .anchored { 43 position: absolute; 44 position-anchor: --my-anchor1; 45 position-visibility: always; 46 width: 50px; 47 height: 50px; 48 background: yellow; 49 left: anchor(right); 50 top: anchor(bottom); 51 anchor-name: --my-anchor3; 52 } 53 </style> 54 <div class="container"> 55 <div class="scroller" 56 reftest-displayport-x="0" reftest-displayport-y="0" 57 reftest-displayport-w="150" reftest-displayport-h="500"> 58 <div class="scroller" 59 reftest-displayport-x="0" reftest-displayport-y="0" 60 reftest-displayport-w="150" reftest-displayport-h="500" 61 reftest-async-scroll-y="50"> 62 <div class="anchor2"></div> 63 <div class="spacer"></div> 64 </div> 65 <div class="anchor1"></div> 66 <div class="spacer"></div> 67 </div> 68 <div class="anchored"></div> 69 </div> 70 </html>