59 lines
1.5 KiB
HTML
59 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<title>Remove current fallback @position-try rules</title>
|
|
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
|
<link rel="help" href="https://issues.chromium.org/issues/411170230">
|
|
<style id="removeme">
|
|
@position-try --pf1 {
|
|
left: auto;
|
|
right: anchor(left);
|
|
top: 200px;
|
|
}
|
|
</style>
|
|
<style id="removemetoo">
|
|
@position-try --pf2 {
|
|
left: auto;
|
|
right: anchor(left);
|
|
top: 300px;
|
|
}
|
|
</style>
|
|
<style>
|
|
#anchor {
|
|
anchor-name: --a;
|
|
margin-left: 100px;
|
|
height: 100px;
|
|
background: hotpink;
|
|
}
|
|
#box {
|
|
position: absolute;
|
|
position-anchor: --a;
|
|
top: 100px;
|
|
left: anchor(right);
|
|
position-try-fallbacks: --pf1,--pf2;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: cyan;
|
|
}
|
|
</style>
|
|
<div id="anchor"></div>
|
|
<div id="box"></div>
|
|
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="support/test-common.js"></script>
|
|
<script>
|
|
promise_test(async () => {
|
|
// The base style option doesn't fit. The two others do fit.
|
|
// Remove them one by one.
|
|
await waitUntilNextAnimationFrame();
|
|
await waitUntilNextAnimationFrame();
|
|
assert_equals(box.offsetTop, 200);
|
|
removeme.remove();
|
|
await waitUntilNextAnimationFrame();
|
|
await waitUntilNextAnimationFrame();
|
|
assert_equals(box.offsetTop, 300);
|
|
removemetoo.remove();
|
|
await waitUntilNextAnimationFrame();
|
|
await waitUntilNextAnimationFrame();
|
|
assert_equals(box.offsetTop, 100);
|
|
}, "Remove fallback rules");
|
|
</script>
|