anchor-scroll-chained-001.html (991B)
1 <!DOCTYPE html> 2 <title>Tests scroll adjustments of element anchored to another anchored element</title> 3 <link rel="author" href="mailto:wangxianzhu@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> 5 <link rel="match" href="reference/anchor-scroll-chained-001-ref.html"> 6 <style> 7 body { 8 margin: 0; 9 } 10 11 div { 12 width: 100px; 13 height: 100px; 14 } 15 16 #scroller { 17 overflow: scroll; 18 } 19 20 #anchor { 21 anchor-name: --a1; 22 height: 20px; 23 background: orange; 24 } 25 26 #anchored1 { 27 position: absolute; 28 position-anchor: --a1; 29 left: anchor(left); 30 top: anchor(bottom); 31 background: green; 32 anchor-name: --a2; 33 } 34 35 #anchored2 { 36 position: absolute; 37 position-anchor: --a2; 38 left: anchor(left); 39 top: anchor(bottom); 40 background: lime; 41 } 42 43 </style> 44 45 <div id="scroller"> 46 <div style="height: 230px"></div> 47 <div id="anchor"></div> 48 <div style="height: 230px"></div> 49 </div> 50 <div id="anchored1"></div> 51 <div id="anchored2"></div> 52 53 <script> 54 scroller.scrollTop = 200; 55 </script>