Skip to content

Commit eea44e9

Browse files
tuankiet65fantasai
tuankiet65
authored and
fantasai
committed
Add tests to check interaction between anchor()/anchor-size() and CSS zoom
1 parent d6d2256 commit eea44e9

File tree

4 files changed

+249
-0
lines changed

4 files changed

+249
-0
lines changed

‎css/css-anchor-position/anchor-css-zoom.html‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!DOCTYPE html>
2+
3+
<title>CSS Anchor Positioning: tests that anchor() works with CSS zoom property</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-pos">
5+
<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property">
6+
<link rel="author" href="mailto:[email protected]">
7+
<link rel="match" href="reference/anchor-css-zoom-ref.html">
8+
9+
<style>
10+
.containing-block {
11+
position: relative;
12+
width: 150px;
13+
height: 150px;
14+
15+
zoom: 2;
16+
}
17+
18+
.cell {
19+
width: 50px;
20+
height: 50px;
21+
}
22+
23+
#anchor-cell {
24+
position: absolute;
25+
top: 50px;
26+
left: 50px;
27+
28+
anchor-name: --anchor;
29+
30+
background: green;
31+
}
32+
33+
.anchor-positioned-cell {
34+
position: absolute;
35+
position-anchor: --anchor;
36+
}
37+
38+
#top-left {
39+
top: 0;
40+
right: anchor(left);
41+
42+
background: cyan;
43+
}
44+
45+
#top-right {
46+
top: 0;
47+
left: anchor(right);
48+
49+
background: magenta;
50+
}
51+
52+
#bottom-left {
53+
bottom: 0;
54+
right: anchor(left);
55+
56+
background: yellow;
57+
}
58+
59+
#bottom-right {
60+
bottom: 0;
61+
left: anchor(right);
62+
63+
background: black;
64+
}
65+
</style>
66+
67+
<body>
68+
<!--
69+
The boxes below are arranged like this:
70+
(the outside box is .containing-block)
71+
72+
-------------
73+
| 1 | | 2 |
74+
|---|---|---|
75+
| | A | |
76+
|---|---|---|
77+
| 3 | | 4 |
78+
-------------
79+
-->
80+
81+
<div class="containing-block">
82+
<!-- Box A -->
83+
<div class="cell" id="anchor-cell"></div>
84+
85+
<!-- Box 1 -->
86+
<div class="cell anchor-positioned-cell" id="top-left"></div>
87+
88+
<!-- Box 2 -->
89+
<div class="cell anchor-positioned-cell" id="top-right"></div>
90+
91+
<!-- Box 3 -->
92+
<div class="cell anchor-positioned-cell" id="bottom-left"></div>
93+
94+
<!-- Box 4 -->
95+
<div class="cell anchor-positioned-cell" id="bottom-right"></div>
96+
</div>
97+
</body>

‎css/css-anchor-position/anchor-size-css-zoom.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
3+
<title>CSS Anchor Positioning: tests that anchor-size() works with CSS zoom property</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-size-fn">
5+
<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property">
6+
<link rel="author" href="mailto:[email protected]">
7+
<link rel="match" href="reference/anchor-size-css-zoom-ref.html">
8+
9+
<style>
10+
#containing-block {
11+
position: relative;
12+
13+
zoom: 2;
14+
}
15+
16+
#anchor {
17+
position: absolute;
18+
19+
width: 200px;
20+
height: 100px;
21+
22+
anchor-name: --anchor;
23+
24+
background: red;
25+
}
26+
27+
#anchor-positioned {
28+
position: absolute;
29+
30+
width: anchor-size(--anchor width);
31+
height: anchor-size(--anchor height);
32+
33+
background: green;
34+
35+
z-index: 1;
36+
}
37+
</style>
38+
39+
Test passes if no red is visible.
40+
41+
<div id="containing-block">
42+
<!--
43+
Both rectangles below overlaps.
44+
#anchor is red, #anchor-positioned is green and above #anchor in Z order.
45+
If no red is visible then #anchor-positioned has fully covered #anchor.
46+
-->
47+
<div id="anchor"></div>
48+
<div id="anchor-positioned"></div>
49+
</div>

‎css/css-anchor-position/reference/anchor-css-zoom-ref.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
3+
<style>
4+
.containing-block {
5+
position: relative;
6+
width: 150px;
7+
height: 150px;
8+
9+
zoom: 2;
10+
}
11+
12+
.cell {
13+
width: 50px;
14+
height: 50px;
15+
}
16+
17+
#anchor-cell {
18+
position: absolute;
19+
top: 50px;
20+
left: 50px;
21+
22+
background: green;
23+
}
24+
25+
.anchor-positioned-cell {
26+
position: absolute;
27+
}
28+
29+
#top-left {
30+
top: 0;
31+
left: 0;
32+
33+
background: cyan;
34+
}
35+
36+
#top-right {
37+
top: 0;
38+
right: 0;
39+
40+
background: magenta;
41+
}
42+
43+
#bottom-left {
44+
bottom: 0;
45+
left: 0;
46+
47+
background: yellow;
48+
}
49+
50+
#bottom-right {
51+
bottom: 0;
52+
right: 0;
53+
54+
background: black;
55+
}
56+
</style>
57+
58+
<body>
59+
<div class="containing-block">
60+
<div class="cell" id="anchor-cell"></div>
61+
62+
<div class="cell anchor-positioned-cell" id="top-left"></div>
63+
<div class="cell anchor-positioned-cell" id="top-right"></div>
64+
<div class="cell anchor-positioned-cell" id="bottom-left"></div>
65+
<div class="cell anchor-positioned-cell" id="bottom-right"></div>
66+
</div>
67+
</body>

‎css/css-anchor-position/reference/anchor-size-css-zoom-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+
#containing-block {
5+
position: relative;
6+
7+
zoom: 2;
8+
}
9+
10+
#anchor {
11+
position: absolute;
12+
13+
width: 200px;
14+
height: 100px;
15+
16+
background: red;
17+
}
18+
19+
#anchor-positioned {
20+
position: absolute;
21+
22+
width: 200px;
23+
height: 100px;
24+
25+
background: green;
26+
27+
z-index: 1;
28+
}
29+
</style>
30+
31+
Test passes if no red is visible.
32+
33+
<div id="containing-block">
34+
<div id="anchor"></div>
35+
<div id="anchor-positioned"></div>
36+
</div>

0 commit comments

Comments
 (0)