diff options
Diffstat (limited to 'testing/web-platform/tests/html/rendering/the-details-element')
43 files changed, 1469 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/the-details-element/auto-expand-details-text-fragment.html b/testing/web-platform/tests/html/rendering/the-details-element/auto-expand-details-text-fragment.html new file mode 100644 index 0000000000..321d82c02d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/auto-expand-details-text-fragment.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>beforematch fired on ScrollToTextFragment</title> +<link rel="author" title="Joey Arhar" href="mailto:jarhar@chromium.org"> +<link rel="help" href="https://github.com/WICG/display-locking"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> + +<script src="/common/utils.js"></script> +<script src="/scroll-to-text-fragment/stash.js"></script> + +<script> +promise_test(t => new Promise((resolve, reject) => { + const key = token(); + test_driver.bless('Open a scroll to text fragment URL', () => { + window.open( + `resources/auto-expand-details-text-fragment.html?key=${key}#:~:text=foo`, + '_blank', + 'noopener'); + }); + fetchResults(key, resolve, reject); +}).then(results => { + assert_true(results.detailsHasOpenAttribute, + 'The matching closed details element should be open.'); + assert_true(results.pageYOffsetAfterRaf > 0, + 'The page should be scrolled down to the match.'); +}), 'Verifies that the beforematch event is fired on the matching element of a ScrollToTextFragment navigation.'); +</script> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-after.html b/testing/web-platform/tests/html/rendering/the-details-element/details-after.html new file mode 100644 index 0000000000..b4bf050466 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/details-after.html @@ -0,0 +1,12 @@ +<!doctype html> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="help" title="https://github.com/whatwg/html/pull/3686"> +<link rel="help" title="https://html.spec.whatwg.org/multipage/#the-details-element"> +<link rel="mismatch" href="single-summary.html"> +<title>CSS Test: details ::after pseudo-element</title> +<style> + details::after { content: "::after" } +</style> +<details> + <summary>This is the main summary</summary> +</details> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-autofocus-crash.html b/testing/web-platform/tests/html/rendering/the-details-element/details-autofocus-crash.html new file mode 100644 index 0000000000..70a220feac --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/details-autofocus-crash.html @@ -0,0 +1,25 @@ +<!doctype html> +<meta charset="utf-8"> +<link rel="author" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="https://crbug.com/1500582"> +<meta name="assert" content="The renderer should not crash."> +<html> +<head> +<style> +:not(g) { justify-content: right; line-clamp: none; glyph-orientation-vertical: 0deg; flood-color: rgb(22,11,39); mso-style-parent: style61; column-count: auto; nav-left: htmlvar00001 root; grid-row-end: 35 last; white-space-trim: discard-before discard-after discard-inner; row-gap: normal; cellspacing: 33; line-grid: match-parent; caret-shape: auto; outline: solid red 0px; -webkit-columns: 21; font-family: Courier; mso-displayed-thousand-separator: '\,'; animation-timeline: scroll( x ); shape-image-threshold: 0; stroke-origin: fill-box } + +.class1 { background-position-x: x-end 43; ruby-overhang: auto; -webkit-writing-mode: vertical-rl; flex-direction: initial; fill-size: 0px 92; voice-balance: center; -webkit-direction: rtl; inset-block-end: auto; -webkit-align-items: flex-start; text-decoration-style: dashed; order: inherit; border-top-style: dotted; border-bottom-style: dashed; box-shadow: <hwb()> 4 0 2px 0px; view-timeline-axis: block, block; border-inline-start-style: dotted; line-height-step: 1px; content-visibility: hidden; -webkit-flex-flow: ""; text-group-align: right } + + +.class1, #htmlvar00003 { max-zoom: auto; cy: 39; margin-block-end: 96%; max-width: 1vmax; overscroll-behavior-y: auto; -webkit-mask-position: 24px 1px; overflow-y: scroll; -webkit-filter: drop-shadow(1px 1px 1px green); text-emphasis-color: rgb(156,115,92); box-reflect: right; mask-mode: alpha, luminance; voice-balance: left; wrap-flow: both; font-size: math; background-repeat: space space; -webkit-margin-top-collapse: collapse; border-block-style: groove solid; scrollbar-width: auto; padding: 0px 0px 0px 1px; -webkit-column-break-before: always } +</style> +<script> + +</script> +</head> +<body> + +<details id="htmlvar00003" class="class1" class="class7" open="true" class="class1" illuminance="0.3882950034014543" autofocus="autofocus" basefrequency="0.0833728589179481" optimum="0.10248315813775544" rel="noreferrer"> + +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-before.html b/testing/web-platform/tests/html/rendering/the-details-element/details-before.html new file mode 100644 index 0000000000..3dd95e311a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/details-before.html @@ -0,0 +1,12 @@ +<!doctype html> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="help" title="https://github.com/whatwg/html/pull/3686"> +<link rel="help" title="https://html.spec.whatwg.org/multipage/#the-details-element"> +<link rel="mismatch" href="single-summary.html"> +<title>CSS Test: details ::before pseudo-element</title> +<style> + details::before { content: "::before" } +</style> +<details> + <summary>This is the main summary</summary> +</details> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-blockification.html b/testing/web-platform/tests/html/rendering/the-details-element/details-blockification.html new file mode 100644 index 0000000000..960074854d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/details-blockification.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: details children blockification</title> +<link rel="author" href="mailto:masonf@chromium.org"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements"> +<meta name="assert" content="Ensure blockification of <details> children"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> + +<div id="example1"> + <details style="display: grid" open> + <summary style="display: inline">foo</summary> + <div style="display: inline">bar</span> + </details> +</div> + +<div id="example2" style="display: grid"> + <details style="display: contents" open> + <summary style="display: inline">foo</summary> + <div style="display: inline">bar</span> + </details> +</div> + +<script> + function checkDetails(details) { + assert_equals(getComputedStyle(details.querySelector('summary')).display, "block"); + assert_equals(getComputedStyle(details.querySelector('div')).display, "block"); + } + test(() => { + checkDetails(document.querySelector('#example1')); + checkDetails(document.querySelector('#example2')); + assert_equals(getComputedStyle(document.querySelector('#example2>details')).display, "contents"); + }, "Summary and content should have display:block computed value"); + +</script> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-display-property-is-ignored-ref.html b/testing/web-platform/tests/html/rendering/the-details-element/details-display-property-is-ignored-ref.html new file mode 100644 index 0000000000..6ebed6075d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/details-display-property-is-ignored-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +From <a href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements">html.spec.whatwg.org</a>: + +<blockquote> +The details element is expected to render as a block box. The element's shadow +tree is expected to take the element's first summary element child, if any, and +place it in a first block box container, and then take the element's remaining +descendants, if any, and place them in a second block box container. +</blockquote> + +<details display:flex> should be ignored. Otherwise details would render as +something other than a block box. +<hr> + +<details open> + <summary>This is the summary.</summary> + <div>thing 1</div> + thing 2 +</details> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-display-property-is-ignored.html b/testing/web-platform/tests/html/rendering/the-details-element/details-display-property-is-ignored.html new file mode 100644 index 0000000000..445b4e483d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/details-display-property-is-ignored.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements"> +<link rel="match" href="details-display-property-is-ignored-ref.html"> +<link rel="bookmark" href="https://bugs.chromium.org/p/chromium/issues/detail?id=635282" /> +<meta name="assert" content="The display property is ignored on details elements and is instead always rendered as a block box." /> + +From <a href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements">html.spec.whatwg.org</a>: + +<blockquote> +The details element is expected to render as a block box. The element's shadow +tree is expected to take the element's first summary element child, if any, and +place it in a first block box container, and then take the element's remaining +descendants, if any, and place them in a second block box container. +</blockquote> + +<details display:flex> should be ignored. Otherwise details would render as +something other than a block box. +<hr> + +<details open style="display:flex;"> + <summary>This is the summary.</summary> + <div>thing 1</div> + thing 2 +</details> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-display-type-001-ref.html b/testing/web-platform/tests/html/rendering/the-details-element/details-display-type-001-ref.html new file mode 100644 index 0000000000..925ee19f77 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/details-display-type-001-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML> +<title>Details and summary and display property (subgrid)</title> +<link rel="match" href="details-display-type-001-ref2.html"> +<style> + +.container { + display: grid; + grid: 30px 75px 45px / 80px 125px 90px; +} + +.before { + background: aqua; + grid-area: 1 / 3; +} + +.after { + background: yellow; + grid-area: 3 / 1; +} + +.details { + display: grid; + grid-template: subgrid / subgrid; + grid-area: 2 / 2 / 4 / 4; +} + +.summary { + background: fuchsia; + grid-area: 1 / 1; +} + +.contents { + background: silver; + grid-area: 2 / 2; +} + +</style> + +<div class="container"> + <div class="before">before</div> + <div class="details"> + <div class="summary">summary</div> + <div class="contents">contents</div> + </div> + <div class="after">after</div> +</div> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-display-type-001-ref2.html b/testing/web-platform/tests/html/rendering/the-details-element/details-display-type-001-ref2.html new file mode 100644 index 0000000000..4349df38d6 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/details-display-type-001-ref2.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<title>Details and summary and display property (subgrid)</title> +<style> + +.container { + display: grid; + grid: 30px 75px 45px / 80px 125px 90px; +} + +.before { + background: aqua; + grid-area: 1 / 3; +} + +.after { + background: yellow; + grid-area: 3 / 1; +} + +.summary { + background: fuchsia; + grid-area: 2 / 2; +} + +.contents { + background: silver; + grid-area: 3 / 3; +} + +</style> + +<div class="container"> + <div class="before">before</div> + <div class="summary">summary</div> + <div class="contents">contents</div> + <div class="after">after</div> +</div> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-display-type-001.tentative.html b/testing/web-platform/tests/html/rendering/the-details-element/details-display-type-001.tentative.html new file mode 100644 index 0000000000..8164135518 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/details-display-type-001.tentative.html @@ -0,0 +1,51 @@ +<!DOCTYPE HTML> +<title>Details and summary and display property (subgrid)</title> +<link rel="match" href="details-display-type-001-ref.html"> +<link rel="help" href="https://github.com/dbaron/details-styling"> +<link rel="help" href="https://crbug.com/1469418"> +<style> + +.container { + display: grid; + grid: 30px 75px 45px / 80px 125px 90px; +} + +.container::before { + display: block; + content: "before"; + background: aqua; + grid-area: 1 / 3; +} + +.container::after { + display: block; + content: "after"; + background: yellow; + grid-area: 3 / 1; +} + +details { + display: grid; + grid-template: subgrid / subgrid; + grid-area: 2 / 2 / 4 / 4; +} + +summary { + display: block; + background: fuchsia; + grid-area: 1 / 1; +} + +.contents { + background: silver; + grid-area: 2 / 2; +} + +</style> + +<div class="container"> + <details open> + <summary>summary</summary> + <div class="contents">contents</div> + </details> +</div> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-display-type-002-ref.html b/testing/web-platform/tests/html/rendering/the-details-element/details-display-type-002-ref.html new file mode 100644 index 0000000000..297634b521 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/details-display-type-002-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<style> + div { + margin-top: 3em; + } +</style> +<details open> + <summary>The summary.</summary> + <div>Some details.</div> +</details> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-display-type-002.tentative.html b/testing/web-platform/tests/html/rendering/the-details-element/details-display-type-002.tentative.html new file mode 100644 index 0000000000..716221f7c5 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/details-display-type-002.tentative.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>Details display property (flex)</title> +<link rel="match" href="details-display-type-002-ref.html"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1856374"> +<link rel="help" href="https://github.com/dbaron/details-styling"> +<style> + details { + display: flex; + flex-direction: column; + gap: 3em; + } +</style> +<details open> + <summary>The summary.</summary> + Some details. +</details> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-page-break-after-1-print.html b/testing/web-platform/tests/html/rendering/the-details-element/details-page-break-after-1-print.html new file mode 100644 index 0000000000..cb7fc466d0 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/details-page-break-after-1-print.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <link rel="match" href="details-two-pages-print-ref.html"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements"> + <style> + summary { + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + </style> + <body> + <details open> + <summary style="page-break-after: always;">Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-page-break-after-2-print.html b/testing/web-platform/tests/html/rendering/the-details-element/details-page-break-after-2-print.html new file mode 100644 index 0000000000..2f3d12bbe3 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/details-page-break-after-2-print.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <link rel="match" href="details-two-pages-print-ref.html"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements"> + <style> + summary { + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + </style> + <body> + <details open> + <summary>Summary<div style="page-break-before: always;"></div></summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-page-break-before-1-print.html b/testing/web-platform/tests/html/rendering/the-details-element/details-page-break-before-1-print.html new file mode 100644 index 0000000000..5abf4c39ae --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/details-page-break-before-1-print.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <link rel="match" href="details-two-pages-print-ref.html"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements"> + <style> + summary { + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + </style> + <body> + <details open> + <summary>Summary</summary> + <p style="page-break-before: always;">This is the details.</p> + </details> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-page-break-before-2-print.html b/testing/web-platform/tests/html/rendering/the-details-element/details-page-break-before-2-print.html new file mode 100644 index 0000000000..2f3d12bbe3 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/details-page-break-before-2-print.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <link rel="match" href="details-two-pages-print-ref.html"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements"> + <style> + summary { + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + </style> + <body> + <details open> + <summary>Summary<div style="page-break-before: always;"></div></summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-pseudo-elements-001-ref.html b/testing/web-platform/tests/html/rendering/the-details-element/details-pseudo-elements-001-ref.html new file mode 100644 index 0000000000..e00e6c52ff --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/details-pseudo-elements-001-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE HTML> +<title>Details pseudo-elements</title> +<!-- This test is (at time of writing) _EXTREMELY_ tentative. --> +<style> + +div { background: aqua } + +</style> + +<details open> + <summary>The summary</summary> + <div>The details!</div> +</details> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-pseudo-elements-001.tentative.html b/testing/web-platform/tests/html/rendering/the-details-element/details-pseudo-elements-001.tentative.html new file mode 100644 index 0000000000..1a9f7d6a02 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/details-pseudo-elements-001.tentative.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<title>Details pseudo-elements</title> +<!-- This test is (at time of writing) _EXTREMELY_ tentative. --> +<link rel="match" href="details-pseudo-elements-001-ref.html"> +<link rel="help" href="https://github.com/dbaron/details-styling"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1469418"> +<style> + +details::details-content { + background: aqua; + display: block; /* override display: contents for slot */ +} + +</style> + +<details open> + <summary>The summary</summary> + <div>The details!</div> +</details> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-pseudo-elements-002-ref.html b/testing/web-platform/tests/html/rendering/the-details-element/details-pseudo-elements-002-ref.html new file mode 100644 index 0000000000..baf242291b --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/details-pseudo-elements-002-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<title>Details pseudo-elements</title> +<!-- This test is (at time of writing) _EXTREMELY_ tentative. --> +<style> + +summary { list-style-type: disclosure-closed; } +div { background: aqua } + +</style> + +<details open> + <summary>The summary</summary> + <div>The details!</div> +</details> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-pseudo-elements-002.tentative.html b/testing/web-platform/tests/html/rendering/the-details-element/details-pseudo-elements-002.tentative.html new file mode 100644 index 0000000000..e149395665 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/details-pseudo-elements-002.tentative.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<title>Details pseudo-elements</title> +<!-- This test is (at time of writing) _EXTREMELY_ tentative. --> +<link rel="match" href="details-pseudo-elements-002-ref.html"> +<link rel="help" href="https://github.com/dbaron/details-styling"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1469418"> +<meta name="assert" content="Checks that the content-visibility property on the pseudo-element overrides the style attribute inside the shadow dom."> +<style> + +details::details-content { + background: aqua; + display: block; /* override display: contents for slot */ + content-visibility: visible; +} + +</style> + +<details> + <summary>The summary</summary> + <div>The details!</div> +</details> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-revert-ref.html b/testing/web-platform/tests/html/rendering/the-details-element/details-revert-ref.html new file mode 100644 index 0000000000..dc46b15901 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/details-revert-ref.html @@ -0,0 +1,19 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<style> + summary { + display: list-item; + counter-increment: list-item 0; + list-style: disclosure-closed inside; + } + details[open] > summary { + list-style-type: disclosure-open; + } +</style> +<details> + <summary>Example</summary> +</details> +<details open> + <summary>Example</summary> +</details> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-revert.html b/testing/web-platform/tests/html/rendering/the-details-element/details-revert.html new file mode 100644 index 0000000000..760cc8281e --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/details-revert.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset="utf-8"> +<link rel="help" href="https://html.spec.whatwg.org/#the-details-and-summary-elements"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1804925"> +<link rel="match" href="details-revert-ref.html"> +<style> + summary { + display: revert; + counter-increment: revert; + list-style: revert; + } +</style> +<details> + <summary>Example</summary> +</details> +<details open> + <summary>Example</summary> +</details> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-two-pages-print-ref.html b/testing/web-platform/tests/html/rendering/the-details-element/details-two-pages-print-ref.html new file mode 100644 index 0000000000..309a138696 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/details-two-pages-print-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <body> + <div> + <div style="page-break-after: always;">Summary</div> + <p>This is the details.</p> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/empty-crash.html b/testing/web-platform/tests/html/rendering/the-details-element/empty-crash.html new file mode 100644 index 0000000000..d409eff4a8 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/empty-crash.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1068227"> +<style> +body { display: flex; } +details, summary { display: inherit; } +</style> +<details><summary> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/resources/auto-expand-details-text-fragment.html b/testing/web-platform/tests/html/rendering/the-details-element/resources/auto-expand-details-text-fragment.html new file mode 100644 index 0000000000..b95459fe5c --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/resources/auto-expand-details-text-fragment.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<script src="/scroll-to-text-fragment/stash.js"></script> + +<!-- This test is navigated to with the fragment #:~:text=foo --> + +<body> + <div style="height: 4000px;">spacer</div> + <details> + <div>foo</div> + </details> + <script> + requestAnimationFrame(() => { + requestAnimationFrame(() => { + const results = {}; + // This should be true. The details element should be opened by + // ScrollToTextFragment because it has matching text. + results.detailsHasOpenAttribute = document.querySelector('details').hasAttribute('open'); + // This should be greater than zero. The page should be scrolled down + // to the matching target. + results.pageYOffsetAfterRaf = window.pageYOffset; + + params = new URLSearchParams(window.location.search); + stashResultsThenClose(params.get('key'), results); + }); + }); + </script> +</body> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/single-summary.html b/testing/web-platform/tests/html/rendering/the-details-element/single-summary.html new file mode 100644 index 0000000000..1f09e7e75f --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/single-summary.html @@ -0,0 +1,6 @@ +<!doctype html> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<title>CSS Test Reference</title> +<details> + <summary>This is the main summary</summary> +</details> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/summary-display-flex-ref.html b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-flex-ref.html new file mode 100644 index 0000000000..083dba8795 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-flex-ref.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<link rel="author" title="Xing Xu" href="mailto:xing.xu@intel.com"> +<style> +.flex-container { + background: #333; + border: 0px; + display: flex; + margin: 0px; + padding: 0px; +} + +.flex-container.flex-direction-row { + flex-direction : row; +} + +.flex-container.flex-direction-row-reverse { + flex-direction : row-reverse; +} + +.flex-container.flex-direction-column { + flex-direction : column; +} + +.flex-container.flex-direction-column-reverse { + flex-direction : column-reverse; +} + +.flex-container.flex-direction-column-reverse { + flex-direction : column-reverse; +} + +.flex-container.justify-content-center { + justify-content: center; +} + +.flex-container.justify-content-space-around { + justify-content: space-around; +} + +.flex-container.justify-content-space-between { + justify-content: space-between; +} + +.flex-item { + width:50px; + height:50px; + margin:20px; + background: #eee; + line-height: 50px; + text-align: center; +} +</style> + +<summary> + <div>these fieldsshouldn't bestacked vertically</div> +</summary> + +<h1>flex-direction: row</h1> +<div class="flex-container flex-direction-row"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</div> + +<h1>flex-direction: row-reverse</h1> +<div class="flex-container flex-direction-row-reverse"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</div> + +<h1>flex-direction: column</h1> +<div class="flex-container flex-direction-column"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</div> + +<h1>flex-direction: column-reverse</h1> +<div class="flex-container flex-direction-column-reverse"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</div> + +<h1>justify-content: center</h1> +<div class="flex-container justify-content-center"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</div> + +<h1>justify-content: space-around</h1> +<div class="flex-container justify-content-space-around"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</div> + +<h1>justify-content: space-between</h1> +<div class="flex-container justify-content-space-between"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</div> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/summary-display-flex.html b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-flex.html new file mode 100644 index 0000000000..c495516cf3 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-flex.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: summary with 'display: flex'</title> +<link rel="author" title="Xing Xu" href="mailto:xing.xu@intel.com"> +<link rel="match" href="summary-display-flex-ref.html"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements"> +<meta name="assert" content="Checks that styling a <summary> with 'display: flex' makes it a flex container."> +<style> +.flex-container { + background: #333; + border: 0px; + display: flex; + margin: 0px; + padding: 0px; +} + +.flex-container.flex-direction-row { + flex-direction : row; +} + +.flex-container.flex-direction-row-reverse { + flex-direction : row-reverse; +} + +.flex-container.flex-direction-column { + flex-direction : column; +} + +.flex-container.flex-direction-column-reverse { + flex-direction : column-reverse; +} + +.flex-container.flex-direction-column-reverse { + flex-direction : column-reverse; +} + +.flex-container.justify-content-center { + justify-content: center; +} + +.flex-container.justify-content-space-around { + justify-content: space-around; +} + +.flex-container.justify-content-space-between { + justify-content: space-between; +} + +.flex-item { + width:50px; + height:50px; + margin:20px; + background: #eee; + line-height: 50px; + text-align: center; +} +</style> + +<summary style="display: flex;"> + <div>these fields</div> + <div>shouldn't be</div> + <div>stacked vertically</div> +</summary> + +<h1>flex-direction: row</h1> +<summary class="flex-container flex-direction-row"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</summary> + +<h1>flex-direction: row-reverse</h1> +<summary class="flex-container flex-direction-row-reverse"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</summary> + +<h1>flex-direction: column</h1> +<summary class="flex-container flex-direction-column"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</summary> + +<h1>flex-direction: column-reverse</h1> +<summary class="flex-container flex-direction-column-reverse"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</summary> + +<h1>justify-content: center</h1> +<summary class="flex-container justify-content-center"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</summary> + +<h1>justify-content: space-around</h1> +<summary class="flex-container justify-content-space-around"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</summary> + +<h1>justify-content: space-between</h1> +<summary class="flex-container justify-content-space-between"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</summary> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/summary-display-grid-ref.html b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-grid-ref.html new file mode 100644 index 0000000000..a7c4c4c014 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-grid-ref.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<link rel="author" title="Xing Xu" href="mailto:xing.xu@intel.com"> +<style> +.grid-container { + display: grid; + grid-template-columns: 200px 10px 0.3fr 10px 0.7fr; + grid-template-rows: auto 20px auto; +} + +.grid-element { + background-color: #444; + color: #fff; + padding: 20px; + font-size: 2em; +} + +.element-a { + grid-column-start: 1; + grid-column-end: ; + grid-row-start: 1; + grid-row-end: 2; + background: #6F9; +} + +.element-b { + grid-column-start: 3; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 2; + background: #69F; +} + +.element-c { + grid-column-start: 5; + grid-column-end: 6; + grid-row-start: 1; + grid-row-end: 2; + background: #F69; +} + +.element-d { + grid-column-start: 1; + grid-column-end: 2; + grid-row-start: 3; + grid-row-end: 4; + background: #9F6; +} + +.element-e { + grid-column-start: 3; + grid-column-end: 4; + grid-row-start: 3; + grid-row-end: 4; + background: #96F; +} + +.element-f { + grid-column-start: 5; + grid-column-end: 6; + grid-row-start: 3; + grid-row-end: 4; + background: #F96; +} +</style> +<div class="grid-container"> + <div class="grid-element element-a">A</div> + <div class="grid-element element-b">B</div> + <div class="grid-element element-c">C</div> + <div class="grid-element element-d">D</div> + <div class="grid-element element-e">E</div> + <div class="grid-element element-f">F</div> +</div> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/summary-display-grid.html b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-grid.html new file mode 100644 index 0000000000..934b4ff595 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-grid.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: summary with 'display: grid'</title> +<link rel="author" title="Xing Xu" href="mailto:xing.xu@intel.com"> +<link rel="match" href="summary-display-grid-ref.html"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements"> +<meta name="assert" content="Checks that styling a <summary> with 'display: grid' makes it a grid container."> +<style> +.grid-container { + display: grid; + grid-template-columns: 200px 10px 0.3fr 10px 0.7fr; + grid-template-rows: auto 20px auto; +} + +.grid-element { + background-color: #444; + color: #fff; + padding: 20px; + font-size: 2em; +} + +.element-a { + grid-column-start: 1; + grid-column-end: ; + grid-row-start: 1; + grid-row-end: 2; + background: #6F9; +} + +.element-b { + grid-column-start: 3; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 2; + background: #69F; +} + +.element-c { + grid-column-start: 5; + grid-column-end: 6; + grid-row-start: 1; + grid-row-end: 2; + background: #F69; +} + +.element-d { + grid-column-start: 1; + grid-column-end: 2; + grid-row-start: 3; + grid-row-end: 4; + background: #9F6; +} + +.element-e { + grid-column-start: 3; + grid-column-end: 4; + grid-row-start: 3; + grid-row-end: 4; + background: #96F; +} + +.element-f { + grid-column-start: 5; + grid-column-end: 6; + grid-row-start: 3; + grid-row-end: 4; + background: #F96; +} +</style> +<summary class="grid-container"> + <div class="grid-element element-a">A</div> + <div class="grid-element element-b">B</div> + <div class="grid-element element-c">C</div> + <div class="grid-element element-d">D</div> + <div class="grid-element element-e">E</div> + <div class="grid-element element-f">F</div> +</summary> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/summary-display-inline-flex-ref.html b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-inline-flex-ref.html new file mode 100644 index 0000000000..25a9b315f4 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-inline-flex-ref.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<link rel="author" title="Xing Xu" href="mailto:xing.xu@intel.com"> +<style> +.flex-container { + background: #333; + border: 0px; + display: inline-flex; + margin: 0px; + padding: 0px; +} + +.flex-container.flex-direction-row { + flex-direction : row; +} + +.flex-container.flex-direction-row-reverse { + flex-direction : row-reverse; +} + +.flex-container.flex-direction-column { + flex-direction : column; +} + +.flex-container.flex-direction-column-reverse { + flex-direction : column-reverse; +} + +.flex-container.flex-direction-column-reverse { + flex-direction : column-reverse; +} + +.flex-container.justify-content-center { + justify-content: center; +} + +.flex-container.justify-content-space-around { + justify-content: space-around; +} + +.flex-container.justify-content-space-between { + justify-content: space-between; +} + +.flex-item { + width:50px; + height:50px; + margin:20px; + background: #eee; + line-height: 50px; + text-align: center; +} +</style> + +<summary> + <div>these fieldsshouldn't bestacked vertically</div> +</summary> + +<h1>flex-direction: row</h1> +<div class="flex-container flex-direction-row"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</div> + +<h1>flex-direction: row-reverse</h1> +<div class="flex-container flex-direction-row-reverse"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</div> + +<h1>flex-direction: column</h1> +<div class="flex-container flex-direction-column"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</div> + +<h1>flex-direction: column-reverse</h1> +<div class="flex-container flex-direction-column-reverse"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</div> + +<h1>justify-content: center</h1> +<div class="flex-container justify-content-center"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</div> + +<h1>justify-content: space-around</h1> +<div class="flex-container justify-content-space-around"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</div> + +<h1>justify-content: space-between</h1> +<div class="flex-container justify-content-space-between"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</div> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/summary-display-inline-flex.html b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-inline-flex.html new file mode 100644 index 0000000000..2c935e42b8 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-inline-flex.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: summary with 'display: inline-flex'</title> +<link rel="author" title="Xing Xu" href="mailto:xing.xu@intel.com"> +<link rel="match" href="summary-display-inline-flex-ref.html"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements"> +<meta name="assert" content="Checks that styling a <summary> with 'display: inline-flex' makes it a flex container."> +<style> +.flex-container { + background: #333; + border: 0px; + display: inline-flex; + margin: 0px; + padding: 0px; +} + +.flex-container.flex-direction-row { + flex-direction : row; +} + +.flex-container.flex-direction-row-reverse { + flex-direction : row-reverse; +} + +.flex-container.flex-direction-column { + flex-direction : column; +} + +.flex-container.flex-direction-column-reverse { + flex-direction : column-reverse; +} + +.flex-container.flex-direction-column-reverse { + flex-direction : column-reverse; +} + +.flex-container.justify-content-center { + justify-content: center; +} + +.flex-container.justify-content-space-around { + justify-content: space-around; +} + +.flex-container.justify-content-space-between { + justify-content: space-between; +} + +.flex-item { + width:50px; + height:50px; + margin:20px; + background: #eee; + line-height: 50px; + text-align: center; +} +</style> + +<summary style="display: inline-flex;"> + <div>these fields</div> + <div>shouldn't be</div> + <div>stacked vertically</div> +</summary> + +<h1>flex-direction: row</h1> +<summary class="flex-container flex-direction-row"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</summary> + +<h1>flex-direction: row-reverse</h1> +<summary class="flex-container flex-direction-row-reverse"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</summary> + +<h1>flex-direction: column</h1> +<summary class="flex-container flex-direction-column"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</summary> + +<h1>flex-direction: column-reverse</h1> +<summary class="flex-container flex-direction-column-reverse"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</summary> + +<h1>justify-content: center</h1> +<summary class="flex-container justify-content-center"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</summary> + +<h1>justify-content: space-around</h1> +<summary class="flex-container justify-content-space-around"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</summary> + +<h1>justify-content: space-between</h1> +<summary class="flex-container justify-content-space-between"> + <div class="flex-item">1</div> + <div class="flex-item">2</div> + <div class="flex-item">3</div> +</summary> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/summary-display-inline-grid-ref.html b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-inline-grid-ref.html new file mode 100644 index 0000000000..f6a8b04bec --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-inline-grid-ref.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<link rel="author" title="Xing Xu" href="mailto:xing.xu@intel.com"> +<style> +.grid-container { + display: inline-grid; + grid-template-columns: 200px 10px 0.3fr 10px 0.7fr; + grid-template-rows: auto 20px auto; +} + +.grid-element { + background-color: #444; + color: #fff; + padding: 20px; + font-size: 2em; +} + +.element-a { + grid-column-start: 1; + grid-column-end: ; + grid-row-start: 1; + grid-row-end: 2; + background: #6F9; +} + +.element-b { + grid-column-start: 3; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 2; + background: #69F; +} + +.element-c { + grid-column-start: 5; + grid-column-end: 6; + grid-row-start: 1; + grid-row-end: 2; + background: #F69; +} + +.element-d { + grid-column-start: 1; + grid-column-end: 2; + grid-row-start: 3; + grid-row-end: 4; + background: #9F6; +} + +.element-e { + grid-column-start: 3; + grid-column-end: 4; + grid-row-start: 3; + grid-row-end: 4; + background: #96F; +} + +.element-f { + grid-column-start: 5; + grid-column-end: 6; + grid-row-start: 3; + grid-row-end: 4; + background: #F96; +} +</style> +<div class="grid-container"> + <div class="grid-element element-a">A</div> + <div class="grid-element element-b">B</div> + <div class="grid-element element-c">C</div> + <div class="grid-element element-d">D</div> + <div class="grid-element element-e">E</div> + <div class="grid-element element-f">F</div> +</div> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/summary-display-inline-grid.html b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-inline-grid.html new file mode 100644 index 0000000000..3578f050e2 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-inline-grid.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: summary with 'display: inline-grid'</title> +<link rel="author" title="Xing Xu" href="mailto:xing.xu@intel.com"> +<link rel="match" href="summary-display-inline-grid-ref.html"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements"> +<meta name="assert" content="Checks that styling a <summary> with 'display: inline-grid' makes it a grid container."> +<style> +.grid-container { + display: inline-grid; + grid-template-columns: 200px 10px 0.3fr 10px 0.7fr; + grid-template-rows: auto 20px auto; +} + +.grid-element { + background-color: #444; + color: #fff; + padding: 20px; + font-size: 2em; +} + +.element-a { + grid-column-start: 1; + grid-column-end: ; + grid-row-start: 1; + grid-row-end: 2; + background: #6F9; +} + +.element-b { + grid-column-start: 3; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 2; + background: #69F; +} + +.element-c { + grid-column-start: 5; + grid-column-end: 6; + grid-row-start: 1; + grid-row-end: 2; + background: #F69; +} + +.element-d { + grid-column-start: 1; + grid-column-end: 2; + grid-row-start: 3; + grid-row-end: 4; + background: #9F6; +} + +.element-e { + grid-column-start: 3; + grid-column-end: 4; + grid-row-start: 3; + grid-row-end: 4; + background: #96F; +} + +.element-f { + grid-column-start: 5; + grid-column-end: 6; + grid-row-start: 3; + grid-row-end: 4; + background: #F96; +} +</style> +<summary class="grid-container"> + <div class="grid-element element-a">A</div> + <div class="grid-element element-b">B</div> + <div class="grid-element element-c">C</div> + <div class="grid-element element-d">D</div> + <div class="grid-element element-e">E</div> + <div class="grid-element element-f">F</div> +</summary> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/summary-display-list-item-001-ref.html b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-list-item-001-ref.html new file mode 100644 index 0000000000..31e98d3fdc --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-list-item-001-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference: summary with 'display: list-item'</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<style> +details { + margin-left: 50px; +} +.inside { + list-style-position: inside; +} +</style> +<details> + <summary>summary</summary> + content +</details> +<details> + <summary class="inside">summary</summary> + content +</details> +<details open> + <summary>summary</summary> + content +</details> +<details open> + <summary class="inside">summary</summary> + content +</details> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/summary-display-list-item-001.html b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-list-item-001.html new file mode 100644 index 0000000000..8b94f10f27 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-list-item-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: summary with 'display: list-item'</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="match" href="summary-display-list-item-001-ref.html"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements"> +<meta name="assert" content="Checks that styling a <summary> with 'display: list-item' has no effect since it should already be a list item by default."> +<style> +summary { + display: list-item; +} +details { + margin-left: 50px; +} +.inside { + list-style-position: inside; +} +</style> +<details> + <summary>summary</summary> + content +</details> +<details> + <summary class="inside">summary</summary> + content +</details> +<details open> + <summary>summary</summary> + content +</details> +<details open> + <summary class="inside">summary</summary> + content +</details> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/summary-display-list-item-002-ref.html b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-list-item-002-ref.html new file mode 100644 index 0000000000..317e1cfe7d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-list-item-002-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: summary with 'display: list-item' and flex children</title> +<link rel="author" title="Cameron McCormack" href="mailto:"> +<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com"> +<div style="width: 100px;"> + <div style="display: list-item; list-style-type: none;"> + <div style="display: flex; justify-content: space-between;"> + <div>AAA</div> + <div>BBB</div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/summary-display-list-item-002.html b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-list-item-002.html new file mode 100644 index 0000000000..ee32997009 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/summary-display-list-item-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: summary with 'display: list-item' and flex children</title> +<link rel="author" title="Cameron McCormack" href="mailto:heycam@apple.com"> +<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com"> +<link rel="match" href="summary-display-list-item-002-ref.html"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements"> +<style> +summary { + display: list-item; + list-style-type: none; +} +/* WebKit does not support list-style-type:none yet */ +summary::-webkit-details-marker { display: none; } +</style> +<details style="width: 100px;"> + <summary> + <div style="display: flex; justify-content: space-between;"> + <div>AAA</div> + <div>BBB</div> + </div> + </summary> +</details> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/summary-in-ol-ref.html b/testing/web-platform/tests/html/rendering/the-details-element/summary-in-ol-ref.html new file mode 100644 index 0000000000..bb6f79b627 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/summary-in-ol-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> + +<ol> + <details><summary>summary</summary></details> + <li value="1">1</li> + <li value="2">2 <details><summary>summary</summary></details></li> + <li value="3">3</li> + <details><summary>summary</summary></details> + <li value="4">4</li> +</ol> + +<ol> + <summary>summary</summary> + <li value="1">1</li> + <li value="2">2 <summary>summary</summary></li> + <li value="3">3</li> + <summary>summary</summary> + <li value="4">4</li> +</ol> + diff --git a/testing/web-platform/tests/html/rendering/the-details-element/summary-in-ol.html b/testing/web-platform/tests/html/rendering/the-details-element/summary-in-ol.html new file mode 100644 index 0000000000..0f380bf058 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/summary-in-ol.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>Check if SUMMARY has 'counter-increment: list-item 0'</title> +<link rel="match" href="summary-in-ol-ref.html"> + +<ol> + <details><summary>summary</summary></details> + <li>1</li> + <li>2 <details><summary>summary</summary></details></li> + <li>3</li> + <details><summary>summary</summary></details> + <li>4</li> +</ol> + +<ol> + <summary>summary</summary> + <li>1</li> + <li>2 <summary>summary</summary></li> + <li>3</li> + <summary>summary</summary> + <li>4</li> +</ol> + diff --git a/testing/web-platform/tests/html/rendering/the-details-element/summary-text-decoration-ref.html b/testing/web-platform/tests/html/rendering/the-details-element/summary-text-decoration-ref.html new file mode 100644 index 0000000000..ffdcfd25fb --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/summary-text-decoration-ref.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>Test reference</title> +<style> +div { + display: list-item; + list-style-type: disclosure-closed; + list-style-position: inside; + text-decoration: underline; +} +</style> +<div>This text should be underlined.</div> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/summary-text-decoration.html b/testing/web-platform/tests/html/rendering/the-details-element/summary-text-decoration.html new file mode 100644 index 0000000000..80bbd44c46 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/summary-text-decoration.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>Rendering of summary element with text-decoration</title> +<link rel="match" href="summary-text-decoration-ref.html"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements"> +<meta name="assert" content="Checks that text-decoration applies to rendered summary element."> +<style> + summary { text-decoration: underline; } +</style> +<details> + <summary>This text should be underlined.</summary> +</details> diff --git a/testing/web-platform/tests/html/rendering/the-details-element/two-summaries-removal-crash.html b/testing/web-platform/tests/html/rendering/the-details-element/two-summaries-removal-crash.html new file mode 100644 index 0000000000..164d3f16aa --- /dev/null +++ b/testing/web-platform/tests/html/rendering/the-details-element/two-summaries-removal-crash.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" href="mailto:masonf@chromium.org"> +<link rel="help" href="https://crbug.com/1216804"> +<meta name="assert" content="The renderer should not crash."> + +<details id="details" open> + <summary></summary> + <summary> + <details></details> + </summary> +</details> + +<script> +details.appendChild(document.createElement("frame")); +details.innerText=""; +</script> |