-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
134 additions
and
0 deletions.
There are no files selected for viewing
134 changes: 134 additions & 0 deletions
134
html/semantics/interactive-elements/the-summary-element/activation-behavior.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,134 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>summary element: activation behavior</title> | ||
| <link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me"> | ||
| <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-summary-element"> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
|
|
||
| <div id="log"></div> | ||
|
|
||
| <details id="happy-path-starts-closed"> | ||
| <summary id="happy-path-starts-closed-summary">Summary</summary> | ||
| <p>Contents</p> | ||
| </details> | ||
|
|
||
| <details id="happy-path-starts-open" open> | ||
| <summary id="happy-path-starts-open-summary">Summary</summary> | ||
| <p>Contents</p> | ||
| </details> | ||
|
|
||
| <details id="details-not-being-rendered" style="display: none"> | ||
| <summary id="details-not-being-rendered-summary">Summary</summary> | ||
| <p>Contents</p> | ||
| </details> | ||
|
|
||
| <details id="summary-not-being-rendered"> | ||
| <summary id="summary-not-being-rendered-summary" style="display: none">Summary</summary> | ||
| <p>Contents</p> | ||
| </details> | ||
|
|
||
| <details id="has-preceding-element"> | ||
| <span></span> | ||
| <summary id="has-preceding-element-summary">Summary</summary> | ||
| <p>Contents</p> | ||
| </details> | ||
|
|
||
| <details id="has-preceding-summary"> | ||
| <summary>Summary 1</summary> | ||
| <summary id="has-preceding-summary-summary">Summary 2</summary> | ||
| <p>Contents</p> | ||
| </details> | ||
|
|
||
| <details id="has-preceding-summary-descendant"> | ||
| <span><summary>Summary 1</summary></span> | ||
| <summary id="has-preceding-summary-descendant-summary">Summary 2</summary> | ||
| <p>Contents</p> | ||
| </details> | ||
|
|
||
| <details id="summary-nested"> | ||
| <span><summary id="summary-nested-summary">Summary</summary></span> | ||
| <p>Contents</p> | ||
| </details> | ||
|
|
||
| <details id="toggle-tester"> | ||
| <summary>Summary</summary> | ||
| <p>Contents</p> | ||
| </details> | ||
|
|
||
| <script> | ||
| "use strict"; | ||
|
|
||
| testSummary( | ||
| "happy-path-starts-closed", false, true, | ||
| "Should open a closed details if all conditions are met" | ||
| ); | ||
|
|
||
| testSummary( | ||
| "happy-path-starts-open", true, false, | ||
| "Should close an open details if all conditions are met" | ||
| ); | ||
|
|
||
| testSummary( | ||
| "details-not-being-rendered", false, true, | ||
| "Should open a closed details even if the details is not being rendered" | ||
| ); | ||
|
|
||
| testSummary( | ||
| "summary-not-being-rendered", false, true, | ||
| "Should open a closed details even if the summary is not being rendered" | ||
| ); | ||
|
|
||
| testSummary( | ||
| "has-preceding-element", false, true, | ||
| "Should open a closed details if a span element precedes the summary" | ||
| ); | ||
|
|
||
| testSummary( | ||
| "has-preceding-summary", false, false, | ||
| "Should stay closed if another summary element precedes the summary" | ||
| ); | ||
|
|
||
| testSummary( | ||
| "has-preceding-summary-descendant", false, true, | ||
| "Should open a closed details if another summary element *nested inside a span* precedes the summary" | ||
| ); | ||
|
|
||
| testSummary( | ||
| "summary-nested", false, false, | ||
| "Should stay closed if the summary element is nested inside a span element" | ||
| ); | ||
|
|
||
| async_test(t => { | ||
| const details = document.getElementById("toggle-tester"); | ||
| const summary = details.firstElementChild; | ||
|
|
||
| let timesToggleFired = 0; | ||
| details.addEventListener("toggle", t.step_func(() => { | ||
| ++timesToggleFired; | ||
| })); | ||
|
|
||
| t.step_timeout(() => { | ||
| assert_equals(timesToggleFired, 1, "Expected toggle to fire exactly once"); | ||
| t.done(); | ||
| }, 200); | ||
|
|
||
| summary.click(); | ||
| summary.click(); | ||
| summary.click(); | ||
| summary.click(); | ||
| Promise.resolve().then(() => summary.click()); | ||
|
|
||
| }, "toggle events should be coalesced even when using the activation behavior of a summary"); | ||
|
|
||
| function testSummary(detailsId, expectedBefore, expectedAfter, name) { | ||
| test(() => { | ||
| const details = document.getElementById(detailsId); | ||
| const summary = document.getElementById(detailsId + "-summary"); | ||
|
|
||
| assert_equals(details.open, expectedBefore, "Before activation: expected open to be " + expectedBefore); | ||
| summary.click(); | ||
| assert_equals(details.open, expectedAfter, "After activation: expected open to be " + expectedAfter); | ||
| }, name); | ||
| } | ||
| </script> |