Skip to content

Commit 6409b25

Browse files
jfkthameKurtCattiSchmidt
jfkthame
authored and
KurtCattiSchmidt
committed
Add a reftest verifying that the target element is finally reflowed with the proper width, after trying fallbacks with different widths.
Differential Revision: https://phabricator.services.mozilla.com/D277757 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=2006513 gecko-commit: 31b7a01d72ba48f0a22879de64d91abe0e8b3a2e gecko-reviewers: layout-anchor-positioning-reviewers, emilio
1 parent 90fbaa5 commit 6409b25

File tree

2 files changed

+103
-0
lines changed

2 files changed

+103
-0
lines changed

‎css/css-anchor-position/position-try-005-ref.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<link rel="author" href="mailto:jkew@mozilla.com">
4+
5+
<style>
6+
.cb {
7+
position: relative;
8+
width: 250px;
9+
height: 100px;
10+
background: yellow;
11+
}
12+
.anchor {
13+
position: absolute;
14+
top: 25px;
15+
left: 50px;
16+
width: 50px;
17+
height: 50px;
18+
background: blue;
19+
}
20+
.target {
21+
position: absolute;
22+
top: 35px;
23+
left: 110px;
24+
width: 140px;
25+
background: #0004;
26+
}
27+
</style>
28+
<body>
29+
<div class="cb">
30+
<div class="anchor"></div>
31+
<div class="target">This text should wrap and overflow the yellow containing block vertically (and not horizontally).</div>
32+
</div>
33+
</body>

‎css/css-anchor-position/position-try-005.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback">
4+
<link rel="author" href="mailto:jkew@mozilla.com">
5+
<link rel="match" href="position-try-005-ref.html">
6+
7+
<style>
8+
.cb {
9+
position: relative;
10+
width: 250px;
11+
height: 100px;
12+
background: yellow;
13+
}
14+
.anchor {
15+
position: relative;
16+
anchor-name: --a;
17+
top: 25px;
18+
left: 50px;
19+
width: 50px;
20+
height: 50px;
21+
background: blue;
22+
}
23+
.target {
24+
position: absolute;
25+
position-try-fallbacks: --f1, --f2, --f3, --f4;
26+
width: 140px;
27+
margin: 10px;
28+
background: #0004;
29+
/* Position to the right of the anchor. */
30+
left: anchor(--a right);
31+
top: anchor(--a top);
32+
}
33+
/* fallback positions with various widths, none of which actually fit */
34+
@position-try --f1 {
35+
inset: auto;
36+
/* Position to the left of the anchor. */
37+
right: anchor(--a left);
38+
top: anchor(--a top);
39+
width: 300px;
40+
}
41+
@position-try --f2 {
42+
inset: auto;
43+
/* Position to the bottom of the anchor. */
44+
left: anchor(--a left);
45+
top: anchor(--a bottom);
46+
width: 250px;
47+
}
48+
@position-try --f3 {
49+
inset: auto;
50+
/* Position to the top of the anchor. */
51+
left: anchor(--a left);
52+
bottom: anchor(--a top);
53+
width: 150px;
54+
}
55+
@position-try --f4 {
56+
inset: auto;
57+
/* Position to the right of the anchor, with a larger width. */
58+
left: anchor(--a right);
59+
top: anchor(--a top);
60+
width: 200px;
61+
}
62+
</style>
63+
<body>
64+
<!-- None of the fallback rules fit. The base style is used. -->
65+
<div class="cb">
66+
<div class="anchor"></div>
67+
<!-- target element includes wrapped text, to check that its content is reflowed appropriately for the chosen position -->
68+
<div class="target">This text should wrap and overflow the yellow containing block vertically (and not horizontally).</div>
69+
</div>
70+
</body>

0 commit comments

Comments
 (0)