position-area-scrolling-001.tentative.html (3106B)
1 <!DOCTYPE html> 2 <title>position-area to include current scroll position at first layout</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 .pos { 10 position: absolute; 11 box-sizing: border-box; 12 border: solid; 13 position-anchor: --anchor; 14 width: 50%; 15 height: 50%; 16 background: cyan; 17 } 18 #container.thicker > .pos { 19 border-width: thick; 20 } 21 </style> 22 <div id="scrollable" style="position:relative; overflow:hidden; width:500px; height:500px;"> 23 <div style="width:1000px; height:1000px;"> 24 <div id="container"> 25 <div style="height:200px;"></div> 26 <div style="anchor-name:--anchor; margin-left:200px; width:100px; height:100px; background:gray;"></div> 27 <div id="e1" class="pos" style="position-area:top left;"></div> 28 <div id="e2" class="pos" style="position-area:top center;"></div> 29 <div id="e3" class="pos" style="position-area:top right;"></div> 30 <div id="e4" class="pos" style="position-area:center left;"></div> 31 <div id="e5" class="pos" style="position-area:center center;"></div> 32 <div id="e6" class="pos" style="position-area:center right;"></div> 33 <div id="e7" class="pos" style="position-area:bottom left;"></div> 34 <div id="e8" class="pos" style="position-area:bottom center;"></div> 35 <div id="e9" class="pos" style="position-area:bottom right;"></div> 36 </div> 37 </div> 38 </div> 39 <script> 40 function assert_rects_equal(elm, x, y, width, height) { 41 assert_equals(elm.offsetLeft, x, (elm.id + " x")); 42 assert_equals(elm.offsetTop, y, (elm.id + " y")); 43 assert_equals(elm.offsetWidth, width, (elm.id + " width")); 44 assert_equals(elm.offsetHeight, height, (elm.id + " height")); 45 } 46 47 function assert_sizes() { 48 assert_rects_equal(e1, 100, 100, 100, 100); 49 assert_rects_equal(e2, 225, 100, 50, 100); 50 assert_rects_equal(e3, 300, 100, 350, 100); 51 assert_rects_equal(e4, 100, 225, 100, 50); 52 assert_rects_equal(e5, 225, 225, 50, 50); 53 assert_rects_equal(e6, 300, 225, 350, 50); 54 assert_rects_equal(e7, 100, 300, 100, 350); 55 assert_rects_equal(e8, 225, 300, 50, 350); 56 assert_rects_equal(e9, 300, 300, 350, 350); 57 } 58 59 promise_test(async() => { 60 assert_sizes(); 61 }, "Initial scroll position"); 62 63 promise_test(async() => { 64 await waitUntilNextAnimationFrame(); 65 await waitUntilNextAnimationFrame(); 66 scrollable.scrollTo(40, 60); 67 await waitUntilNextAnimationFrame(); 68 await waitUntilNextAnimationFrame(); 69 assert_sizes(); 70 }, "Scroll to 40,60"); 71 72 promise_test(async() => { 73 container.style.display = "none"; 74 await waitUntilNextAnimationFrame(); 75 await waitUntilNextAnimationFrame(); 76 container.style.display = "block"; 77 await waitUntilNextAnimationFrame(); 78 await waitUntilNextAnimationFrame(); 79 assert_sizes(); 80 }, "Redisplay at 40,60"); 81 </script>