diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/html/rendering/the-details-element | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/html/rendering/the-details-element')
31 files changed, 1159 insertions, 0 deletions
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-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-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-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/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> |