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
|
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=author href="mailto:masonf@chromium.org">
<link rel=help href="https://open-ui.org/components/popover.research.explainer">
<link rel=help href="https://html.spec.whatwg.org/multipage/popover.html">
<link rel=match href="popover-anchor-display-ref.html">
<link rel=stylesheet href="/fonts/ahem.css">
<script src="resources/popover-utils.js"></script>
<p>There should be a green box attached to the right side of each orange box.</p>
<div id=proper_anchors class=wrapper>
<!-- Example using the `anchor` implicit reference element -->
<div>
<div class=anchor id=anchor1></div>
<div id=popover1 popover=manual anchor=anchor1></div>
</div>
<!-- Example with `anchor` attribute but not using it for anchor pos -->
<div>
<div id=anchor2 class=anchor></div>
<div id=popover2 popover=manual anchor></div>
</div>
<!-- Example using `anchor-name` plus inset, and no `anchor` attribute -->
<div>
<div id=anchor3 class=anchor></div>
<div id=popover3 popover=manual></div>
</div>
<!-- Example using implicit anchor reference and inline anchor element -->
<div>
<span id=anchor4>X</span>
<div id=popover4 popover=manual anchor=anchor4></div>
</div>
<!-- Example using a default anchor which is not the implicit anchor -->
<div>
<div class=anchor id=anchor5></div>
<!-- Note `anchor=anchor1` here, not anchor5 -->
<div id=popover5 popover=manual anchor=anchor1></div>
</div>
<!-- Example using implicit anchor reference and position-anchor:auto -->
<div>
<div class=anchor id=anchor6></div>
<div id=popover6 popover=manual anchor=anchor6></div>
</div>
</div>
<p>There should NOT be any red boxes next to the orange ones. (Red ones down below are ok.)</p>
<div id=improper_anchors class=wrapper>
<!-- Example using implicit anchor reference and anchor(auto foo)-->
<div>
<div class=anchor id=anchor7></div>
<div id=popover7 popover=manual anchor=anchor7></div>
</div>
<!-- Example using invalid anchor name -->
<div>
<div class=anchor id=anchor8></div>
<div id=popover8 popover=manual anchor=anchor8></div>
</div>
</div>
<script>
Array.from(document.querySelectorAll('[popover=manual]')).forEach(p => p.showPopover());
</script>
<style>
body { margin:0; padding:0; box-sizing: border-box; }
p {height: 25px;}
.wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.wrapper>div {
position:relative;
width: 125px;
height: 75px;
}
.wrapper>div div {
width: 50px;
height: 50px;
}
.anchor {
background: orange;
}
[popover] {
inset: auto;
padding:0;
border:0;
}
#proper_anchors [popover] {
background: lime;
}
#improper_anchors [popover] {
background: red;
}
#popover1 {
left: anchor(right);
top: anchor(top);
}
#anchor2 {
anchor-name: --anchor2;
}
#popover2 {
left: anchor(--anchor2 right);
top: anchor(--anchor2 top);
}
#anchor3 {
anchor-name: --anchor3;
}
#popover3 {
inset:auto;
left: anchor(--anchor3 right);
top: anchor(--anchor3 top);
}
#anchor4 {
font-family: Ahem;
font-size: 50px;
color: orange;
}
#popover4 {
left: anchor(right);
top: anchor(top);
}
#anchor5 {
anchor-name: --anchor5;
}
#popover5 {
position-anchor: --anchor5;
left: anchor(right); /* shouldn't use the implicit anchor */
top: anchor(top);
}
#popover6 {
position-anchor: auto;
left: anchor(right);
top: anchor(top);
}
#popover7 {
left: anchor(auto right);
top: anchor(auto top);
}
#popover8 {
/* The `implicit` keyword was renamed to `auto`, and anyway should not
work in this context. */
left: anchor(implicit right);
top: anchor(implicit top);
}
</style>
|
