Skip to content

Commit 2a70b51

Browse files
dshin-mozmoz-wptsync-bot
dshin-moz
authored and
moz-wptsync-bot
committed
Unscroll position-area modified containing block.
Differential Revision: https://phabricator.services.mozilla.com/D276467 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=2006097 gecko-commit: ad61b7aa643419cdaebb5b371547f93566da1f95 gecko-reviewers: layout-anchor-positioning-reviewers, layout-reviewers, emilio
1 parent 744d45b commit 2a70b51

File tree

2 files changed

+171
-0
lines changed

2 files changed

+171
-0
lines changed

‎css/css-anchor-position/position-area-anchor-002-ref.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html class=reftest-wait>
3+
<title>anchor() resolution in position-area</title>
4+
<style>
5+
.abs-cb {
6+
width: 180px;
7+
height: 180px;
8+
position: relative;
9+
border: 5px solid;
10+
}
11+
12+
.scroller {
13+
width: 100%;
14+
height: 100%;
15+
overflow: scroll;
16+
}
17+
18+
.anchor {
19+
width: 60px;
20+
height: 60px;
21+
margin-left: 60px;
22+
background: pink;
23+
}
24+
25+
.filler {
26+
width: 1px;
27+
height: 180px;
28+
}
29+
30+
.positioned {
31+
width: 30px;
32+
height: 30px;
33+
background: purple;
34+
position: absolute;
35+
}
36+
37+
.tl {
38+
right: 120px;
39+
bottom: 120px;
40+
}
41+
42+
.tr {
43+
left: 120px;
44+
bottom: 120px;
45+
}
46+
47+
.bl {
48+
right: 120px;
49+
top: 120px;
50+
}
51+
52+
.br {
53+
left: 120px;
54+
top: 120px;
55+
}
56+
</style>
57+
<div class=abs-cb>
58+
<div id=s class=scroller>
59+
<div class=filler></div>
60+
<div class=anchor></div>
61+
<div class=filler></div>
62+
<div class="positioned tl dn"></div>
63+
<div class="positioned tr dn"></div>
64+
<div class="positioned bl dn"></div>
65+
<div class="positioned br dn"></div>
66+
</div>
67+
</div>
68+
<script>
69+
s.scrollTop = 120;
70+
document.documentElement.classList.remove('reftest-wait');
71+
</script>
72+
</html>

‎css/css-anchor-position/position-area-anchor-002.html‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html class=reftest-wait>
3+
<title>anchor() resolution in position-area</title>
4+
<link rel="help" href="https://www.w3.org/TR/css-anchor-position/#position-area">
5+
<link rel="match" href="position-area-anchor-002-ref.html">
6+
<link rel="author" name="David Shin" href="mailto:dshin@mozilla.com">
7+
<style>
8+
.abs-cb {
9+
width: 180px;
10+
height: 180px;
11+
position: relative;
12+
border: 5px solid;
13+
}
14+
15+
.scroller {
16+
width: 100%;
17+
height: 100%;
18+
overflow: scroll;
19+
}
20+
21+
.anchor {
22+
width: 60px;
23+
height: 60px;
24+
margin-left: 60px;
25+
anchor-name: --a;
26+
background: pink;
27+
}
28+
29+
.filler {
30+
width: 1px;
31+
height: 180px;
32+
}
33+
34+
.positioned {
35+
width: 30px;
36+
height: 30px;
37+
background: purple;
38+
position: absolute;
39+
position-anchor: --a;
40+
}
41+
42+
.tl {
43+
position-area: top left;
44+
right: anchor(left);
45+
bottom: anchor(top);
46+
}
47+
48+
.tr {
49+
position-area: top right;
50+
left: anchor(right);
51+
bottom: anchor(top);
52+
}
53+
54+
.bl {
55+
position-area: bottom left;
56+
right: anchor(left);
57+
top: anchor(bottom);
58+
}
59+
60+
.br {
61+
position-area: bottom right;
62+
left: anchor(right);
63+
top: anchor(bottom);
64+
}
65+
66+
.dn {
67+
display: none;
68+
}
69+
70+
</style>
71+
<div class=abs-cb>
72+
<div id=s class=scroller>
73+
<div class=filler></div>
74+
<div class=anchor></div>
75+
<div class=filler></div>
76+
<div class="positioned tl dn"></div>
77+
<div class="positioned tr dn"></div>
78+
<div class="positioned bl dn"></div>
79+
<div class="positioned br dn"></div>
80+
</div>
81+
</div>
82+
<script>
83+
function raf() {
84+
return new Promise(resolve => requestAnimationFrame(resolve));
85+
}
86+
87+
async function runTest() {
88+
s.scrollTop = 120;
89+
await raf();
90+
await raf();
91+
92+
for(const e of s.querySelectorAll('.positioned')) {
93+
e.classList.remove('dn');
94+
}
95+
document.documentElement.classList.remove('reftest-wait');
96+
}
97+
runTest();
98+
</script>
99+
</html>

0 commit comments

Comments
 (0)