anchor-scroll-chained-003.html (1447B)
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-003-ref.html"> 6 <style> 7 body { 8 margin: 0; 9 } 10 11 div { 12 width: 100px; 13 height: 100px; 14 } 15 16 #scroller1 { 17 width: 200px; 18 height: 200px; 19 position: relative; 20 } 21 22 #scroller1,#scroller2 { 23 /* Using scrollbars here tests scrollbar painting order as well, which isn't 24 related to anchor positioning. See: 25 https://github.com/web-platform-tests/wpt/pull/55022#issuecomment-3499478504 */ 26 overflow: hidden; 27 } 28 29 #anchor { 30 anchor-name: --a1; 31 height: 20px; 32 background: orange; 33 } 34 35 #anchored1 { 36 position: absolute; 37 position-anchor: --a1; 38 left: anchor(left); 39 top: anchor(bottom); 40 background: green; 41 anchor-name: --a2; 42 z-index: 1; 43 } 44 45 #anchored2 { 46 position: absolute; 47 position-anchor: --a2; 48 left: anchor(left); 49 top: anchor(bottom); 50 background: lime; 51 z-index: 1; 52 } 53 54 </style> 55 56 <div id="anchored2"></div> 57 <div id="scroller1"> 58 <div id="anchored1"></div> 59 <div style="height: 100px"></div> 60 <div id="scroller2"> 61 <div style="height: 230px"></div> 62 <div id="anchor"></div> 63 <div style="height: 230px"></div> 64 </div> 65 <div style="height: 100px"></div> 66 </div> 67 68 <script> 69 scroller1.scrollTop = 80; 70 scroller2.scrollTop = 200; 71 </script>