| <!DOCTYPE html> |
| <title>position-try-fallbacks:flip-block, only switch fallback if the current option doesn't fit</title> |
| <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> |
| <link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-try-fallbacks"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="support/test-common.js"></script> |
| <style> |
| #anchor { |
| anchor-name: --a; |
| margin-top: 200px; |
| margin-left: 100px; |
| width: 150px; |
| height: 50px; |
| background: blue; |
| } |
| #anchored1 { |
| position: absolute; |
| position-anchor: --a; |
| position-area: top left; |
| position-try-fallbacks: flip-block; |
| width: 100px; |
| height: 100px; |
| background: hotpink; |
| } |
| #anchored2 { |
| position: absolute; |
| position-anchor: --a; |
| position-area: top right; |
| position-try-fallbacks: flip-block; |
| width: 100px; |
| height: 450px; |
| background: yellow; |
| } |
| </style> |
| |
| <div id="scroller" style="position:relative; overflow-y:scroll; width:400px; height:400px;"> |
| <div id="anchor"></div> |
| <div style="height:1000px;"></div> |
| <div id="anchored1"></div> |
| <div id="anchored2"></div> |
| </div> |
| |
| <script> |
| async function redisplay() { |
| anchored1.style.display = "none"; |
| anchored2.style.display = "none"; |
| await waitUntilNextAnimationFrame(); |
| await waitUntilNextAnimationFrame(); |
| anchored1.style.display = "block"; |
| anchored2.style.display = "block"; |
| await waitUntilNextAnimationFrame(); |
| await waitUntilNextAnimationFrame(); |
| } |
| |
| promise_test(async () => { |
| await waitUntilNextAnimationFrame(); |
| await waitUntilNextAnimationFrame(); |
| // Both options fits. Pick the first one. |
| assert_equals(anchored1.offsetTop, 100); |
| // None of the options for #anchor2 fits. Use the first one. |
| assert_equals(anchored2.offsetTop, -250); |
| }, 'initial position'); |
| |
| promise_test(async () => { |
| scroller.scrollTop = 100; |
| await waitUntilNextAnimationFrame(); |
| await waitUntilNextAnimationFrame(); |
| assert_equals(anchored1.offsetTop, 100); |
| assert_equals(anchored2.offsetTop, -250); |
| }, 'scroll to 100'); |
| |
| promise_test(async () => { |
| scroller.scrollTop = 101; |
| await waitUntilNextAnimationFrame(); |
| await waitUntilNextAnimationFrame(); |
| // The first option for #anchored1 no longer fits. Move to the second one, |
| // which fits. |
| assert_equals(anchored1.offsetTop, 250); |
| // None of the options for #anchor2 fits. Keep using the first one. |
| assert_equals(anchored2.offsetTop, -250); |
| }, 'scroll to 101'); |
| |
| promise_test(async () => { |
| scroller.scrollTop = 100; |
| await waitUntilNextAnimationFrame(); |
| await waitUntilNextAnimationFrame(); |
| // The first option fits again, but stay at the second option, since that |
| // one too still fits. |
| assert_equals(anchored1.offsetTop, 250); |
| |
| assert_equals(anchored2.offsetTop, -250); |
| }, 'scroll back to 100'); |
| |
| promise_test(async () => { |
| await redisplay(); |
| // Redisplaying the anchored element should go through the options over |
| // again, which means that the first options will be chosen. |
| assert_equals(anchored1.offsetTop, 100); |
| assert_equals(anchored2.offsetTop, -250); |
| }, 'redisplay at 100'); |
| |
| promise_test(async () => { |
| scroller.scrollTop = 299; |
| await waitUntilNextAnimationFrame(); |
| await waitUntilNextAnimationFrame(); |
| // The first option no longer fits. Move to the second one, which fits. |
| assert_equals(anchored1.offsetTop, 250); |
| |
| assert_equals(anchored2.offsetTop, -250); |
| }, 'scroll to 299'); |
| |
| |
| promise_test(async () => { |
| scroller.scrollTop = 300; |
| await waitUntilNextAnimationFrame(); |
| await waitUntilNextAnimationFrame(); |
| assert_equals(anchored1.offsetTop, 250); |
| |
| // The second option now fits. |
| assert_equals(anchored2.offsetTop, 250); |
| }, 'scroll to 300'); |
| |
| promise_test(async () => { |
| scroller.scrollTop = 0; |
| await waitUntilNextAnimationFrame(); |
| await waitUntilNextAnimationFrame(); |
| |
| // The second option still fits. |
| assert_equals(anchored1.offsetTop, 250); |
| |
| // The second option no longer fits, but neither does the first one. Stay at |
| // the second one. |
| assert_equals(anchored2.offsetTop, 250); |
| }, 'scroll back to 0'); |
| </script> |
