position-area-scrolling-006.html (2634B)
1 <!DOCTYPE html> 2 <title>position-area with fallback and scrolling, tall anchor</title> 3 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#scroll"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/test-common.js"></script> 8 <style> 9 #anchored { 10 position: absolute; 11 box-sizing: border-box; 12 border: solid; 13 position-anchor: --anchor; 14 position-try-fallbacks: flip-block; 15 position-visibility: always; 16 width: 50%; 17 height: 50%; 18 min-width: 60px; 19 min-height: 60px; 20 background: cyan; 21 } 22 </style> 23 <div style="position:relative; width:500px; height:500px; background:yellow;"> 24 <div id="scrollable" style="overflow:scroll; scrollbar-width:none; width:100%; height:100%; background:yellow;"> 25 <div style="display: flow-root; width:2000px; height:2000px;"> 26 <div style="anchor-name:--anchor; margin:200px; width:50px; height:1000px; background:gray;"></div> 27 <div id="anchored" style="position-area:top left;"></div> 28 </div> 29 </div> 30 </div> 31 <script> 32 function assert_rects_equal(elm, x, y, width, height) { 33 assert_equals(elm.offsetLeft, x, (elm.id + " x")); 34 assert_equals(elm.offsetTop, y, (elm.id + " y")); 35 assert_equals(elm.offsetWidth, width, (elm.id + " width")); 36 assert_equals(elm.offsetHeight, height, (elm.id + " height")); 37 } 38 39 promise_test(async() => { 40 await waitUntilNextAnimationFrame(); 41 await waitUntilNextAnimationFrame(); 42 assert_rects_equal(anchored, 100, 100, 100, 100); 43 }, "Initial scroll position"); 44 45 promise_test(async() => { 46 // Swich to bottom option. 47 scrollable.scrollTo(0, 1000); 48 await waitUntilNextAnimationFrame(); 49 await waitUntilNextAnimationFrame(); 50 assert_rects_equal(anchored, 100, 200, 100, 150); 51 }, "Scroll to the bottom"); 52 53 promise_test(async() => { 54 scrollable.scrollTo(0, 500); 55 await waitUntilNextAnimationFrame(); 56 await waitUntilNextAnimationFrame(); 57 assert_rects_equal(anchored, 100, 640, 100, 60); 58 }, "Scroll to 500"); 59 60 promise_test(async() => { 61 scrollable.scrollTo(0, 150); 62 await waitUntilNextAnimationFrame(); 63 await waitUntilNextAnimationFrame(); 64 assert_rects_equal(anchored, 100, 990, 100, 60); 65 }, "Scroll to 150"); 66 67 promise_test(async() => { 68 // Switch to top option. 69 scrollable.scrollTo(0, 100); 70 await waitUntilNextAnimationFrame(); 71 await waitUntilNextAnimationFrame(); 72 assert_rects_equal(anchored, 100, 40, 100, 60); 73 }, "Scroll to 100"); 74 </script>