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
content / test / data / accessibility / html / popover-api.html [blame]
<!--
@MAC-ALLOW:AXExpanded
@WIN-ALLOW:details-from*
@WIN-ALLOW:details-roles*
@WIN-ALLOW:EXPANDED*
@WIN-ALLOW:HASPOPUP*
@WIN-ALLOW:haspopup*
@BLINK-ALLOW:details*
@BLINK-ALLOW:haspopup*
@BLINK-ALLOW:expanded*
@AURALINUX-ALLOW:details-from*
@AURALINUX-ALLOW:details-roles*
@AURALINUX-ALLOW:expanded*
@AURALINUX-ALLOW:haspopup:*
-->
<div popover>Div popover</div>
<ul popover role=listbox><li>Listbox role on ul</li></ul>
<ul popover role=listbox><li>Listbox role on ul</li></ul>
<details popover><summary>summary/details popover</summary></details>
<button popovertarget=popover1>Button pointing to hidden popover</button>
<input type=text popovertarget=popover1>Text input pointing to hidden popover</button>
<div popover id=popover1>Popover</div>
<button popovertarget=manual1 popovertargetaction=hide>Hide button pointing to hidden manual</button>
<input type=email popovertarget=manual1 popovertargetaction=hide>Email input pointing to hidden manual</button>
<div popover=manual id=manual1>Manual</div>
<button popovertarget=hint1>Button pointing to hint popover</button>
<div popover=hint id=hint1>Popover=hint</div>
<button popovertarget=hint2>Button pointing to "rich" hint popover</button>
<div popover=hint id=hint2>Popover=hint <a href="invalid">Link</a></div>
<button popovertarget=noattr>Button pointing to non-popover</button>
<input type=text popovertarget=noattr>Text input pointing to non-popover</button>
<div id=noattr>No popover attribute</div>
<button popovertarget=badattr>Button pointing to invalid popover value</button>
<input type=text popovertarget=badattr>Text input pointing to invalid popover value</button>
<div id=badattr popover=invalid_value>Invalid popover attribute value</div>
<p> Showing/visible popovers below </p>
<button popovertarget=popover2>Button pointing to showing popover</button>
<button popovertarget=popover2 aria-details="">w/o details</button>
<input type=tel popovertarget=popover2>Tel input pointing to showing popover</button>
<button popovertarget=popover3 popovertargetaction=show>Show button pointing to nested popover</button>
<input type=url popovertarget=popover3 popovertargetaction=show>Url input pointing to nested popover</button>
<div popover id=popover2 style="top:100px">Popover (showing)
<div popover id=popover3 style="top:200px">Nested popover (showing)</div>
</div>
<button popovertarget=manual2 popovertargetaction=hide>Hide button pointing to showing manual (should add aria-details)</button>
<input type=url popovertarget=manual2 popovertargetaction=hide>Url input pointing to showing manual</button>
<button popovertarget=manual2 popovertargetaction=hide>Hide button pointing to showing manual (should NOT add aria-details)</button>
<div popover=manual id=manual2>Manual (showing)</div>
<div popover=hint id=hint3 anchor=manual2 style="inset:0;top:300px">Popover=hint (showing) <a href="foo">Link</a></div>
<script>
popover2.showPopover();
popover3.showPopover();
manual2.showPopover();
hint3.showPopover();
</script>