mozilla-central/testing/web-platform/tests/css/css-anchor-position/position-try-fallbacks-003.html

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

<!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">
<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>