position-area-scrolling-005.html (3402B)
1 <!DOCTYPE html> 2 <title>position-area with fallback and scrolling</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, flip-inline, flip-block flip-inline; 15 position-visibility: always; 16 width: 50%; 17 height: 50%; 18 background: cyan; 19 } 20 #container.thicker > .pos { 21 border-width: thick; 22 } 23 </style> 24 <div style="position:relative; width:500px; height:500px; background:yellow;"> 25 <div id="scrollable" style="overflow: scroll; scrollbar-width: none; width: 500px; height: 500px;"> 26 <div style="width:2000px; height:2000px;"> 27 <div id="container"> 28 <div style="anchor-name:--anchor; margin:200px; width:50px; height:50px; background:gray;"></div> 29 <div id="anchored" style="position-area:top left;"></div> 30 </div> 31 </div> 32 </div> 33 </div> 34 <script> 35 function assert_rects_equal(elm, x, y, width, height) { 36 assert_equals(elm.offsetLeft, x, (elm.id + " x")); 37 assert_equals(elm.offsetTop, y, (elm.id + " y")); 38 assert_equals(elm.offsetWidth, width, (elm.id + " width")); 39 assert_equals(elm.offsetHeight, height, (elm.id + " height")); 40 } 41 42 async function redisplay(elm) { 43 elm.style.display = "none"; 44 await waitUntilNextAnimationFrame(); 45 await waitUntilNextAnimationFrame(); 46 elm.style.display = "block"; 47 } 48 49 promise_test(async() => { 50 // Start at top left. 51 await waitUntilNextAnimationFrame(); 52 await waitUntilNextAnimationFrame(); 53 assert_rects_equal(anchored, 100, 100, 100, 100); 54 }, "Initial scroll position"); 55 56 promise_test(async() => { 57 scrollable.scrollTo(40, 60); 58 await waitUntilNextAnimationFrame(); 59 await waitUntilNextAnimationFrame(); 60 assert_rects_equal(anchored, 60, 40, 100, 100); 61 }, "Scroll to 40,60"); 62 63 promise_test(async() => { 64 // Switch to bottom left. 65 scrollable.scrollTo(100, 200); 66 await waitUntilNextAnimationFrame(); 67 await waitUntilNextAnimationFrame(); 68 assert_rects_equal(anchored, 50, 50, 50, 225); 69 }, "Scroll to 100,200"); 70 71 promise_test(async() => { 72 scrollable.scrollTo(0, 0); 73 await waitUntilNextAnimationFrame(); 74 await waitUntilNextAnimationFrame(); 75 assert_rects_equal(anchored, 150, 250, 50, 225); 76 }, "Scroll to 0,0"); 77 78 promise_test(async() => { 79 // Switch back to top left. 80 await redisplay(anchored); 81 await waitUntilNextAnimationFrame(); 82 await waitUntilNextAnimationFrame(); 83 assert_rects_equal(anchored, 100, 100, 100, 100); 84 }, "Redisplay at 0,0"); 85 86 promise_test(async() => { 87 // Switch to top right. 88 scrollable.scrollTo(200, 100); 89 await waitUntilNextAnimationFrame(); 90 await waitUntilNextAnimationFrame(); 91 assert_rects_equal(anchored, 50, 50, 225, 50); 92 }, "Scroll to 200,100"); 93 94 promise_test(async() => { 95 // Switch to bottom right. 96 scrollable.scrollTo(200, 200); 97 await waitUntilNextAnimationFrame(); 98 await waitUntilNextAnimationFrame(); 99 assert_rects_equal(anchored, 50, 50, 225, 225); 100 }, "Scroll to 200,200"); 101 </script>