| <!DOCTYPE html> |
| <title>position-area to include current scroll position at first layout</title> |
| <link rel="author" title="Morten Stenshorne" href="mailto:[email protected]"> |
| <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#scroll"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="support/test-common.js"></script> |
| <style> |
| .pos { |
| position: absolute; |
| box-sizing: border-box; |
| border: solid; |
| position-anchor: --anchor; |
| width: 50%; |
| height: 50%; |
| background: cyan; |
| } |
| #container.thicker > .pos { |
| border-width: thick; |
| } |
| </style> |
| <div style="position:relative; width:500px; height:500px;"> |
| <div id="scrollable" style="overflow:hidden; width:500px; height:500px;"> |
| <div style="width:1000px; height:1000px;"> |
| <div style="height:200px;"></div> |
| <div style="anchor-name:--anchor; margin-left:200px; width:100px; height:100px; background:gray;"></div> |
| </div> |
| </div> |
| |
| <div id="container"> |
| <div id="e1" class="pos" style="position-area:top left;"></div> |
| <div id="e2" class="pos" style="position-area:top center;"></div> |
| <div id="e3" class="pos" style="position-area:top right;"></div> |
| <div id="e4" class="pos" style="position-area:center left;"></div> |
| <div id="e5" class="pos" style="position-area:center center;"></div> |
| <div id="e6" class="pos" style="position-area:center right;"></div> |
| <div id="e7" class="pos" style="position-area:bottom left;"></div> |
| <div id="e8" class="pos" style="position-area:bottom center;"></div> |
| <div id="e9" class="pos" style="position-area:bottom right;"></div> |
| </div> |
| </div> |
| |
| <script> |
| function assert_rects_equal(elm, x, y, width, height) { |
| assert_equals(elm.offsetLeft, x, (elm.id + " x")); |
| assert_equals(elm.offsetTop, y, (elm.id + " y")); |
| assert_equals(elm.offsetWidth, width, (elm.id + " width")); |
| assert_equals(elm.offsetHeight, height, (elm.id + " height")); |
| } |
| |
| function assert_scroll_and_layout_at_initial() { |
| assert_rects_equal(e1, 100, 100, 100, 100); |
| assert_rects_equal(e2, 225, 100, 50, 100); |
| assert_rects_equal(e3, 300, 100, 100, 100); |
| assert_rects_equal(e4, 100, 225, 100, 50); |
| assert_rects_equal(e5, 225, 225, 50, 50); |
| assert_rects_equal(e6, 300, 225, 100, 50); |
| assert_rects_equal(e7, 100, 300, 100, 100); |
| assert_rects_equal(e8, 225, 300, 50, 100); |
| assert_rects_equal(e9, 300, 300, 100, 100); |
| } |
| |
| function assert_scroll_at_40_60_layout_at_initial() { |
| assert_rects_equal(e1, 60, 40, 100, 100); |
| assert_rects_equal(e2, 185, 40, 50, 100); |
| assert_rects_equal(e3, 260, 40, 100, 100); |
| assert_rects_equal(e4, 60, 165, 100, 50); |
| assert_rects_equal(e5, 185, 165, 50, 50); |
| assert_rects_equal(e6, 260, 165, 100, 50); |
| assert_rects_equal(e7, 60, 240, 100, 100); |
| assert_rects_equal(e8, 185, 240, 50, 100); |
| assert_rects_equal(e9, 260, 240, 100, 100); |
| } |
| |
| function assert_scroll_and_layout_at_40_60() { |
| assert_rects_equal(e1, 80, 70, 80, 70); |
| assert_rects_equal(e2, 185, 70, 50, 70); |
| assert_rects_equal(e3, 260, 70, 120, 70); |
| assert_rects_equal(e4, 80, 165, 80, 50); |
| assert_rects_equal(e5, 185, 165, 50, 50); |
| assert_rects_equal(e6, 260, 165, 120, 50); |
| assert_rects_equal(e7, 80, 240, 80, 130); |
| assert_rects_equal(e8, 185, 240, 50, 130); |
| assert_rects_equal(e9, 260, 240, 120, 130); |
| } |
| |
| function assert_scroll_at_initial_layout_at_40_60() { |
| assert_rects_equal(e1, 120, 130, 80, 70); |
| assert_rects_equal(e2, 225, 130, 50, 70); |
| assert_rects_equal(e3, 300, 130, 120, 70); |
| assert_rects_equal(e4, 120, 225, 80, 50); |
| assert_rects_equal(e5, 225, 225, 50, 50); |
| assert_rects_equal(e6, 300, 225, 120, 50); |
| assert_rects_equal(e7, 120, 300, 80, 130); |
| assert_rects_equal(e8, 225, 300, 50, 130); |
| assert_rects_equal(e9, 300, 300, 120, 130); |
| } |
| |
| promise_test(async() => { |
| assert_scroll_and_layout_at_initial(); |
| }, "Initial scroll position"); |
| |
| promise_test(async() => { |
| await waitUntilNextAnimationFrame(); |
| await waitUntilNextAnimationFrame(); |
| scrollable.scrollTo(40, 60); |
| await waitUntilNextAnimationFrame(); |
| await waitUntilNextAnimationFrame(); |
| assert_scroll_at_40_60_layout_at_initial(); |
| }, "Scroll to 40,60"); |
| |
| promise_test(async() => { |
| // As long as we're within the same animation frame (and therefore haven't |
| // run ResizeObserver events), there will be no anchor recalculation point. |
| container.style.display = "flow-root"; |
| assert_scroll_and_layout_at_initial(); |
| container.style.display = "none"; |
| document.body.offsetTop; |
| container.style.display = "block"; |
| assert_scroll_and_layout_at_initial(); |
| }, "Reattach at 40,60"); |
| |
| promise_test(async() => { |
| container.style.display = "none"; |
| await waitUntilNextAnimationFrame(); |
| await waitUntilNextAnimationFrame(); |
| container.style.display = "block"; |
| await waitUntilNextAnimationFrame(); |
| await waitUntilNextAnimationFrame(); |
| assert_scroll_and_layout_at_40_60(); |
| }, "Redisplay at 40,60"); |
| |
| promise_test(async() => { |
| scrollable.scrollTo(0, 0); |
| container.className = "thicker"; |
| container.style.display = "block"; |
| await waitUntilNextAnimationFrame(); |
| await waitUntilNextAnimationFrame(); |
| assert_scroll_at_initial_layout_at_40_60(); |
| }, "Scroll to 0,0 and relayout"); |
| |
| promise_test(async() => { |
| container.style.display = "none"; |
| await waitUntilNextAnimationFrame(); |
| container.style.display = "block"; |
| await waitUntilNextAnimationFrame(); |
| await waitUntilNextAnimationFrame(); |
| assert_scroll_and_layout_at_initial(); |
| }, "Redisplay at 0,0"); |
| </script> |
