71 lines
1.7 KiB
HTML
71 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback">
|
|
<link rel="author" href="mailto:jkew@mozilla.com">
|
|
<link rel="match" href="position-try-005-ref.html">
|
|
|
|
<style>
|
|
.cb {
|
|
position: relative;
|
|
width: 250px;
|
|
height: 100px;
|
|
background: yellow;
|
|
}
|
|
.anchor {
|
|
position: relative;
|
|
anchor-name: --a;
|
|
top: 25px;
|
|
left: 50px;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: blue;
|
|
}
|
|
.target {
|
|
position: absolute;
|
|
position-try-fallbacks: --f1, --f2, --f3, --f4;
|
|
width: 140px;
|
|
margin: 10px;
|
|
background: #0004;
|
|
/* Position to the right of the anchor. */
|
|
left: anchor(--a right);
|
|
top: anchor(--a top);
|
|
}
|
|
/* fallback positions with various widths, none of which actually fit */
|
|
@position-try --f1 {
|
|
inset: auto;
|
|
/* Position to the left of the anchor. */
|
|
right: anchor(--a left);
|
|
top: anchor(--a top);
|
|
width: 300px;
|
|
}
|
|
@position-try --f2 {
|
|
inset: auto;
|
|
/* Position to the bottom of the anchor. */
|
|
left: anchor(--a left);
|
|
top: anchor(--a bottom);
|
|
width: 250px;
|
|
}
|
|
@position-try --f3 {
|
|
inset: auto;
|
|
/* Position to the top of the anchor. */
|
|
left: anchor(--a left);
|
|
bottom: anchor(--a top);
|
|
width: 150px;
|
|
}
|
|
@position-try --f4 {
|
|
inset: auto;
|
|
/* Position to the right of the anchor, with a larger width. */
|
|
left: anchor(--a right);
|
|
top: anchor(--a top);
|
|
width: 200px;
|
|
}
|
|
</style>
|
|
<body>
|
|
<!-- None of the fallback rules fit. The base style is used. -->
|
|
<div class="cb">
|
|
<div class="anchor"></div>
|
|
<!-- target element includes wrapped text, to check that its content is reflowed appropriately for the chosen position -->
|
|
<div class="target">This text should wrap and overflow the yellow containing block vertically (and not horizontally).</div>
|
|
</div>
|
|
</body>
|