Skip to content

Commit 2065c4f

Browse files
domenicdomenic
authored
Merge 244ffba into 4b4b2ee 
2 parents 4b4b2ee + 244ffba commit 2065c4f

File tree

1 file changed

+134
-0
lines changed

1 file changed

+134
-0
lines changed

‎html/semantics/interactive-elements/the-summary-element/activation-behavior.html

+134
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>summary element: activation behavior</title>
4+
<link rel="author" title="Domenic Denicola" href="mailto:[email protected]">
5+
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-summary-element">
6+
<script src="/resources/testharness.js"></script>
7+
<script src="/resources/testharnessreport.js"></script>
8+
9+
<div id="log"></div>
10+
11+
<details id="happy-path-starts-closed">
12+
<summary id="happy-path-starts-closed-summary">Summary</summary>
13+
<p>Contents</p>
14+
</details>
15+
16+
<details id="happy-path-starts-open" open>
17+
<summary id="happy-path-starts-open-summary">Summary</summary>
18+
<p>Contents</p>
19+
</details>
20+
21+
<details id="details-not-being-rendered" style="display: none">
22+
<summary id="details-not-being-rendered-summary">Summary</summary>
23+
<p>Contents</p>
24+
</details>
25+
26+
<details id="summary-not-being-rendered">
27+
<summary id="summary-not-being-rendered-summary" style="display: none">Summary</summary>
28+
<p>Contents</p>
29+
</details>
30+
31+
<details id="has-preceding-element">
32+
<span></span>
33+
<summary id="has-preceding-element-summary">Summary</summary>
34+
<p>Contents</p>
35+
</details>
36+
37+
<details id="has-preceding-summary">
38+
<summary>Summary 1</summary>
39+
<summary id="has-preceding-summary-summary">Summary 2</summary>
40+
<p>Contents</p>
41+
</details>
42+
43+
<details id="has-preceding-summary-descendant">
44+
<span><summary>Summary 1</summary></span>
45+
<summary id="has-preceding-summary-descendant-summary">Summary 2</summary>
46+
<p>Contents</p>
47+
</details>
48+
49+
<details id="summary-nested">
50+
<span><summary id="summary-nested-summary">Summary</summary></span>
51+
<p>Contents</p>
52+
</details>
53+
54+
<details id="toggle-tester">
55+
<summary>Summary</summary>
56+
<p>Contents</p>
57+
</details>
58+
59+
<script>
60+
"use strict";
61+
62+
testSummary(
63+
"happy-path-starts-closed", false, true,
64+
"Should open a closed details if all conditions are met"
65+
);
66+
67+
testSummary(
68+
"happy-path-starts-open", true, false,
69+
"Should close an open details if all conditions are met"
70+
);
71+
72+
testSummary(
73+
"details-not-being-rendered", false, true,
74+
"Should open a closed details even if the details is not being rendered"
75+
);
76+
77+
testSummary(
78+
"summary-not-being-rendered", false, true,
79+
"Should open a closed details even if the summary is not being rendered"
80+
);
81+
82+
testSummary(
83+
"has-preceding-element", false, true,
84+
"Should open a closed details if a span element precedes the summary"
85+
);
86+
87+
testSummary(
88+
"has-preceding-summary", false, false,
89+
"Should stay closed if another summary element precedes the summary"
90+
);
91+
92+
testSummary(
93+
"has-preceding-summary-descendant", false, true,
94+
"Should open a closed details if another summary element *nested inside a span* precedes the summary"
95+
);
96+
97+
testSummary(
98+
"summary-nested", false, false,
99+
"Should stay closed if the summary element is nested inside a span element"
100+
);
101+
102+
async_test(t => {
103+
const details = document.getElementById("toggle-tester");
104+
const summary = details.firstElementChild;
105+
106+
let timesToggleFired = 0;
107+
details.addEventListener("toggle", t.step_func(() => {
108+
++timesToggleFired;
109+
}));
110+
111+
t.step_timeout(() => {
112+
assert_equals(timesToggleFired, 1, "Expected toggle to fire exactly once");
113+
t.done();
114+
}, 200);
115+
116+
summary.click();
117+
summary.click();
118+
summary.click();
119+
summary.click();
120+
Promise.resolve().then(() => summary.click());
121+
122+
}, "toggle events should be coalesced even when using the activation behavior of a summary");
123+
124+
function testSummary(detailsId, expectedBefore, expectedAfter, name) {
125+
test(() => {
126+
const details = document.getElementById(detailsId);
127+
const summary = document.getElementById(detailsId + "-summary");
128+
129+
assert_equals(details.open, expectedBefore, "Before activation: expected open to be " + expectedBefore);
130+
summary.click();
131+
assert_equals(details.open, expectedAfter, "After activation: expected open to be " + expectedAfter);
132+
}, name);
133+
}
134+
</script>

0 commit comments

Comments
 (0)