position-area-scrolling-002.tentative.html (5717B)
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 style="position:relative; width:500px; height:500px;"> 23 <div id="scrollable" style="overflow:hidden; width:500px; height:500px;"> 24 <div style="width:1000px; height:1000px;"> 25 <div style="height:200px;"></div> 26 <div style="anchor-name:--anchor; margin-left:200px; width:100px; height:100px; background:gray;"></div> 27 </div> 28 </div> 29 30 <div id="container"> 31 <div id="e1" class="pos" style="position-area:top left;"></div> 32 <div id="e2" class="pos" style="position-area:top center;"></div> 33 <div id="e3" class="pos" style="position-area:top right;"></div> 34 <div id="e4" class="pos" style="position-area:center left;"></div> 35 <div id="e5" class="pos" style="position-area:center center;"></div> 36 <div id="e6" class="pos" style="position-area:center right;"></div> 37 <div id="e7" class="pos" style="position-area:bottom left;"></div> 38 <div id="e8" class="pos" style="position-area:bottom center;"></div> 39 <div id="e9" class="pos" style="position-area:bottom right;"></div> 40 </div> 41 </div> 42 43 <script> 44 function assert_rects_equal(elm, x, y, width, height) { 45 assert_equals(elm.offsetLeft, x, (elm.id + " x")); 46 assert_equals(elm.offsetTop, y, (elm.id + " y")); 47 assert_equals(elm.offsetWidth, width, (elm.id + " width")); 48 assert_equals(elm.offsetHeight, height, (elm.id + " height")); 49 } 50 51 function assert_scroll_and_layout_at_initial() { 52 assert_rects_equal(e1, 100, 100, 100, 100); 53 assert_rects_equal(e2, 225, 100, 50, 100); 54 assert_rects_equal(e3, 300, 100, 100, 100); 55 assert_rects_equal(e4, 100, 225, 100, 50); 56 assert_rects_equal(e5, 225, 225, 50, 50); 57 assert_rects_equal(e6, 300, 225, 100, 50); 58 assert_rects_equal(e7, 100, 300, 100, 100); 59 assert_rects_equal(e8, 225, 300, 50, 100); 60 assert_rects_equal(e9, 300, 300, 100, 100); 61 } 62 63 function assert_scroll_at_40_60_layout_at_initial() { 64 assert_rects_equal(e1, 60, 40, 100, 100); 65 assert_rects_equal(e2, 185, 40, 50, 100); 66 assert_rects_equal(e3, 260, 40, 100, 100); 67 assert_rects_equal(e4, 60, 165, 100, 50); 68 assert_rects_equal(e5, 185, 165, 50, 50); 69 assert_rects_equal(e6, 260, 165, 100, 50); 70 assert_rects_equal(e7, 60, 240, 100, 100); 71 assert_rects_equal(e8, 185, 240, 50, 100); 72 assert_rects_equal(e9, 260, 240, 100, 100); 73 } 74 75 function assert_scroll_and_layout_at_40_60() { 76 assert_rects_equal(e1, 80, 70, 80, 70); 77 assert_rects_equal(e2, 185, 70, 50, 70); 78 assert_rects_equal(e3, 260, 70, 120, 70); 79 assert_rects_equal(e4, 80, 165, 80, 50); 80 assert_rects_equal(e5, 185, 165, 50, 50); 81 assert_rects_equal(e6, 260, 165, 120, 50); 82 assert_rects_equal(e7, 80, 240, 80, 130); 83 assert_rects_equal(e8, 185, 240, 50, 130); 84 assert_rects_equal(e9, 260, 240, 120, 130); 85 } 86 87 function assert_scroll_at_initial_layout_at_40_60() { 88 assert_rects_equal(e1, 120, 130, 80, 70); 89 assert_rects_equal(e2, 225, 130, 50, 70); 90 assert_rects_equal(e3, 300, 130, 120, 70); 91 assert_rects_equal(e4, 120, 225, 80, 50); 92 assert_rects_equal(e5, 225, 225, 50, 50); 93 assert_rects_equal(e6, 300, 225, 120, 50); 94 assert_rects_equal(e7, 120, 300, 80, 130); 95 assert_rects_equal(e8, 225, 300, 50, 130); 96 assert_rects_equal(e9, 300, 300, 120, 130); 97 } 98 99 promise_test(async() => { 100 assert_scroll_and_layout_at_initial(); 101 }, "Initial scroll position"); 102 103 promise_test(async() => { 104 await waitUntilNextAnimationFrame(); 105 await waitUntilNextAnimationFrame(); 106 scrollable.scrollTo(40, 60); 107 await waitUntilNextAnimationFrame(); 108 await waitUntilNextAnimationFrame(); 109 assert_scroll_at_40_60_layout_at_initial(); 110 }, "Scroll to 40,60"); 111 112 promise_test(async() => { 113 // As long as we're within the same animation frame (and therefore haven't 114 // run ResizeObserver events), there will be no anchor recalculation point. 115 container.style.display = "flow-root"; 116 assert_scroll_and_layout_at_initial(); 117 container.style.display = "none"; 118 document.body.offsetTop; 119 container.style.display = "block"; 120 assert_scroll_and_layout_at_initial(); 121 }, "Reattach at 40,60"); 122 123 promise_test(async() => { 124 container.style.display = "none"; 125 await waitUntilNextAnimationFrame(); 126 await waitUntilNextAnimationFrame(); 127 container.style.display = "block"; 128 await waitUntilNextAnimationFrame(); 129 await waitUntilNextAnimationFrame(); 130 assert_scroll_and_layout_at_40_60(); 131 }, "Redisplay at 40,60"); 132 133 promise_test(async() => { 134 scrollable.scrollTo(0, 0); 135 container.className = "thicker"; 136 container.style.display = "block"; 137 await waitUntilNextAnimationFrame(); 138 await waitUntilNextAnimationFrame(); 139 assert_scroll_at_initial_layout_at_40_60(); 140 }, "Scroll to 0,0 and relayout"); 141 142 promise_test(async() => { 143 container.style.display = "none"; 144 await waitUntilNextAnimationFrame(); 145 container.style.display = "block"; 146 await waitUntilNextAnimationFrame(); 147 await waitUntilNextAnimationFrame(); 148 assert_scroll_and_layout_at_initial(); 149 }, "Redisplay at 0,0"); 150 </script>