diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/interactive-elements/the-details-element')
15 files changed, 506 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/auto-expand-ax-slot-recalc-crash.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/auto-expand-ax-slot-recalc-crash.html new file mode 100644 index 0000000000..0ecd30dda3 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/auto-expand-ax-slot-recalc-crash.html @@ -0,0 +1,28 @@ +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255406"> +<script type="text/javascript"> +var nodes = Array(); +var text = Array(); + { + nodes[9] = document.createElement('textarea'); + nodes[11] = document.createElement('legend'); + nodes[44] = document.createElement('details'); + document.documentElement.appendChild(nodes[44]); + nodes[68] = document.createElement('fieldset'); + nodes[81] = document.createElement('option'); + + + + nodes[85] = document.createElement('img'); + text[42] = document.createTextNode('744879385'); + nodes[44].appendChild(text[42]); + nodes[68].appendChild(nodes[11]); + nodes[44].appendChild(nodes[68]); + requestAnimationFrame(() => { + requestAnimationFrame(() => { + try { nodes[85].appendChild(nodes[68]); } catch(e) {} + }); + }); + nodes[44].appendChild(nodes[9]); + requestAnimationFrame(() => { document.execCommand("SelectAll", false, ""); }); +} +</script> diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/auto-expand-details-element-fragment.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/auto-expand-details-element-fragment.html new file mode 100644 index 0000000000..d3d04f07a1 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/auto-expand-details-element-fragment.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<link rel="author" title="Joey Arhar" href="mailto:jarhar@chromium.org"> +<link rel="help" href="https://github.com/whatwg/html/pull/6466"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div style="height:2000px">spacer</div> + +<details id=details> + <div id=target>target</div> +</details> + +<script> +async_test(t => { + assert_false(details.hasAttribute('open'), + `The <details> should be closed at the start of the test.`); + assert_equals(window.pageYOffset, 0, + `The page should be scrolled to the top at the start of the test.`); + + window.location.hash = '#target'; + + requestAnimationFrame(t.step_func_done(() => { + assert_true(details.hasAttribute('open'), + `<details> should be opened by navigating to an element inside it.`); + assert_not_equals(window.pageYOffset, 0, + `The page should be scrolled down to the <details> element.`); + })); +}); +</script> diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/auto-expand-window-find-crash.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/auto-expand-window-find-crash.html new file mode 100644 index 0000000000..d24b4634cd --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/auto-expand-window-find-crash.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1264704"> + +<script> +function runTest() { + details2.appendChild(child); + document.caretRangeFromPoint(); +} +</script> + +<body onload=runTest()> + +<details style="writing-mode: vertical-rl"> + <div id=child>foo</div> +</details> + +<details id=details2 open=true ontoggle="window.find()"> diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/closed-details-layout-apis.tentative.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/closed-details-layout-apis.tentative.html new file mode 100644 index 0000000000..1936cdb67d --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/closed-details-layout-apis.tentative.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/whatwg/html/pull/6466"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<details id=details> + <div style="width:100px; height:100px; background-color:red" id=innerdiv></div> +</details> + +<script> +test(() => { + assert_not_equals(innerdiv.getBoundingClientRect().x, 0, 'x before open'); + assert_not_equals(innerdiv.getBoundingClientRect().y, 0, 'y before open'); + assert_not_equals(innerdiv.getBoundingClientRect().width, 0, 'width before open'); + assert_not_equals(innerdiv.getBoundingClientRect().height, 0, 'height before open'); + details.open = true; + assert_not_equals(innerdiv.getBoundingClientRect().x, 0, 'x after open'); + assert_not_equals(innerdiv.getBoundingClientRect().y, 0, 'y after open'); + assert_not_equals(innerdiv.getBoundingClientRect().width, 0, 'width after open'); + assert_not_equals(innerdiv.getBoundingClientRect().height, 0, 'height after open'); + details.open = false; + assert_not_equals(innerdiv.getBoundingClientRect().x, 0, 'x after close'); + assert_not_equals(innerdiv.getBoundingClientRect().y, 0, 'y after close'); + assert_not_equals(innerdiv.getBoundingClientRect().width, 0, 'width after close'); + assert_not_equals(innerdiv.getBoundingClientRect().height, 0, 'height after close'); +}, `Verifies the layout results of elements inside a closed <details> based on the usage of content-visibility:hidden.`); +</script> diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/details-add-summary-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/details-add-summary-ref.html new file mode 100644 index 0000000000..14f2be232f --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/details-add-summary-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<details> + <summary>new summary</summary> + details +</details> diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/details-add-summary.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/details-add-summary.html new file mode 100644 index 0000000000..1b0062e43a --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/details-add-summary.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel=match href="details-add-summary-ref.html"> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/whatwg/html/pull/6466"> + +<!-- This test makes sure that new <summary> elements get rendered correctly + when added to a <details> element. I ran into it when adding + content-visibility:hidden to the second slot of <details>. --> + +<script> +onload = () => { + const newsummary = document.createElement('summary'); + newsummary.textContent = 'new summary'; + document.getElementById('detailsid').insertBefore(newsummary, + document.getElementById('oldsummary')); + + document.documentElement.classList.remove('reftest-wait'); +}; +</script> + +<details id=detailsid> + <summary id=oldsummary>old summary</summary> + details +</details> diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/details-cq-crash.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/details-cq-crash.html new file mode 100644 index 0000000000..393e464c4c --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/details-cq-crash.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel=author href="mailto:vmpstr@chromium.org"> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1334983"> + +<canvas> + <details> + <card card> + +<script> +async function trigger() { + document.querySelector("canvas").style.setProperty("container-type", "size"); + document.querySelector("canvas").style.setProperty("column-span", "all"); + document.querySelector("card").setAttribute("contenteditable", "true"); +} +onload = requestAnimationFrame(() => requestAnimationFrame(trigger)); +</script> diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/details-findstring-crash.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/details-findstring-crash.html new file mode 100644 index 0000000000..dc8686b216 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/details-findstring-crash.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1264507"> + +<script> +window.onload = () => { + window.getSelection().selectAllChildren(document.body); + document.querySelector('object').remove(); + document.execCommand('FindString',false,0); +}; +</script> + +<details> + <object id='id6'></object> +</details> diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/details-keyboard-activation.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/details-keyboard-activation.html new file mode 100644 index 0000000000..a5534e24d1 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/details-keyboard-activation.html @@ -0,0 +1,52 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Details activation with space bar</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1726454"> +<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> +<style> +:root { + scroll-behavior: instant; +} +.spacer { + height: 200vh; +} +</style> +<details> + <summary>Activate me with the <kbd>Space</kbd> key</summary> + <p>Summary</p> +</details> +<div class="spacer"></div> +<script> +function tick() { + return new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve))); +} + +promise_test(async t => { + const details = document.querySelector("details"); + const summary = details.querySelector("summary"); + + summary.focus(); + assert_equals(document.activeElement, summary, "Summary should be focusable"); + assert_false(details.open, "Details should be closed"); + + const oldScrollY = window.scrollY; + assert_equals(oldScrollY, 0, "Should be at top"); + + window.addEventListener("scroll", t.unreached_func("Unexpected scroll event")); + + await test_driver.send_keys(summary, " "); + + assert_true(details.open, "Space bar on summary should open details"); + assert_equals(window.scrollY, oldScrollY, "Scroll position shouldn't change"); + + await tick(); + + assert_equals(window.scrollY, oldScrollY, "Scroll position shouldn't change"); +}); +</script> diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/details.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/details.html new file mode 100644 index 0000000000..5ed14c53af --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/details.html @@ -0,0 +1,47 @@ +<!doctype html> +<html> + <head> + <title>HTML details element API</title> + <style>#one, #two { visibility: hidden; }</style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <div id="log"></div> + + <!-- Used in parsing tests --> + <div id='one'><details></details><details></details></div> + <div id='two'><p><details></details></div> + + <script type="text/javascript"> + +function makeDetails () { + return document.createElement('details'); +} + + +// <details> +test(function () { + var times = document.getElementById('one').getElementsByTagName('details'); + assert_equals( times.length, 2 ); +}, 'HTML parsing should locate 2 details elements in this document'); + +test(function () { + assert_equals( document.getElementById('two').getElementsByTagName('p')[0].innerHTML, '' ); +}, 'HTML parsing should close an unclosed <p> before <details>'); + +test(function () { + assert_true( !!window.HTMLDetailsElement ); +}, 'HTMLDetailsElement should be exposed for prototyping'); + +test(function () { + assert_true( makeDetails() instanceof window.HTMLDetailsElement); +}, 'a dynamically created details element should be instanceof HTMLDetailsElement'); + +test(function () { + assert_true( document.getElementById('one').getElementsByTagName('details')[0] instanceof window.HTMLDetailsElement); +}, 'a details element from the parser should be instanceof HTMLDetailsElement'); + </script> + + </body> +</html> diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/display-table-with-rt-crash.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/display-table-with-rt-crash.html new file mode 100644 index 0000000000..80812cccb5 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-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"> +<details open="open" style="display:table;"><rt></rt></details> +<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-details-element/modified-details-crash.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/modified-details-crash.html new file mode 100644 index 0000000000..35ddca1fa6 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/modified-details-crash.html @@ -0,0 +1,31 @@ +<!doctype HTML> +<link rel=author href="mailto:vmpstr@chromium.org"> +<link rel=help href="https://crbug.com/1276488"> + +<style> +.first + .second {} +</style> + +<script> +const details = document.createElement('details'); +const ol = document.createElement('ol'); +const text = document.createTextNode('abcdefghijklmnopqrstuvxyz'); + +function step3() { + ol.setAttribute('class', 'first'); +} + +function step2() { + details.appendChild(text); + requestAnimationFrame(step3); +} + +function runTest() { + document.documentElement.appendChild(details); + details.appendChild(ol); + + requestAnimationFrame(step2); +} + +onload = runTest; +</script> diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/nested-details-crash.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/nested-details-crash.html new file mode 100644 index 0000000000..f3e821a950 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/nested-details-crash.html @@ -0,0 +1,26 @@ +<!doctype HTML> +<link rel=author href="mailto:vmpstr@chromium.org"> +<link rel=help href="https://crbug.com/1270206"> + +<script type="text/javascript"> +function eventHandler1() { + document.getElementById('target').insertAdjacentText("afterEnd", ""); + document.getElementById('target').focus(); + document.getElementById('target').hidden = "true"; +} +function operate() { + document.addEventListener('DOMNodeInsertedIntoDocument', eventHandler1, true); +} +function exec_event() { + event = new Event('DOMNodeInsertedIntoDocument') + document.dispatchEvent(event) +} +function go(){ + operate(); + exec_event(); +} +</script> +<body onload="go();" contentEditable="true"> +<details onselectstart='eventHandler2();'> +<dfn id='target' class=onload='eventHandler1();'> +<details id= onmsgesturehold='eventHandler2();'> diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/nested-top-layer-elements-in-details-crash.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/nested-top-layer-elements-in-details-crash.html new file mode 100644 index 0000000000..c8d8ae4ed7 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/nested-top-layer-elements-in-details-crash.html @@ -0,0 +1,17 @@ +<!doctype HTML> +<link rel=author href="mailto:vmpstr@chromium.org"> +<link rel=help href="https://crbug.com/1273395"> + +<dialog id="parentElement"> + <details id="childElement" open="true" ontoggle="toggleHandler()"> + <dialog id="grandchildElement"> + </dialog> + </details> +</dialog> +<script> +function toggleHandler() { + grandchildElement.showModal(); + parentElement.showModal(); + childElement.open = false; +} +</script> diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/toggleEvent.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/toggleEvent.html new file mode 100644 index 0000000000..8ad60de5d9 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/toggleEvent.html @@ -0,0 +1,160 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>The details element</title> +<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org"> +<link rel=help href="https://html.spec.whatwg.org/multipage/#the-details-element"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> +<details id=details1> + <summary>Lorem ipsum</summary> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> +</details> +<details id=details2 open> + <summary>Lorem ipsum</summary> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> +</details> +<details id=details3 style="display:none;"> + <summary>Lorem ipsum</summary> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> +</details> +<details id=details4> +</details> +<details id=details6> + <summary>Lorem ipsum</summary> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> +</details> +<details id=details7> + <summary>Lorem ipsum</summary> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> +</details> +<details id=details8 open> + <summary>Lorem ipsum</summary> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> +</details> +<script> + window.details9TogglePromise = new Promise(resolve => { + window.details9TogglePromiseResolver = resolve; + }); +</script> +<details id=details9 ontoggle="window.details9TogglePromiseResolver()" open> + <summary>Lorem ipsum</summary> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> +</details> +<details id=details10> + <summary>Lorem ipsum</summary> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> +</details> +<script> + var t1 = async_test("Adding open to 'details' should fire a toggle event at the 'details' element"), + t2 = async_test("Removing open from 'details' should fire a toggle event at the 'details' element"), + t3 = async_test("Adding open to 'details' (display:none) should fire a toggle event at the 'details' element"), + t4 = async_test("Adding open from 'details' (no children) should fire a toggle event at the 'details' element"), + t6 = async_test("Calling open twice on 'details' fires only one toggle event"), + t7 = async_test("Calling setAttribute('open', '') to 'details' should fire a toggle event at the 'details' element"), + t8 = async_test("Calling removeAttribute('open') to 'details' should fire a toggle event at the 'details' element"), + t9 = async_test("Setting open=true to opened 'details' element should not fire a toggle event at the 'details' element"), + t10 = async_test("Setting open=false to closed 'details' element should not fire a toggle event at the 'details' element"), + + details1 = document.getElementById('details1'), + details2 = document.getElementById('details2'), + details3 = document.getElementById('details3'), + details4 = document.getElementById('details4'), + details6 = document.getElementById('details6'), + details7 = document.getElementById('details7'), + details8 = document.getElementById('details8'), + details9 = document.getElementById('details9'), + details10 = document.getElementById('details10'), + loop=false; + + function testEvent(evt) { + assert_true(evt.isTrusted, "event is trusted"); + assert_false(evt.bubbles, "event doesn't bubble"); + assert_false(evt.cancelable, "event is not cancelable"); + assert_equals(Object.getPrototypeOf(evt), Event.prototype, "Prototype of toggle event is Event.prototype"); + } + + details1.ontoggle = t1.step_func_done(function(evt) { + assert_true(details1.open); + testEvent(evt) + }); + details1.open = true; // opens details1 + + details2.ontoggle = t2.step_func_done(function(evt) { + assert_false(details2.open); + testEvent(evt); + }); + details2.open = false; // closes details2 + + details3.ontoggle = t3.step_func_done(function(evt) { + assert_true(details3.open); + testEvent(evt); + }); + details3.open = true; // opens details3 + + details4.ontoggle = t4.step_func_done(function(evt) { + assert_true(details4.open); + testEvent(evt); + }); + details4.open = true; // opens details4 + + async_test(function(t) { + var details5 = document.createElement("details"); + details5.ontoggle = t.step_func_done(function(evt) { + assert_true(details5.open); + testEvent(evt); + }) + details5.open = true; + }, "Adding open to 'details' (not in the document) should fire a toggle event at the 'details' element"); + + details6.open = true; + details6.open = false; + details6.ontoggle = t6.step_func(function() { + if (loop) { + assert_unreached("toggle event fired twice"); + } else { + loop = true; + } + }); + t6.step_timeout(function() { + assert_true(loop); + t6.done(); + }, 0); + + details7.ontoggle = t7.step_func_done(function(evt) { + assert_true(details7.open); + testEvent(evt) + }); + details7.setAttribute('open', ''); // opens details7 + + details8.ontoggle = t8.step_func_done(function(evt) { + assert_false(details8.open); + testEvent(evt) + }); + details8.removeAttribute('open'); // closes details8 + + window.details9TogglePromise.then(t9.step_func(() => { + // The toggle event should be fired once when declaring details9 with open + // attribute. + details9.ontoggle = t9.step_func(() => { + assert_unreached("toggle event fired twice on opened details element"); + }); + // setting open=true on details9 should not fire another event since it is + // already open. + details9.open = true; + t9.step_timeout(() => { + assert_true(details9.open); + t9.done(); + }); + })); + + details10.ontoggle = t10.step_func_done(function(evt) { + assert_unreached("toggle event fired on closed details element"); + }); + details10.open = false; // closes details10 + t10.step_timeout(function() { + assert_false(details10.open); + t10.done(); + }, 0); + +</script> |