136 lines
4.2 KiB
HTML
136 lines
4.2 KiB
HTML
<!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>
|