1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
<!DOCTYPE html>
<title>CSS Anchor Positioning Test: @position-try and cascade interaction</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-apply">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.cb {
position: relative;
width: 100px;
height: 100px;
background: lightpink;
display: inline-block;
}
.abs {
position: absolute;
background: darkcyan;
left: 0px;
top: 0px;
width: 150px; /* force fallback */
height: 25px;
position-try-fallbacks: --pf;
}
@position-try --pf {
width: 50px;
left: 50px;
top: 50px;
}
</style>
<!-- Basic @position-try rule -->
<div class=cb>
<div id=abs_try class=abs></div>
</div>
<script>
test(() => {
assert_equals(abs_try.offsetLeft, 50);
assert_equals(abs_try.offsetTop, 50);
}, '@position-try rule applies');
</script>
<!-- Inline style -->
<div class=cb>
<div id=abs_inline class=abs style="left:20px"></div>
</div>
<script>
test(() => {
assert_equals(abs_inline.offsetLeft, 50);
assert_equals(abs_inline.offsetTop, 50);
}, '@position-try rule wins over inline style');
</script>
<!-- !important -->
<style>
#abs_important {
left: 10px !important;
}
</style>
<div class=cb>
<div id=abs_important class=abs></div>
</div>
<script>
test(() => {
assert_equals(abs_important.offsetLeft, 10);
assert_equals(abs_important.offsetTop, 50);
}, '@position-try rule does not win over !important');
</script>
<!-- Animations -->
<style>
@keyframes anim {
from { top: 20px; }
to { top: 20px; }
}
#abs_animation {
animation: anim 1000s steps(2, start) paused;
}
</style>
<div class=cb>
<div id=abs_animation class=abs></div>
</div>
<script>
test(() => {
assert_equals(abs_animation.offsetLeft, 50);
assert_equals(abs_animation.offsetTop, 20);
}, '@position-try rule does not win over animations');
</script>
<!-- Transitions -->
<style>
#abs_transition.move {
top: 10px !important;
transition: top 1000s steps(2, start);
</style>
<div class=cb>
<div id=abs_transition class=abs></div>
</div>
<script>
test(() => {
abs_transition.offsetTop;
abs_transition.classList.add('move');
assert_equals(abs_transition.offsetLeft, 50);
assert_equals(abs_transition.offsetTop, 30);
}, '@position-try rule does not win over transitions');
</script>
<!-- revert / revert-layer -->
<style>
#abs_revert {
position-try-fallbacks: --pf-revert;
}
@layer author-layer {
#abs_revert {
top: 30px;
left: 30px;
}
}
#abs_revert {
top: 20px;
left: 20px;
/* overflowing .cb to force --pf-revert to be applied */
width: 200px;
height: 200px;
}
@position-try --pf-revert {
left: revert;
top: revert-layer;
width: 30px;
height: 30px;
}
</style>
<div class=cb class=abs>
<div id=abs_revert class=abs></div>
</div>
<script>
test(() => {
assert_equals(abs_revert.offsetLeft, 0, "left reverted back to user origin");
assert_equals(abs_revert.offsetTop, 20, "top reverted back to author");
assert_equals(abs_revert.offsetWidth, 30, "width from --pf-revert");
assert_equals(abs_revert.offsetHeight, 30, "height from --pf-revert");
}, '@position-try revert / revert-layer reverts to user / author origin');
</script>
|
