Skip to content

Commit 26273c0

Browse files
tuankiet65tuankiet65
committed
1 parent aaee91a commit 26273c0

File tree

2 files changed

+79
-0
lines changed

2 files changed

+79
-0
lines changed

‎css/css-anchor-position/anchor-scroll-fixedpos-003.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
3+
<title>Tests that fixed-positioned anchor-positioned elements doesn't get clipped by the viewport</title>
4+
<link rel="author" href="mailto:[email protected]">
5+
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/">
6+
<link rel="match" href="reference/anchor-scroll-fixedpos-003-ref.html">
7+
8+
<style>
9+
body {
10+
margin: 0;
11+
}
12+
13+
div {
14+
width: 100px;
15+
height: 100px;
16+
font-size: 16px;
17+
}
18+
19+
#anchor {
20+
anchor-name: --a1;
21+
margin-top: 105vh;
22+
background: orange;
23+
}
24+
25+
#anchored {
26+
position: fixed;
27+
position-anchor: --a1;
28+
left: anchor(left);
29+
bottom: anchor(top);
30+
background: green;
31+
color: white;
32+
}
33+
</style>
34+
35+
<body>
36+
<div id="anchor"></div>
37+
<div id="anchored">Anchored element</div>
38+
39+
<script>
40+
const anchor = document.getElementById("anchor");
41+
anchor.scrollIntoView(false);
42+
</script>
43+
</body>

‎css/css-anchor-position/reference/anchor-scroll-fixedpos-003-ref.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
3+
<style>
4+
body {
5+
margin: 0;
6+
}
7+
8+
div {
9+
width: 100px;
10+
height: 100px;
11+
font-size: 16px;
12+
background: green;
13+
color: white;
14+
}
15+
16+
#anchor {
17+
margin-top: 105vh;
18+
background: orange;
19+
}
20+
21+
#anchored {
22+
position: absolute;
23+
top: calc(105vh - 100px);
24+
background: green;
25+
}
26+
</style>
27+
28+
<body>
29+
<div id="anchor"></div>
30+
<div id="anchored">Anchored element</div>
31+
32+
<script>
33+
const anchor = document.getElementById("anchor");
34+
anchor.scrollIntoView(false);
35+
</script>
36+
</body>

0 commit comments

Comments
 (0)