diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element')
6 files changed, 403 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/activation-behavior.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/activation-behavior.html new file mode 100644 index 0000000000..4a3693bd2d --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/activation-behavior.html @@ -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> diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/anchor-with-inline-element.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/anchor-with-inline-element.html new file mode 100644 index 0000000000..6910a5de93 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/anchor-with-inline-element.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>summary element: clicking on anchor containing inline element</title> +<link rel="author" title="Yu Han" href="mailto:yuzhehan@chromium.org"> +<link rel="help" href="https://html.spec.whatwg.org/C/#the-summary-element"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<details id="details_i"> + <summary>Anchor text is wrapped with <i> tag <a href="#with_i_tag"><i id="with_i">permalink</i></a></summary> + <p>asdf</p> +</details> + +<details id="details_span"> + <summary>This one uses <span>. <a href="#with_span_tag"><span id="with_span">permalink</span></a></summary> + <p>asdf</p> +</details> + +<details id="details_svg"> + <summary> + <svg style="width: 100px;" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <a href="#inside_svg_w_circle"> + <circle id="svg_circle" cx="50" cy="40" r="35"/> + </a> + <a href="#inside_svg_w_text"> + <text id="svg_text" x="50" y="90" text-anchor="middle"> + <circle> + </text> + </a> + </svg> + </summary> + <p>asdf</p> +</details> + +<script> +function testClickingOnInlineElement(detailsId, targetId, expected, testName) { + const details = document.getElementById(detailsId); + const target = document.getElementById(targetId); + const test = async_test(testName); + + const promise = new Promise((resolve, reject) => { + window.onhashchange = test.step_func_done(() => { + assert_false(details.open); + assert_equals(location.hash, expected); + resolve(); + }); + }); + + if (target.click) { + target.click(); + } + else { + // svg element don't have click method + target.dispatchEvent(new MouseEvent('click', { + view: window, + bubbles: true, + cancelable: true + })); + } + return promise; +}; + +async function testAll() { + try { + await testClickingOnInlineElement("details_i", "with_i", "#with_i_tag", "Expected <a> containing <i> to navigate"); + await testClickingOnInlineElement("details_span", "with_span", "#with_span_tag", "Expected <a> containing <span> to navigate"); + await testClickingOnInlineElement("details_svg", "svg_circle", "#inside_svg_w_circle", "Expected <a>, inside svg, containing <circle> to navigate"); + await testClickingOnInlineElement("details_svg", "svg_text", "#inside_svg_w_text", "Expected <a>, inside svg, containing <text> to navigate"); + } catch (exception) { + assert_unreached("should NOT-THROW exception"); + } +}; + +var allTests = async_test("Clicking on anchor with embedded inline element should navigate instead of opening details"); +testAll().then(()=>{ allTests.done(); }); +</script>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/anchor-without-link.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/anchor-without-link.html new file mode 100644 index 0000000000..edaf786b25 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/anchor-without-link.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>summary element: clicking on anchor without link</title> +<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org"> +<link rel="help" href="https://html.spec.whatwg.org/C/#the-summary-element"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<details id="details"> + <summary><a id="no_inline">Details</a></summary> + <p>Text</p> +</details> + +<details id="details_inline"> + <summary><a><i id="has_inline">Details</i></a></summary> + <p>Text</p> +</details> + + +<script> + +async function testClickingOnAnchorWithoutLink (detailsId, targetId) { + const details = document.getElementById(detailsId); + const target = document.getElementById(targetId); + const initialLoc = location.hash; + + assert_false(details.open); + target.click(); + assert_true(details.open); + assert_equals(location.hash, initialLoc); +} + +promise_test(() => testClickingOnAnchorWithoutLink('details', 'no_inline'), + "clicking on anchor without link should open details and not navigate."); + +promise_test(() => testClickingOnAnchorWithoutLink('details_inline', 'has_inline'), + "clicking on anchor without link, with embedded inline element should open details and not navigate."); + +</script> diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/click-behavior-optional.tentative.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/click-behavior-optional.tentative.html new file mode 100644 index 0000000000..4418413fef --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/click-behavior-optional.tentative.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>summary element: click behavior</title> +<link rel="author" title="Mu-An Chiou" href="mailto:hi@muan.co"> +<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> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> + +<body> + <div id="log"></div> + + <details id="details"> + <summary id="summary">Summary</summary> + <p>Contents</p> + </details> +</body> + +<script> + // This behavior is not specified by HTML standards, but setting focus on + // clicked summary tag is the current behavior on Chrome, Safari, and Firefox + // in both Windows and macOS. + async_test(t => { + const details = document.getElementById("details") + const summary = document.getElementById("summary") + + t.step_timeout(() => { + details.addEventListener("toggle", t.step_func_done(function () { + assert_equals(details.open, true, "details should be open") + assert_equals(document.activeElement, summary, "active element should be summary") + t.done() + })) + + new test_driver.click(summary) + }, 200) + }, "clicking on summary should open details and set focus on summary") +</script> diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/display-table-with-rt-crash.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/display-table-with-rt-crash.html new file mode 100644 index 0000000000..57cc45478e --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/display-table-with-rt-crash.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=969619"> +<summary style="display:table;"><rt></rt></summary> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { }, "No crash"); +</script> diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/summary-untrusted-key-event.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/summary-untrusted-key-event.html new file mode 100644 index 0000000000..21b66d52e7 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/summary-untrusted-key-event.html @@ -0,0 +1,104 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Summary</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +</head> +<body> +<div id="log"></div> +<details> + <summary>Summary</summary> + Details +</details> +<script type="module"> +const details = document.querySelector("details"); +details.addEventListener("toggle", + (e) => assert_true(false, 'details should not be toggled')); + +const summary = document.querySelector("summary"); +summary.addEventListener("click", + (e) => assert_true(false, `summary should not be clicked`)); + +test(() => { + // keyCode: Enter + summary.dispatchEvent( + new KeyboardEvent("keypress", { + keyCode: 13, + }) + ); + + // key: Enter + summary.dispatchEvent( + new KeyboardEvent("keypress", { + key: "Enter", + }) + ); + + // keyCode: Space + summary.dispatchEvent( + new KeyboardEvent("keypress", { + keyCode: 32, + }) + ); + + // key: Space + summary.dispatchEvent( + new KeyboardEvent("keypress", { + key: " ", + }) + ); +}, `Dispatching untrusted keypress events to summary should not cause click event`); + +test(() => { + // keyCode: Enter + summary.dispatchEvent( + new KeyboardEvent("keydown", { + keyCode: 13, + }) + ); + summary.dispatchEvent( + new KeyboardEvent("keyup", { + keyCode: 13, + }) + ); + + // key: Enter + summary.dispatchEvent( + new KeyboardEvent("keydown", { + key: "Enter", + }) + ); + summary.dispatchEvent( + new KeyboardEvent("keyup", { + key: "Enter", + }) + ); + + // keyCode: Space + summary.dispatchEvent( + new KeyboardEvent("keydown", { + keyCode: 32, + }) + ); + summary.dispatchEvent( + new KeyboardEvent("keyup", { + keyCode: 32, + }) + ); + + // key: Space + summary.dispatchEvent( + new KeyboardEvent("keydown", { + key: " ", + }) + ); + summary.dispatchEvent( + new KeyboardEvent("keyup", { + key: " ", + }) + ); +}, `Dispatching untrusted keyup/keydown events to summary should not cause click event`); +</script> +</body> +</html> |