anchor-scroll-003.html (1449B)
1 <!DOCTYPE html> 2 <title>Tests anchor positioned scrolling with fragmented containing block</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#scroll"> 4 <link rel="author" href="mailto:xiaochengh@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/test-common.js"></script> 8 9 <style> 10 body { 11 margin: 0; 12 } 13 #multicol { 14 column-count: 3; 15 column-width: 90px; 16 column-gap: 10px; 17 width: 300px; 18 height: 100px; 19 } 20 21 #cb { 22 height: 300px; 23 background: yellow; 24 position: relative; 25 } 26 27 #spacer { 28 height: 110px; 29 } 30 31 #scroller { 32 overflow-y: scroll; 33 height: 80px; 34 background: blue; 35 } 36 37 #anchor { 38 anchor-name: --a; 39 width: 50px; 40 height: 50px; 41 background: orange; 42 position: relative; 43 top: 80px; 44 } 45 46 #target { 47 position: absolute; 48 left: anchor(left); 49 bottom: anchor(top); 50 position-anchor: --a; 51 width: 50px; 52 height: 50px; 53 background: lime; 54 } 55 </style> 56 57 <div id=multicol> 58 <div id=cb> 59 <div id=spacer></div> 60 <div id=scroller> 61 <div id=anchor></div> 62 </div> 63 <div id=target></div> 64 </div> 65 </div> 66 67 <script> 68 promise_test(async () => { 69 scroller.scrollTop = 10; 70 await waitUntilNextAnimationFrame(); 71 await waitUntilNextAnimationFrame(); 72 73 let targetRect = target.getBoundingClientRect(); 74 assert_equals(targetRect.top, 30); 75 }, 'Scrolling should work in fragmented containing block'); 76 </script>