53 lines
1.7 KiB
HTML
53 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Anchor Positioning Test: position fallbacks list limit</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-apply">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
#container {
|
|
position: relative;
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
.positioned {
|
|
width: 200px;
|
|
height: 200px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 10px; /* overflowing #container */
|
|
}
|
|
|
|
@position-try --bar {
|
|
left: 0; /* not overflowing #container */
|
|
}
|
|
#t1 {
|
|
/* If --foo is not found, we should still try --bar even if we limit the
|
|
number of applied position fallbacks to five because the --foo's are not
|
|
added to the `position fallbacks list` per spec. */
|
|
position-try-fallbacks: --foo, --foo, --foo, --foo, --foo, --foo, --foo, --bar;
|
|
}
|
|
|
|
/* --f1 .. --f4 all overflowing #container */
|
|
@position-try --f1 { left: 10px; }
|
|
@position-try --f2 { left: 10px; }
|
|
@position-try --f3 { left: 10px; }
|
|
@position-try --f4 { left: 10px; }
|
|
@position-try --f5 { left: 20px; width: 20px; /* not overflowing #container */ }
|
|
#t2 {
|
|
position-try-fallbacks: --f1, --f2, --f3, --f4, --f5;
|
|
}
|
|
|
|
</style>
|
|
<div id="container">
|
|
<div id="t1" class="positioned"></div>
|
|
<div id="t2" class="positioned"></div>
|
|
</div>
|
|
<script>
|
|
test(() => {
|
|
assert_equals(t1.offsetLeft, 0, "The --bar try fallback should be applied");
|
|
}, "Try fallbacks which are not found are not part of the limit");
|
|
|
|
test(() => {
|
|
assert_equals(t2.offsetLeft, 20, "The --f5 try fallback should be applied");
|
|
}, "Must support At least five try fallbacks");
|
|
</script>
|