| <!DOCTYPE html> |
| <title>Tests position fallback with initially out-of-viewport anchor in vertial-rl</title> |
| <link rel="author" href="mailto:xiaochengh@chromium.org"> |
| <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#scroll"> |
| <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-apply"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="support/test-common.js"></script> |
| |
| <style> |
| body { |
| margin: 0; |
| width: 200vw; |
| height: 200vh; |
| } |
| |
| html { |
| writing-mode: vertical-rl; |
| } |
| |
| #anchor { |
| anchor-name: --a; |
| width: 100px; |
| height: 100px; |
| margin-block-start: 100vb; |
| margin-inline-start: 100vi; |
| background: orange; |
| } |
| |
| #anchored { |
| position: fixed; |
| width: 100px; |
| height: 100px; |
| background: green; |
| position-anchor: --a; |
| position-try-fallbacks: --pf1, --pf2, --pf3; |
| inset-block-start: anchor(end); |
| inset-inline-start: anchor(end); |
| } |
| |
| @position-try --pf1 { |
| inset: auto; |
| inset-block-end: anchor(start); |
| inset-inline-start: anchor(end); |
| } |
| @position-try --pf2 { |
| inset: auto; |
| inset-block-start: anchor(end); |
| inset-inline-end: anchor(start); |
| } |
| @position-try --pf3 { |
| inset: auto; |
| inset-block-end: anchor(start); |
| inset-inline-end: anchor(start); |
| } |
| </style> |
| |
| <div id="anchor"></div> |
| <div id="anchored"></div> |
| |
| <script> |
| let vw = window.innerWidth; |
| let vh = window.innerHeight; |
| |
| promise_test(async () => { |
| await waitUntilNextAnimationFrame(); |
| await waitUntilNextAnimationFrame(); |
| assert_fallback_position(anchored, anchor, 'top'); |
| assert_fallback_position(anchored, anchor, 'right'); |
| }, 'Should use the last position option initially'); |
| |
| promise_test(async () => { |
| // Scroll left to have enough space left to the anchor, but not enough below. |
| document.documentElement.scrollLeft = -250; |
| document.documentElement.scrollTop = 150; |
| await waitUntilNextAnimationFrame(); |
| assert_fallback_position(anchored, anchor, 'top'); |
| assert_fallback_position(anchored, anchor, 'right'); |
| // The anchored element stays where it is, though, since the current option still fits. |
| }, 'Should stay at initial position, since it still fits'); |
| |
| promise_test(async () => { |
| // Scroll left to have enough space left to the anchor, but not enough below. |
| document.documentElement.scrollLeft = -vw + 99; |
| await waitUntilNextAnimationFrame(); |
| assert_fallback_position(anchored, anchor, 'left'); |
| assert_fallback_position(anchored, anchor, 'top'); |
| }, 'Should use the third position option with enough space left'); |
| |
| promise_test(async () => { |
| // Scroll down and left to have enough space on both axes. |
| document.documentElement.scrollLeft = -250; |
| document.documentElement.scrollTop = vh + 100; |
| await waitUntilNextAnimationFrame(); |
| assert_fallback_position(anchored, anchor, 'left'); |
| assert_fallback_position(anchored, anchor, 'bottom'); |
| }, 'Should use the first position option with enough space left and below'); |
| |
| promise_test(async () => { |
| // Scroll down to have enough space below the anchor, but not enough left. |
| document.documentElement.scrollLeft = -150; |
| document.documentElement.scrollTop = vh - 99; |
| await waitUntilNextAnimationFrame(); |
| assert_fallback_position(anchored, anchor, 'right'); |
| assert_fallback_position(anchored, anchor, 'bottom'); |
| }, 'Should use the second position option with enough space below (and not enough above)'); |
| </script> |
