anchor-scroll-update-010-ref.html (885B)
1 <!DOCTYPE html> 2 <title>Anchored element should update when the nearest scroll container under `contain: layout size` element changes.</title> 3 <style> 4 .anchor { 5 width: 20px; 6 height: 20px; 7 background: magenta; 8 } 9 10 .positioned { 11 background: purple; 12 width: 20px; 13 height: 20px; 14 } 15 16 .flex { 17 display: flex; 18 } 19 20 .abs-cb { 21 position: relative; 22 width: 200px; 23 height: 200px; 24 border: 1px solid; 25 } 26 27 .scroll { 28 overflow: scroll; 29 } 30 31 .outer { 32 width: 200px; 33 height: 200px; 34 } 35 36 .inner { 37 width: 150px; 38 height: 150px; 39 } 40 41 .filler { 42 width: 1px; 43 height: 200px; 44 } 45 </style> 46 <div class=abs-cb> 47 <div id=outer class="scroll outer"> 48 <div class=filler></div> 49 <div class=flex> 50 <div class=anchor></div> 51 <div class=positioned></div> 52 </div> 53 <div class=inner> 54 <div class=anchor></div> 55 </div> 56 </div> 57 </div> 58 <script> 59 outer.scrollTop = 100; 60 </script>