Skip to content

Commit 9ab8d78

Browse files
tuankiet65tuankiet65
committed
1 parent 9cb7abb commit 9ab8d78

File tree

2 files changed

+65
-0
lines changed

2 files changed

+65
-0
lines changed

‎css/css-anchor-position/no-anchor-anchor-center-ref.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!doctype html>
2+
<title>Tests that 'anchor-center' behaves as 'center' when no anchor in containing block</title>
3+
<style>
4+
.anchor {
5+
background: orange;
6+
width: 100px;
7+
background-color: orange;
8+
}
9+
.container {
10+
position: fixed;
11+
top: 20px;
12+
left: 50px;
13+
width: 300px;
14+
height: 200px;
15+
display: flex;
16+
background: green;
17+
justify-content: center;
18+
}
19+
.target {
20+
position: absolute;
21+
margin: 0 auto;
22+
width: 80px;
23+
border: 1px #000 solid;
24+
background: lime;
25+
}
26+
</style>
27+
<div class="anchor">anchor</div>
28+
<div class="container">
29+
<div class="target">target 1</div>
30+
</div>

‎css/css-anchor-position/no-anchor-anchor-center.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!doctype html>
2+
<title>Tests that 'anchor-center' behaves as 'center' when no anchor in containing block</title>
3+
<link rel="match" href="no-anchor-anchor-center-ref.html">
4+
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#valdef-justify-self-anchor-center">
5+
<style>
6+
.anchor {
7+
anchor-name: --dropdownAnchor;
8+
background: orange;
9+
width: 100px;
10+
background-color: orange;
11+
}
12+
.container {
13+
position: fixed;
14+
top: 20px;
15+
left: 50px;
16+
width: 300px;
17+
height: 200px;
18+
background: green;
19+
}
20+
.target {
21+
position-anchor: --dropdownAnchor;
22+
display: flow;
23+
left: 10px;
24+
right: 10px;
25+
position: absolute;
26+
justify-self: anchor-center;
27+
width: 80px;
28+
border: 1px #000 solid;
29+
background: lime;
30+
}
31+
</style>
32+
<div class="anchor">anchor</div>
33+
<div class="container">
34+
<div class="target">target 1</div>
35+
</div>

0 commit comments

Comments
 (0)