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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
<!DOCTYPE html>
<title>CSS Anchor Positioning Test: @position-try - tree scoped names</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-rule">
<link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
body { margin: 0; }
@position-try --doc {
left: 100px;
}
.abs {
width: 100px;
position: absolute;
left: 999999px; /* force fallback */
}
#doc_pf_doc { position-try-fallbacks: --doc; }
#doc_pf_outer { position-try-fallbacks: --outer; }
#doc_pf_inner { position-try-fallbacks: --inner; }
</style>
<div id="doc_pf_doc" class="abs"></div>
<div id="doc_pf_outer" class="abs"></div>
<div id="doc_pf_inner" class="abs"></div>
<div id="outer_host">
<template shadowrootmode="open">
<style>
@position-try --outer {
left: 200px;
}
.abs {
position: absolute;
left: 999999px; /* force fallback */
}
#outer_pf_doc { position-try-fallbacks: --doc; }
#outer_pf_outer { position-try-fallbacks: --outer; }
#outer_pf_inner { position-try-fallbacks: --inner; }
</style>
<div id="outer_pf_doc" class="abs"></div>
<div id="outer_pf_outer" class="abs"></div>
<div id="outer_pf_inner" class="abs"></div>
<div id="inner_host">
<template shadowrootmode="open">
<style>
@position-try --inner {
left: 300px;
}
.abs {
position: absolute;
left: 999999px; /* force fallback */
}
#inner_pf_doc { position-try-fallbacks: --doc; }
#inner_pf_outer { position-try-fallbacks: --outer; }
#inner_pf_inner { position-try-fallbacks: --inner; }
</style>
<div id="inner_pf_doc" class="abs"></div>
<div id="inner_pf_outer" class="abs"></div>
<div id="inner_pf_inner" class="abs"></div>
</template>
</div>
</template>
</div>
<style>
#host_slotted_part {
width: 100px;
}
@position-try --host-slot-part {
left: 1px;
}
#host_slotted_part::part(part) {
position-try-fallbacks: --host-slot-part;
}
</style>
<div id="host_slotted_part">
<template shadowrootmode="open">
<style>
@position-try --host-slot-part {
left: 2px;
}
::slotted(#slotted), :host {
position: absolute;
left: 999999px; /* force fallback */
position-try-fallbacks: --host-slot-part;
}
#part {
position: absolute;
left: 999999px; /* force fallback */
}
</style>
<div id="part" part="part"></div>
<slot></slot>
</template>
<div id="slotted"></div>
</div>
<script>
test(() => {
assert_equals(doc_pf_doc.offsetLeft, 100);
}, "Document position-try-fallbacks matches @position-try in document scope");
test(() => {
assert_equals(doc_pf_outer.offsetLeft, 999999);
}, "Document position-try-fallbacks does not match @position-try in #outer_host scope");
test(() => {
assert_equals(doc_pf_inner.offsetLeft, 999999);
}, "Document position-try-fallbacks does not match @position-try in #inner_host scope");
const outer_root = outer_host.shadowRoot;
const inner_root = outer_root.querySelector("#inner_host").shadowRoot;
test(() => {
assert_equals(outer_root.querySelector("#outer_pf_doc").offsetLeft, 100);
}, "Outer position-try-fallbacks matches @position-try in document scope");
test(() => {
assert_equals(outer_root.querySelector("#outer_pf_outer").offsetLeft, 200);
}, "Outer position-try-fallbacks matches @position-try in #outer_host scope");
test(() => {
assert_equals(outer_root.querySelector("#outer_pf_inner").offsetLeft, 999999);
}, "Outer position-try-fallbacks does not match @position-try in #inner_host scope");
test(() => {
assert_equals(inner_root.querySelector("#inner_pf_doc").offsetLeft, 100)
}, "Inner position-try-fallbacks matches @position-try in document scope");
test(() => {
assert_equals(inner_root.querySelector("#inner_pf_outer").offsetLeft, 200);
}, "Inner position-try-fallbacks matches @position-try in #outer_host scope");
test(() => {
assert_equals(inner_root.querySelector("#inner_pf_inner").offsetLeft, 300);
}, "Inner position-try-fallbacks matches @position-try in #inner_host scope");
test(() => {
assert_equals(host_slotted_part.offsetLeft, 2);
}, "@position-try from same scope as :host rule");
test(() => {
assert_equals(slotted.offsetLeft, 2);
}, "@position-try from same scope as ::slotted() rule");
test(() => {
assert_equals(host_slotted_part.shadowRoot.querySelector("#part").offsetLeft, 1);
}, "@position-try from same scope as ::part() rule");
</script>
|
