Skip to content

Commit de6079c

Browse files
josepharharchromium-wpt-export-bot
josepharhar
authored and
chromium-wpt-export-bot
committed
Move disabled check for popover*target attributes
Anne asked for this here: whatwg/html#8221 (comment) Change-Id: I129cf2768abc717292b86ea26f7522019ce36d33
1 parent 2fca8e9 commit de6079c

File tree

1 file changed

+127
-0
lines changed

1 file changed

+127
-0
lines changed

‎html/semantics/popovers/popover-target-element-disabled.html

+127
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!DOCTYPE html>
2+
<link rel=author href="mailto:[email protected]">
3+
<link rel=help href="https://github.com/whatwg/html/pull/8221#discussion_r1049379113">
4+
<link rel=help href="https://chromium-review.googlesource.com/c/chromium/src/+/4115790">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
8+
<div id=outerpopover popover=auto>
9+
<button popovertoggletarget=innerpopover disabled>toggle popover</button>
10+
</div>
11+
<div id=innerpopover popover=auto>popover</div>
12+
<script>
13+
test(() => {
14+
outerpopover.showPopover();
15+
innerpopover.showPopover();
16+
assert_true(innerpopover.matches(':open'),
17+
'The inner popover should be able to open successfully.');
18+
assert_false(outerpopover.matches(':open'),
19+
'The outer popover should be closed by opening the inner one.');
20+
}, 'Disabled popover*target buttons should not affect the popover heirarchy.');
21+
</script>
22+
23+
<div id=outerpopover2 popover=auto>
24+
<button id=togglebutton2 popovertoggletarget=innerpopover2>toggle popover</button>
25+
</div>
26+
<div id=innerpopover2 popover=auto>popover</div>
27+
<script>
28+
test(() => {
29+
outerpopover2.showPopover();
30+
innerpopover2.showPopover();
31+
assert_true(innerpopover2.matches(':open'),
32+
'The inner popover should be able to open successfully.');
33+
assert_true(outerpopover2.matches(':open'),
34+
'The outer popover should stay open when opening the inner one.');
35+
36+
togglebutton2.disabled = true;
37+
assert_false(innerpopover2.matches(':open'),
38+
'The inner popover should be closed when the hierarchy is broken.');
39+
assert_false(outerpopover2.matches(':open'),
40+
'The outer popover should be closed when the hierarchy is broken.');
41+
}, 'Disabling popover*target buttons when popovers are open should still cause all popovers to be closed when the formerly outer popover is closed.');
42+
</script>
43+
44+
<div id=outerpopover3 popover=auto>
45+
<button id=togglebutton3 popovertoggletarget=innerpopover3>toggle popover</button>
46+
</div>
47+
<div id=innerpopover3 popover=auto>popover</div>
48+
<script>
49+
test(() => {
50+
outerpopover3.showPopover();
51+
innerpopover3.showPopover();
52+
assert_true(innerpopover3.matches(':open'),
53+
'The inner popover should be able to open successfully.');
54+
assert_true(outerpopover3.matches(':open'),
55+
'The outer popover should stay open when opening the inner one.');
56+
57+
togglebutton3.disabled = true;
58+
assert_false(innerpopover3.matches(':open'),
59+
'The inner popover be should be closed when the hierarchy is broken.');
60+
assert_false(outerpopover3.matches(':open'),
61+
'The outer popover be should be closed when the hierarchy is broken.');
62+
}, 'Disabling popover*target buttons when popovers are open should still cause all popovers to be closed when the formerly inner popover is closed.');
63+
</script>
64+
65+
<div id=outerpopover4 popover=auto>
66+
<button id=togglebutton4 popovertoggletarget=innerpopover4>toggle popover</button>
67+
</div>
68+
<div id=innerpopover4 popover=auto>popover</div>
69+
<form id=submitform>form</form>
70+
<script>
71+
test(() => {
72+
outerpopover4.showPopover();
73+
innerpopover4.showPopover();
74+
assert_true(innerpopover4.matches(':open'),
75+
'The inner popover should be able to open successfully.');
76+
assert_true(outerpopover4.matches(':open'),
77+
'The outer popover should stay open when opening the inner one.');
78+
79+
togglebutton4.setAttribute('form', 'submitform');
80+
assert_false(innerpopover4.matches(':open'),
81+
'The inner popover be should be closed when the hierarchy is broken.');
82+
assert_false(outerpopover4.matches(':open'),
83+
'The outer popover be should be closed when the hierarchy is broken.');
84+
}, 'Setting the form attribute on popover*target buttons when popovers are open should close all popovers.');
85+
</script>
86+
87+
<div id=outerpopover5 popover=auto>
88+
<input type=button id=togglebutton5 popovertoggletarget=innerpopover5>toggle popover</button>
89+
</div>
90+
<div id=innerpopover5 popover=auto>popover</div>
91+
<script>
92+
test(() => {
93+
outerpopover5.showPopover();
94+
innerpopover5.showPopover();
95+
assert_true(innerpopover5.matches(':open'),
96+
'The inner popover should be able to open successfully.');
97+
assert_true(outerpopover5.matches(':open'),
98+
'The outer popover should stay open when opening the inner one.');
99+
100+
togglebutton5.setAttribute('type', 'text');
101+
assert_false(innerpopover5.matches(':open'),
102+
'The inner popover be should be closed when the hierarchy is broken.');
103+
assert_false(outerpopover5.matches(':open'),
104+
'The outer popover be should be closed when the hierarchy is broken.');
105+
}, 'Changing the input type on a popover*target button when popovers are open should close all popovers.');
106+
</script>
107+
108+
<div id=outerpopover6 popover=auto>
109+
<button id=togglebutton6 popovertoggletarget=innerpopover6>toggle popover</button>
110+
</div>
111+
<div id=innerpopover6 popover=auto>popover</div>
112+
<script>
113+
test(() => {
114+
outerpopover6.showPopover();
115+
innerpopover6.showPopover();
116+
assert_true(innerpopover6.matches(':open'),
117+
'The inner popover should be able to open successfully.');
118+
assert_true(outerpopover6.matches(':open'),
119+
'The outer popover should stay open when opening the inner one.');
120+
121+
togglebutton6.remove();
122+
assert_false(innerpopover6.matches(':open'),
123+
'The inner popover be should be closed when the hierarchy is broken.');
124+
assert_false(outerpopover6.matches(':open'),
125+
'The outer popover be should be closed when the hierarchy is broken.');
126+
}, 'Disconnecting popover*target buttons when popovers are open should close all popovers.');
127+
</script>

0 commit comments

Comments
 (0)