summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element')
-rw-r--r--testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/activation-behavior.html134
-rw-r--r--testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/anchor-with-inline-element.html77
-rw-r--r--testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/anchor-without-link.html40
-rw-r--r--testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/click-behavior-optional.tentative.html39
-rw-r--r--testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/display-table-with-rt-crash.html9
-rw-r--r--testing/web-platform/tests/html/semantics/interactive-elements/the-summary-element/summary-untrusted-key-event.html104
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 &lt;i&gt; 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 &lt;span&gt;. <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">
+ &lt;circle&gt;
+ </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>