diff options
Diffstat (limited to 'layout/reftests/details-summary')
129 files changed, 3529 insertions, 0 deletions
diff --git a/layout/reftests/details-summary/close-nested-details-ref.html b/layout/reftests/details-summary/close-nested-details-ref.html new file mode 100644 index 000000000..06c294221 --- /dev/null +++ b/layout/reftests/details-summary/close-nested-details-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <body> + <details open> + <summary>outer summary</summary> + <details> + <summary>inner summary</summary> + <p>inner details</p> + <details open> + <summary>inner most summary</summary> + <p>inner most details</p> + </details> + </details> + <p>outer details</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/close-nested-details.html b/layout/reftests/details-summary/close-nested-details.html new file mode 100644 index 000000000..07e8c030f --- /dev/null +++ b/layout/reftests/details-summary/close-nested-details.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + // Close the inner details. + document.getElementById("inner").open = false; + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details open> + <summary>outer summary</summary> + <details open id="inner"> + <summary>inner summary</summary> + <p>inner details</p> + <details open> + <summary>inner most summary</summary> + <p>inner most details</p> + </details> + </details> + <p>outer details</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/details-absolute-children-ref.html b/layout/reftests/details-summary/details-absolute-children-ref.html new file mode 100644 index 000000000..89a0c7a1c --- /dev/null +++ b/layout/reftests/details-summary/details-absolute-children-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + div#details { + background-color: orange; + width: 500px; + height: 200px; + } + div#summary { + background-color: green; + width: 50%; + } + div#in_summary { + position: absolute; + background-color: green; + top: 60px; + left: 100px; + width: 150px; + height: 100px; + } + div#before_summary { + position: absolute; + background-color: cyan; + top: 50px; + left: 50px; + width: 150px; + height: 100px; + z-index: 1; + } + </style> + <body> + <div id="details"> + <div id="before_summary">div before summary</div> + <div id="summary">Summary<div id="in_summary">div in summary</div></div> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/details-absolute-children.html b/layout/reftests/details-summary/details-absolute-children.html new file mode 100644 index 000000000..af4396f9f --- /dev/null +++ b/layout/reftests/details-summary/details-absolute-children.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + details { + background-color: orange; + width: 500px; + height: 200px; + } + summary::-moz-list-bullet { + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + summary { + background-color: green; + width: 50%; + } + div#in_summary { + position: absolute; + background-color: green; + top: 60px; + left: 100px; + width: 150px; + height: 100px; + } + div#before_summary { + position: absolute; + background-color: cyan; + top: 50px; + left: 50px; + width: 150px; + height: 100px; + } + </style> + <body> + <details open> + <div id="before_summary">div before summary</div> <!-- This div is at front. --> + <summary>Summary<div id="in_summary">div in summary</div></summary> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/details-after.html b/layout/reftests/details-summary/details-after.html new file mode 100644 index 000000000..6746919d7 --- /dev/null +++ b/layout/reftests/details-summary/details-after.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<head> + <style> + details::after { + content: "This is the details."; + /* Match the margins and display of <p> */ + display: block; + margin-block-start: 1em; + margin-block-end: 1em; + } + </style> +</head> +<html> + <body> + <details> + <summary>Summary</summary> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/details-before.html b/layout/reftests/details-summary/details-before.html new file mode 100644 index 000000000..103908919 --- /dev/null +++ b/layout/reftests/details-summary/details-before.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<head> + <style> + details::before { + content: "This is the details."; + /* Match the margins and display of <p> */ + display: block; + margin-block-start: 1em; + margin-block-end: 1em; + } + </style> +</head> +<html> + <body> + <details> + <summary>Summary</summary> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/details-display-inline-ref.html b/layout/reftests/details-summary/details-display-inline-ref.html new file mode 100644 index 000000000..7e28ef85d --- /dev/null +++ b/layout/reftests/details-summary/details-display-inline-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + div#details { + display: inline-block; + } + </style> + <body> + Details element: + <div id="details"> + <div>Summary</div> + <p>This is the details.</p> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/details-display-inline.html b/layout/reftests/details-summary/details-display-inline.html new file mode 100644 index 000000000..1f7b7c5da --- /dev/null +++ b/layout/reftests/details-summary/details-display-inline.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + details { + display: inline; + } + summary::-moz-list-bullet { + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + </style> + <body> + Details element: + <details open> + <summary>Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/details-first-line-ref.html b/layout/reftests/details-summary/details-first-line-ref.html new file mode 100644 index 000000000..0e76b97f2 --- /dev/null +++ b/layout/reftests/details-summary/details-first-line-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + div#details::first-line { + color: blue; + } + </style> + <body> + <div id="details"> + <span>Summary + <div>Block in summary</div> + </span> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/details-first-line.html b/layout/reftests/details-summary/details-first-line.html new file mode 100644 index 000000000..4ad2d9af5 --- /dev/null +++ b/layout/reftests/details-summary/details-first-line.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + summary { + display: inline; /* ::first-line appiles only to inline element. */ + } + + details::first-line { + color: blue; + } + </style> + <body> + <details> + <summary>Summary + <!-- Need ib-split so that the summary has multiple frames. --> + <div>Block in summary</div> + </summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/details-in-ol-ref.html b/layout/reftests/details-summary/details-in-ol-ref.html new file mode 100644 index 000000000..1aaa67b5c --- /dev/null +++ b/layout/reftests/details-summary/details-in-ol-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <body> + <ol> + <li>First item + <div> + <summary>Summary + <ul> + <li>First unordered item in summary</li> + <li>Second unordered item in summary</li> + </ul> + <div> + <ol> + <li>First item in summary</li> + <li>Second item in summary</li> + </ol> + </div> + <svg> + <foreignObject width="300" height="300"> + <ol> + <li>First item in foreignObject</li> + <li>Second item in foreignObject</li> + </ol> + </foreignObject> + </svg> + </summary> + <p>This is the details.</p> + <li>First item in details</li> + <li>Second item in details</li> + </div> + </li> + <li>Second item</li> + </ol> + </body> +</html> diff --git a/layout/reftests/details-summary/details-in-ol.html b/layout/reftests/details-summary/details-in-ol.html new file mode 100644 index 000000000..974c42776 --- /dev/null +++ b/layout/reftests/details-summary/details-in-ol.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + summary::-moz-list-bullet { + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + </style> + <body> + <!-- Test <ol> numbering is not affected by <details>. --> + <ol> + <li>First item + <details open> + <summary>Summary + <ul> + <li>First unordered item in summary</li> + <li>Second unordered item in summary</li> + </ul> + <div> + <ol> + <li>First item in summary</li> + <li>Second item in summary</li> + </ol> + </div> + <svg> + <foreignObject width="300" height="300"> + <ol> + <li>First item in foreignObject</li> + <li>Second item in foreignObject</li> + </ol> + </foreignObject> + </svg> + </summary> + <p>This is the details.</p> + <!-- Although html spec does not allow <li> inside <details>, we + deliberately omit the <ol> to test the renumbering isn't affected + by the summary. --> + <li>First item in details</li> + <li>Second item in details</li> + </details> + </li> + <li>Second item</li> + </ol> + </body> +</html> diff --git a/layout/reftests/details-summary/details-page-break-after-1.html b/layout/reftests/details-summary/details-page-break-after-1.html new file mode 100644 index 000000000..17dc48cb7 --- /dev/null +++ b/layout/reftests/details-summary/details-page-break-after-1.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-print"> + <style> + summary::-moz-list-bullet { + /* 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/layout/reftests/details-summary/details-page-break-after-2.html b/layout/reftests/details-summary/details-page-break-after-2.html new file mode 100644 index 000000000..c5e40e18a --- /dev/null +++ b/layout/reftests/details-summary/details-page-break-after-2.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-print"> + <style> + summary::-moz-list-bullet { + /* 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/layout/reftests/details-summary/details-page-break-before-1.html b/layout/reftests/details-summary/details-page-break-before-1.html new file mode 100644 index 000000000..48697feeb --- /dev/null +++ b/layout/reftests/details-summary/details-page-break-before-1.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-print"> + <style> + summary::-moz-list-bullet { + /* 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/layout/reftests/details-summary/details-page-break-before-2.html b/layout/reftests/details-summary/details-page-break-before-2.html new file mode 100644 index 000000000..c5e40e18a --- /dev/null +++ b/layout/reftests/details-summary/details-page-break-before-2.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-print"> + <style> + summary::-moz-list-bullet { + /* 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/layout/reftests/details-summary/details-percentage-height-children-ref.html b/layout/reftests/details-summary/details-percentage-height-children-ref.html new file mode 100644 index 000000000..38404d59c --- /dev/null +++ b/layout/reftests/details-summary/details-percentage-height-children-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + div#details { + background-color: orange; + width: 500px; + height: 300px; + } + div#summary { + background-color: green; + width: 50%; + height: 40%; + } + div#inner { + background-color: cyan; + width: 50%; + height: 60%; + } + </style> + <body> + <div id="details"> + <div id="summary">Summary: 40% height</div> + <div id="inner">Div: 60% height</div> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/details-percentage-height-children.html b/layout/reftests/details-summary/details-percentage-height-children.html new file mode 100644 index 000000000..d00f4053b --- /dev/null +++ b/layout/reftests/details-summary/details-percentage-height-children.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + details { + background-color: orange; + width: 500px; + height: 300px; + } + summary::-moz-list-bullet { + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + summary { + background-color: green; + width: 50%; + height: 40%; + } + div#inner { + background-color: cyan; + width: 50%; + height: 60%; + } + </style> + <body> + <details open> + <summary>Summary: 40% height</summary> + <div id="inner">Div: 60% height</div> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/details-three-columns-ref.html b/layout/reftests/details-summary/details-three-columns-ref.html new file mode 100644 index 000000000..ce2482853 --- /dev/null +++ b/layout/reftests/details-summary/details-three-columns-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + summary { + background-color: lightgreen; + } + div#columns { + -moz-column-count: 3; + -moz-column-rule: 1px solid lightgray; + -webkit-column-count: 3; + -webkit-column-rule: 1px solid lightgray; + border: 1px solid lightblue; + } + </style> + <body> + <div id="columns"> + <summary>Summary</summary> + <p>line</p> + <p>line</p> + <p>line</p> + <p>line</p> + <p>line</p> + <p>line</p> + <p>line</p> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/details-three-columns.html b/layout/reftests/details-summary/details-three-columns.html new file mode 100644 index 000000000..ac0a05672 --- /dev/null +++ b/layout/reftests/details-summary/details-three-columns.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + details { + -moz-column-count: 3; + -moz-column-rule: 1px solid lightgray; + -webkit-column-count: 3; + -webkit-column-rule: 1px solid lightgray; + border: 1px solid lightblue; + } + summary::-moz-list-bullet { + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + summary { + background-color: lightgreen; + } + </style> + <body> + <details open> + <summary>Summary</summary> + <p>line</p> + <p>line</p> + <p>line</p> + <p>line</p> + <p>line</p> + <p>line</p> + <p>line</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/details-two-pages.html b/layout/reftests/details-summary/details-two-pages.html new file mode 100644 index 000000000..d856cdf77 --- /dev/null +++ b/layout/reftests/details-summary/details-two-pages.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-print"> + <body> + <div> + <div style="page-break-after: always;">Summary</div> + <p>This is the details.</p> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/details-writing-mode-ref.html b/layout/reftests/details-summary/details-writing-mode-ref.html new file mode 100644 index 000000000..120040973 --- /dev/null +++ b/layout/reftests/details-summary/details-writing-mode-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + body { + display: grid; + grid-template-rows: auto; + grid-template-columns: repeat(3, 150px); + } + .details { + border: 1px solid lightblue; + } + </style> + <body> + <div class="details" style="writing-mode: horizontal-tb; direction: ltr;"> + <summary>Summary</summary> + <p>This is the details.</p> + </div> + <div class="details" style="writing-mode: vertical-rl; direction: ltr;"> + <summary>Summary</summary> + <p>This is the details.</p> + </div> + <div class="details" style="writing-mode: vertical-lr; direction: ltr;"> + <summary>Summary</summary> + <p>This is the details.</p> + </div> + <div class="details" style="writing-mode: horizontal-tb; direction: rtl;"> + <summary>Summary</summary> + <p>This is the details.</p> + </div> + <div class="details" style="writing-mode: vertical-rl; direction: rtl;"> + <summary>Summary</summary> + <p>This is the details.</p> + </div> + <div class="details" style="writing-mode: vertical-lr; direction: rtl;"> + <summary>Summary</summary> + <p>This is the details.</p> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/details-writing-mode.html b/layout/reftests/details-summary/details-writing-mode.html new file mode 100644 index 000000000..2a55651ef --- /dev/null +++ b/layout/reftests/details-summary/details-writing-mode.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + body { + display: grid; + grid-template-rows: auto; + grid-template-columns: repeat(3, 150px); + } + summary::-moz-list-bullet { + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + details { + border: 1px solid lightblue; + } + </style> + <body> + <details open style="writing-mode: horizontal-tb; direction: ltr;"> + <summary>Summary</summary> + <p>This is the details.</p> + </details> + <details open style="writing-mode: vertical-rl; direction: ltr;"> + <summary>Summary</summary> + <p>This is the details.</p> + </details> + <details open style="writing-mode: vertical-lr; direction: ltr;"> + <summary>Summary</summary> + <p>This is the details.</p> + </details> + <details open style="writing-mode: horizontal-tb; direction: rtl;"> + <summary>Summary</summary> + <p>This is the details.</p> + </details> + <details open style="writing-mode: vertical-rl; direction: rtl;"> + <summary>Summary</summary> + <p>This is the details.</p> + </details> + <details open style="writing-mode: vertical-lr; direction: rtl;"> + <summary>Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/disabled-no-summary-ref.html b/layout/reftests/details-summary/disabled-no-summary-ref.html new file mode 100644 index 000000000..6ecdbcdc0 --- /dev/null +++ b/layout/reftests/details-summary/disabled-no-summary-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <body> + <div> + <p>This is the details.</p> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/disabled-single-summary-ref.html b/layout/reftests/details-summary/disabled-single-summary-ref.html new file mode 100644 index 000000000..f643af6dc --- /dev/null +++ b/layout/reftests/details-summary/disabled-single-summary-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>Summary</div> + <p>This is the details.</p> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/dynamic-add-details.html b/layout/reftests/details-summary/dynamic-add-details.html new file mode 100644 index 000000000..6189d648a --- /dev/null +++ b/layout/reftests/details-summary/dynamic-add-details.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + // Append open <details> into <body> + var summary = document.createElement("summary"); + var summary_text = document.createTextNode("Summary"); + summary.appendChild(summary_text); + + var paragraph = document.createElement("p"); + var details_text = document.createTextNode("This is the details."); + paragraph.appendChild(details_text); + + var details = document.createElement("details"); + details.appendChild(summary); + details.appendChild(paragraph); + details.open = true; + + document.body.appendChild(details); + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + </body> +</html> diff --git a/layout/reftests/details-summary/dynamic-add-first-summary.html b/layout/reftests/details-summary/dynamic-add-first-summary.html new file mode 100644 index 000000000..d7d67c46c --- /dev/null +++ b/layout/reftests/details-summary/dynamic-add-first-summary.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + // Insert a <summary> as the first child of the <details>. + var summary = document.createElement("summary"); + var text = document.createTextNode("Summary"); + summary.appendChild(text); + + var details = document.getElementById("details"); + details.insertBefore(summary, details.children[0]); + + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details open id="details"> + <summary>Second Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/dynamic-add-paragraph-after-summary-close.html b/layout/reftests/details-summary/dynamic-add-paragraph-after-summary-close.html new file mode 100644 index 000000000..224c6cacc --- /dev/null +++ b/layout/reftests/details-summary/dynamic-add-paragraph-after-summary-close.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + // Insert <p> after <summary>. + var paragraph = document.createElement("p"); + var details_text = document.createTextNode("This is the details."); + paragraph.appendChild(details_text); + + var details = document.getElementById("details"); + details.appendChild(paragraph); + + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details id="details"> + <summary>Summary</summary> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/dynamic-add-paragraph-after-summary.html b/layout/reftests/details-summary/dynamic-add-paragraph-after-summary.html new file mode 100644 index 000000000..0d979bd2d --- /dev/null +++ b/layout/reftests/details-summary/dynamic-add-paragraph-after-summary.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + // Insert <p> after <summary>. + var paragraph = document.createElement("p"); + var details_text = document.createTextNode("This is the details."); + paragraph.appendChild(details_text); + + var details = document.getElementById("details"); + details.appendChild(paragraph); + + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details open id="details"> + <summary>Summary</summary> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/dynamic-add-paragraph-before-summary-close.html b/layout/reftests/details-summary/dynamic-add-paragraph-before-summary-close.html new file mode 100644 index 000000000..71f93b024 --- /dev/null +++ b/layout/reftests/details-summary/dynamic-add-paragraph-before-summary-close.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + // Insert <p> before <summary>. + var paragraph = document.createElement("p"); + var details_text = document.createTextNode("This is the details."); + paragraph.appendChild(details_text); + + var details = document.getElementById("details"); + details.insertBefore(paragraph, details.children[0]); + + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details id="details"> + <summary>Summary</summary> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/dynamic-add-paragraph-before-summary.html b/layout/reftests/details-summary/dynamic-add-paragraph-before-summary.html new file mode 100644 index 000000000..9a0d3340a --- /dev/null +++ b/layout/reftests/details-summary/dynamic-add-paragraph-before-summary.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + // Insert <p> before <summary>. + var paragraph = document.createElement("p"); + var details_text = document.createTextNode("This is the details."); + paragraph.appendChild(details_text); + + var details = document.getElementById("details"); + details.insertBefore(paragraph, details.children[0]); + + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details open id="details"> + <summary>Summary</summary> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/dynamic-add-second-summary.html b/layout/reftests/details-summary/dynamic-add-second-summary.html new file mode 100644 index 000000000..df4a43452 --- /dev/null +++ b/layout/reftests/details-summary/dynamic-add-second-summary.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + // Insert a <summary> as the first child of the <details>. + var summary = document.createElement("summary"); + var text = document.createTextNode("Second Summary"); + summary.appendChild(text); + + var details = document.getElementById("details"); + details.insertBefore(summary, details.children[1]); + + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details open id="details"> + <summary>Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/dynamic-add-single-summary.html b/layout/reftests/details-summary/dynamic-add-single-summary.html new file mode 100644 index 000000000..bcd5cc95e --- /dev/null +++ b/layout/reftests/details-summary/dynamic-add-single-summary.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + // Insert a <summary> as the first child of the <details>. + var summary = document.createElement("summary"); + var text = document.createTextNode("Summary"); + summary.appendChild(text); + + var details = document.getElementById("details"); + details.insertBefore(summary, details.children[0]); + + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details open id="details"> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/dynamic-add-summary-and-paragraph.html b/layout/reftests/details-summary/dynamic-add-summary-and-paragraph.html new file mode 100644 index 000000000..463ee3523 --- /dev/null +++ b/layout/reftests/details-summary/dynamic-add-summary-and-paragraph.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + // Append <summary> and <p> into <details>. + var summary = document.createElement("summary"); + var summary_text = document.createTextNode("Summary"); + summary.appendChild(summary_text); + + var paragraph = document.createElement("p"); + var details_text = document.createTextNode("This is the details."); + paragraph.appendChild(details_text); + + var details = document.getElementById("details"); + details.appendChild(summary); + details.appendChild(paragraph); + + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details open id="details"> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/dynamic-add-summary-not-first-child.html b/layout/reftests/details-summary/dynamic-add-summary-not-first-child.html new file mode 100644 index 000000000..98c599c7f --- /dev/null +++ b/layout/reftests/details-summary/dynamic-add-summary-not-first-child.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + // Insert a <summary> as the last child of the <details>. + var summary = document.createElement("summary"); + var text = document.createTextNode("Summary"); + summary.appendChild(text); + + var details = document.getElementById("details"); + details.appendChild(summary); + + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details open id="details"> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/dynamic-remove-first-summary.html b/layout/reftests/details-summary/dynamic-remove-first-summary.html new file mode 100644 index 000000000..b66c16a67 --- /dev/null +++ b/layout/reftests/details-summary/dynamic-remove-first-summary.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + // Remove first <summary> from <details>. Second <summary> should be used. + var details = document.getElementById("details"); + var summary = document.getElementById("summary"); + details.removeChild(summary); + + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details open id="details"> + <summary id="summary">Removed Summary</summary> + <summary>Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/dynamic-remove-second-summary.html b/layout/reftests/details-summary/dynamic-remove-second-summary.html new file mode 100644 index 000000000..5cd97d398 --- /dev/null +++ b/layout/reftests/details-summary/dynamic-remove-second-summary.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + // Remove first <summary> from <details>. Second <summary> should be used. + var details = document.getElementById("details"); + var summary = document.getElementById("summary"); + details.removeChild(summary); + + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details open id="details"> + <summary>Summary</summary> + <summary id="summary">Removed Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/dynamic-remove-single-summary.html b/layout/reftests/details-summary/dynamic-remove-single-summary.html new file mode 100644 index 000000000..382d00216 --- /dev/null +++ b/layout/reftests/details-summary/dynamic-remove-single-summary.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + // Remove <summary> from <details>. + var details = document.getElementById("details"); + var summary = document.getElementById("summary"); + details.removeChild(summary); + + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details open id="details"> + <summary id="summary">Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/dynamic-remove-summary-not-first-child.html b/layout/reftests/details-summary/dynamic-remove-summary-not-first-child.html new file mode 100644 index 000000000..13961452c --- /dev/null +++ b/layout/reftests/details-summary/dynamic-remove-summary-not-first-child.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + // Remove <summary> from <details>. + var details = document.getElementById("details"); + var summary = document.getElementById("summary"); + details.removeChild(summary); + + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details open id="details"> + <p>This is the details.</p> + <summary id="summary">Summary</summary> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/fixed-summary.html b/layout/reftests/details-summary/fixed-summary.html new file mode 100644 index 000000000..d79f17925 --- /dev/null +++ b/layout/reftests/details-summary/fixed-summary.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + summary { + position: fixed; + bottom: 0; + right: 0; + } + </style> + <body> + <details> + <summary>Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/float-details.html b/layout/reftests/details-summary/float-details.html new file mode 100644 index 000000000..8ec8babb1 --- /dev/null +++ b/layout/reftests/details-summary/float-details.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + details { + border: 1px solid red; + float: right; + } + </style> + <body> + <details> + <summary>Summary</summary> + <p>This is the details.</p> + </details> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + </body> +</html> diff --git a/layout/reftests/details-summary/float-in-summary-ref.html b/layout/reftests/details-summary/float-in-summary-ref.html new file mode 100644 index 000000000..c27bc7d95 --- /dev/null +++ b/layout/reftests/details-summary/float-in-summary-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + div#details { + background-color: orange; + overflow: auto; + width: 500px; + } + div#summary { + background-color: green; + width: 400px; + } + h4 { + background-color: cyan; + width: 100px; + height: 100px; + float: right; + margin: 0; + } + </style> + <body> + <div id="details"> + <div id="summary"> + <h4>This is float: right in summary</h4>Lorem ipsum dolor sit amet, + consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. + </div> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/float-in-summary.html b/layout/reftests/details-summary/float-in-summary.html new file mode 100644 index 000000000..6c0bb55f3 --- /dev/null +++ b/layout/reftests/details-summary/float-in-summary.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + details { + background-color: orange; + overflow: auto; + width: 500px; + } + summary::-moz-list-bullet { + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + summary { + background-color: green; + width: 400px; + } + h4 { + background-color: cyan; + width: 100px; + height: 100px; + float: right; + margin: 0; + } + </style> + <body> + <details open> + <summary> + <h4>This is float: right in summary</h4>Lorem ipsum dolor sit amet, + consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. + </summary> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/float-left-and-float-details-ref.html b/layout/reftests/details-summary/float-left-and-float-details-ref.html new file mode 100644 index 000000000..57e399779 --- /dev/null +++ b/layout/reftests/details-summary/float-left-and-float-details-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + body { + width: 400px; + } + div#float { + float: left; + width: 200px; + height: 200px; + background-color: lightgreen; + } + div#details { + float: left; + background-color: orange; + } + div#summary { + background-color: green; + } + </style> + <body> + <div id="float"></div> + <div id="details"> + <div id="summary">Summary</div> + <!-- No content due to closed details --> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/float-left-and-float-details.html b/layout/reftests/details-summary/float-left-and-float-details.html new file mode 100644 index 000000000..3806b580a --- /dev/null +++ b/layout/reftests/details-summary/float-left-and-float-details.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + body { + width: 400px; + } + div#float { + float: left; + width: 200px; + height: 200px; + background-color: lightgreen; + } + details { + float: left; + background-color: orange; + } + summary { + background-color: green; + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + </style> + <body> + <!-- This tall float block is necessary to reproduce the incorrect height of the details. --> + <div id="float"></div> + <details> + <summary>Summary</summary> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/float-left-and-float-open-details-ref.html b/layout/reftests/details-summary/float-left-and-float-open-details-ref.html new file mode 100644 index 000000000..eb5a75e3c --- /dev/null +++ b/layout/reftests/details-summary/float-left-and-float-open-details-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + body { + width: 400px; + } + div#float { + float: left; + width: 200px; + height: 200px; + background-color: lightgreen; + } + div#details { + float: left; + background-color: orange; + } + div#summary { + background-color: green; + } + </style> + <body> + <div id="float"></div> + <div id="details"> + <div id="summary">Summary</div> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/float-left-and-float-open-details.html b/layout/reftests/details-summary/float-left-and-float-open-details.html new file mode 100644 index 000000000..80e4d6a25 --- /dev/null +++ b/layout/reftests/details-summary/float-left-and-float-open-details.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + body { + width: 400px; + } + div#float { + float: left; + width: 200px; + height: 200px; + background-color: lightgreen; + } + details { + float: left; + background-color: orange; + } + summary { + background-color: green; + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + </style> + <body> + <!-- This tall float block is necessary to reproduce the incorrect height of the details. --> + <div id="float"></div> + <details open> + <summary>Summary</summary> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/float-left-and-inflow-details-ref.html b/layout/reftests/details-summary/float-left-and-inflow-details-ref.html new file mode 100644 index 000000000..909702354 --- /dev/null +++ b/layout/reftests/details-summary/float-left-and-inflow-details-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + body { + width: 400px; + } + div#float { + float: left; + width: 200px; + height: 200px; + background-color: lightgreen; + } + div#details { + background-color: orange; + } + div#summary { + background-color: green; + } + </style> + <body> + <div id="float"></div> + <div id="details"> + <div id="summary">Summary</div> + <!-- No content due to closed details --> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/float-left-and-inflow-details.html b/layout/reftests/details-summary/float-left-and-inflow-details.html new file mode 100644 index 000000000..92875763d --- /dev/null +++ b/layout/reftests/details-summary/float-left-and-inflow-details.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + body { + width: 400px; + } + div#float { + float: left; + width: 200px; + height: 200px; + background-color: lightgreen; + } + details { + background-color: orange; + } + summary { + background-color: green; + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + </style> + <body> + <div id="float"></div> + <details> + <summary>Summary</summary> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/float-left-and-inflow-open-details-ref.html b/layout/reftests/details-summary/float-left-and-inflow-open-details-ref.html new file mode 100644 index 000000000..1642ad623 --- /dev/null +++ b/layout/reftests/details-summary/float-left-and-inflow-open-details-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + body { + width: 400px; + } + div#float { + float: left; + width: 200px; + height: 200px; + background-color: lightgreen; + } + div#details { + background-color: orange; + } + div#summary { + background-color: green; + } + </style> + <body> + <div id="float"></div> + <div id="details"> + <div id="summary">Summary</div> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/float-left-and-inflow-open-details.html b/layout/reftests/details-summary/float-left-and-inflow-open-details.html new file mode 100644 index 000000000..a81c425c2 --- /dev/null +++ b/layout/reftests/details-summary/float-left-and-inflow-open-details.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + body { + width: 400px; + } + div#float { + float: left; + width: 200px; + height: 200px; + background-color: lightgreen; + } + details { + background-color: orange; + } + summary { + background-color: green; + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + </style> + <body> + <div id="float"></div> + <details open> + <summary>Summary</summary> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/float-open-details-contains-float-left-ref.html b/layout/reftests/details-summary/float-open-details-contains-float-left-ref.html new file mode 100644 index 000000000..b94338930 --- /dev/null +++ b/layout/reftests/details-summary/float-open-details-contains-float-left-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + body { + width: 400px; + } + div#float { + float: left; + width: 200px; + height: 400px; + background-color: lightgreen; + } + div#details { + float: left; + background-color: orange; + } + div#summary { + background-color: green; + } + </style> + <body> + <div id="details"> + <div id="summary">Summary</div> + <div id="float"></div> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/float-open-details-contains-float-left.html b/layout/reftests/details-summary/float-open-details-contains-float-left.html new file mode 100644 index 000000000..372fef96d --- /dev/null +++ b/layout/reftests/details-summary/float-open-details-contains-float-left.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + body { + width: 400px; + } + div#float { + float: left; + width: 200px; + height: 400px; + background-color: lightgreen; + } + details { + float: left; + background-color: orange; + } + summary { + background-color: green; + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + </style> + <body> + <details open> + <summary>Summary</summary> + <div id="float"></div> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/float-open-details-contains-float-right-ref.html b/layout/reftests/details-summary/float-open-details-contains-float-right-ref.html new file mode 100644 index 000000000..217ca4cd6 --- /dev/null +++ b/layout/reftests/details-summary/float-open-details-contains-float-right-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + body { + width: 400px; + } + div#float { + float: right; + width: 200px; + height: 400px; + background-color: lightgreen; + } + div#details { + float: right; + background-color: orange; + } + div#summary { + background-color: green; + } + </style> + <body> + <div id="details"> + <div id="summary">Summary</div> + <div id="float"></div> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/float-open-details-contains-float-right.html b/layout/reftests/details-summary/float-open-details-contains-float-right.html new file mode 100644 index 000000000..2b3805084 --- /dev/null +++ b/layout/reftests/details-summary/float-open-details-contains-float-right.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + body { + width: 400px; + } + div#float { + float: right; + width: 200px; + height: 400px; + background-color: lightgreen; + } + details { + float: right; + background-color: orange; + } + summary { + background-color: green; + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + </style> + <body> + <details open> + <summary>Summary</summary> + <div id="float"></div> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/float-right-and-float-details-ref.html b/layout/reftests/details-summary/float-right-and-float-details-ref.html new file mode 100644 index 000000000..e7349f4a4 --- /dev/null +++ b/layout/reftests/details-summary/float-right-and-float-details-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + body { + width: 400px; + } + div#float { + float: right; + width: 200px; + height: 200px; + background-color: lightgreen; + } + div#details { + float: right; + background-color: orange; + } + div#summary { + background-color: green; + } + </style> + <body> + <div id="float"></div> + <div id="details"> + <div id="summary">Summary</div> + <!-- No content due to closed details --> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/float-right-and-float-details.html b/layout/reftests/details-summary/float-right-and-float-details.html new file mode 100644 index 000000000..c82755859 --- /dev/null +++ b/layout/reftests/details-summary/float-right-and-float-details.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + body { + width: 400px; + } + div#float { + float: right; + width: 200px; + height: 200px; + background-color: lightgreen; + } + details { + float: right; + background-color: orange; + } + summary { + background-color: green; + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + </style> + <body> + <!-- This tall float block is necessary to reproduce the incorrect height of the details. --> + <div id="float"></div> + <details> + <summary>Summary</summary> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/float-right-and-float-open-details-ref.html b/layout/reftests/details-summary/float-right-and-float-open-details-ref.html new file mode 100644 index 000000000..c8c3b54b3 --- /dev/null +++ b/layout/reftests/details-summary/float-right-and-float-open-details-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + body { + width: 400px; + } + div#float { + float: right; + width: 200px; + height: 200px; + background-color: lightgreen; + } + div#details { + float: right; + background-color: orange; + } + div#summary { + background-color: green; + } + </style> + <body> + <div id="float"></div> + <div id="details"> + <div id="summary">Summary</div> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/float-right-and-float-open-details.html b/layout/reftests/details-summary/float-right-and-float-open-details.html new file mode 100644 index 000000000..857624aa4 --- /dev/null +++ b/layout/reftests/details-summary/float-right-and-float-open-details.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + body { + width: 400px; + } + div#float { + float: right; + width: 200px; + height: 200px; + background-color: lightgreen; + } + details { + float: right; + background-color: orange; + } + summary { + background-color: green; + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + </style> + <body> + <!-- This tall float block is necessary to reproduce the incorrect height of the details. --> + <div id="float"></div> + <details open> + <summary>Summary</summary> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/float-right-and-inflow-details-ref.html b/layout/reftests/details-summary/float-right-and-inflow-details-ref.html new file mode 100644 index 000000000..b65de5bdb --- /dev/null +++ b/layout/reftests/details-summary/float-right-and-inflow-details-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + body { + width: 400px; + } + div#float { + float: right; + width: 200px; + height: 200px; + background-color: lightgreen; + } + div#details { + background-color: orange; + } + div#summary { + background-color: green; + } + </style> + <body> + <div id="float"></div> + <div id="details"> + <div id="summary">Summary</div> + <!-- No content due to closed details --> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/float-right-and-inflow-details.html b/layout/reftests/details-summary/float-right-and-inflow-details.html new file mode 100644 index 000000000..b48bfaa95 --- /dev/null +++ b/layout/reftests/details-summary/float-right-and-inflow-details.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + body { + width: 400px; + } + div#float { + float: right; + width: 200px; + height: 200px; + background-color: lightgreen; + } + details { + background-color: orange; + } + summary { + background-color: green; + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + </style> + <body> + <div id="float"></div> + <details> + <summary>Summary</summary> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/float-right-and-inflow-open-details-ref.html b/layout/reftests/details-summary/float-right-and-inflow-open-details-ref.html new file mode 100644 index 000000000..f27b81a34 --- /dev/null +++ b/layout/reftests/details-summary/float-right-and-inflow-open-details-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + body { + width: 400px; + } + div#float { + float: right; + width: 200px; + height: 200px; + background-color: lightgreen; + } + div#details { + background-color: orange; + } + div#summary { + background-color: green; + } + </style> + <body> + <div id="float"></div> + <div id="details"> + <div id="summary">Summary</div> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/float-right-and-inflow-open-details.html b/layout/reftests/details-summary/float-right-and-inflow-open-details.html new file mode 100644 index 000000000..04fd46304 --- /dev/null +++ b/layout/reftests/details-summary/float-right-and-inflow-open-details.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + body { + width: 400px; + } + div#float { + float: right; + width: 200px; + height: 200px; + background-color: lightgreen; + } + details { + background-color: orange; + } + summary { + background-color: green; + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + </style> + <body> + <div id="float"></div> + <details open> + <summary>Summary</summary> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/key-enter-open-second-summary.html b/layout/reftests/details-summary/key-enter-open-second-summary.html new file mode 100644 index 000000000..4d5899787 --- /dev/null +++ b/layout/reftests/details-summary/key-enter-open-second-summary.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + // Dispatch 'return' key on second summary should not collapse details. + var summary = document.getElementById("summary"); + summary.dispatchEvent(new KeyboardEvent("keypress", {"keyCode": 13})); + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details open> + <summary>Summary</summary> + <summary id="summary">Second Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/key-enter-prevent-default.html b/layout/reftests/details-summary/key-enter-prevent-default.html new file mode 100644 index 000000000..6e657a643 --- /dev/null +++ b/layout/reftests/details-summary/key-enter-prevent-default.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + var summary = document.getElementById("summary"); + summary.addEventListener('click', function(e) { + // Prevent the details from toggling by key events. + e.preventDefault(); + }); + // Dispatch 'return' key to the summary element. + summary.dispatchEvent(new KeyboardEvent("keypress", {"keyCode": 13})); + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details> + <summary id="summary">Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/key-enter-single-summary.html b/layout/reftests/details-summary/key-enter-single-summary.html new file mode 100644 index 000000000..668573e90 --- /dev/null +++ b/layout/reftests/details-summary/key-enter-single-summary.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + var summary = document.getElementById("summary"); + // Dispatch 'return' key to the summary element. + summary.dispatchEvent(new KeyboardEvent("keypress", {"keyCode": 13})); + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details> + <summary id="summary">Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/key-space-single-summary.html b/layout/reftests/details-summary/key-space-single-summary.html new file mode 100644 index 000000000..8f8cecdb1 --- /dev/null +++ b/layout/reftests/details-summary/key-space-single-summary.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + var summary = document.getElementById("summary"); + // Dispatch 'space' keys to the summary element. + summary.dispatchEvent(new KeyboardEvent("keydown", {"keyCode": 32})); + summary.dispatchEvent(new KeyboardEvent("keyup", {"keyCode": 32})); + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details> + <summary id="summary">Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/mouse-click-change-details-to-display-none.html b/layout/reftests/details-summary/mouse-click-change-details-to-display-none.html new file mode 100644 index 000000000..64ff67bfd --- /dev/null +++ b/layout/reftests/details-summary/mouse-click-change-details-to-display-none.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + // Both Chrome and Safari add the 'open' attribute to the details element. + var details = document.getElementById("details"); + var summary = document.getElementById("summary"); + + document.body.addEventListener("click", function () { + // Change details to display: none in capturing phase. + details.style.display = "none"; + }, true); + + summary.dispatchEvent(new MouseEvent("click")); + + details.style.display = "block"; + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details id="details"> + <summary id="summary">Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/mouse-click-change-summary-to-display-none-ref.html b/layout/reftests/details-summary/mouse-click-change-summary-to-display-none-ref.html new file mode 100644 index 000000000..6ecdbcdc0 --- /dev/null +++ b/layout/reftests/details-summary/mouse-click-change-summary-to-display-none-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <body> + <div> + <p>This is the details.</p> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/mouse-click-change-summary-to-display-none.html b/layout/reftests/details-summary/mouse-click-change-summary-to-display-none.html new file mode 100644 index 000000000..47f97dc55 --- /dev/null +++ b/layout/reftests/details-summary/mouse-click-change-summary-to-display-none.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + // Both Chrome and Safari add the 'open' attribute to the details element. + // Firefox has the same behavior. + var details = document.getElementById("details"); + var summary = document.getElementById("summary"); + + document.body.addEventListener("click", function () { + // Change summary to display: none in capturing phase. + summary.style.display = "none"; + }, true); + + summary.dispatchEvent(new MouseEvent("click")); + + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details id="details"> + <summary id="summary">Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/mouse-click-display-none-details.html b/layout/reftests/details-summary/mouse-click-display-none-details.html new file mode 100644 index 000000000..70dec7332 --- /dev/null +++ b/layout/reftests/details-summary/mouse-click-display-none-details.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + // Both Chrome and Safari do not toggle the 'open' attribute for a <details> + // with 'display: none'. + var summary = document.getElementById("summary"); + summary.dispatchEvent(new MouseEvent("click")); + + var details = document.getElementById("details"); + details.style.display = "block"; + + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details id="details" style="display: none;"> + <summary id="summary">Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/mouse-click-fixed-summary.html b/layout/reftests/details-summary/mouse-click-fixed-summary.html new file mode 100644 index 000000000..bfaddf0d8 --- /dev/null +++ b/layout/reftests/details-summary/mouse-click-fixed-summary.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <style> + summary { + position: fixed; + bottom: 0; + right: 0; + } + </style> + <script> + function runTest() { + var summary = document.getElementById("summary"); + summary.dispatchEvent(new MouseEvent("click")); + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details> + <summary id="summary">Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/mouse-click-float-details.html b/layout/reftests/details-summary/mouse-click-float-details.html new file mode 100644 index 000000000..9785e9743 --- /dev/null +++ b/layout/reftests/details-summary/mouse-click-float-details.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + details { + border: 1px solid red; + float: right; + } + </style> + <script> + function runTest() { + var summary = document.getElementById("summary"); + summary.dispatchEvent(new MouseEvent("click")); + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details> + <summary id="summary">Summary</summary> + <p>This is the details.</p> + </details> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + </body> +</html> diff --git a/layout/reftests/details-summary/mouse-click-move-summary-to-different-details-ref.html b/layout/reftests/details-summary/mouse-click-move-summary-to-different-details-ref.html new file mode 100644 index 000000000..0dc94b41f --- /dev/null +++ b/layout/reftests/details-summary/mouse-click-move-summary-to-different-details-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <body> + <details open> + <summary>Summary 2</summary> + <summary>Summary 1</summary> + <p>This is the details 1.</p> + </details> + <details> + <p>This is the details 2.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/mouse-click-move-summary-to-different-details.html b/layout/reftests/details-summary/mouse-click-move-summary-to-different-details.html new file mode 100644 index 000000000..1e6c04505 --- /dev/null +++ b/layout/reftests/details-summary/mouse-click-move-summary-to-different-details.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + // Both Chrome and Safari do not add the 'open' attribute to details1 + // element, but Firefox does add 'open' to details1 since summary2 had been + // moved to details1 before receiving the 'click' event. + var details1 = document.getElementById("details1"); + var summary2 = document.getElementById("summary2"); + + document.body.addEventListener("click", function () { + // Move summary2 into details1 at capture phase, and summary2 will be the + // main summary of details1 at target phase. + details1.insertBefore(summary2, details1.children[0]); + }, true); + + summary2.dispatchEvent(new MouseEvent("click")); + + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details id="details1"> + <summary id="summary1">Summary 1</summary> + <p>This is the details 1.</p> + </details> + <details> + <summary id="summary2">Summary 2</summary> + <p>This is the details 2.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/mouse-click-open-second-summary.html b/layout/reftests/details-summary/mouse-click-open-second-summary.html new file mode 100644 index 000000000..e590f8620 --- /dev/null +++ b/layout/reftests/details-summary/mouse-click-open-second-summary.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + /* Clicking on second summary should not collapse details. */ + var summary = document.getElementById("summary"); + summary.dispatchEvent(new MouseEvent("click")); + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details open> + <summary>Summary</summary> + <summary id="summary">Second Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/mouse-click-open-single-summary.html b/layout/reftests/details-summary/mouse-click-open-single-summary.html new file mode 100644 index 000000000..9edf9d96b --- /dev/null +++ b/layout/reftests/details-summary/mouse-click-open-single-summary.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + var summary = document.getElementById("summary"); + summary.dispatchEvent(new MouseEvent("click")); + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details open> + <summary id="summary">Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/mouse-click-overflow-auto-details.html b/layout/reftests/details-summary/mouse-click-overflow-auto-details.html new file mode 100644 index 000000000..fb6b83c11 --- /dev/null +++ b/layout/reftests/details-summary/mouse-click-overflow-auto-details.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <style> + details { + background-color: orange; + overflow: auto; + width: 300px; + height: 200px; + } + summary::-moz-list-bullet { + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + summary { + background-color: green; + overflow: auto; + width: 200px; + height: 100px; + } + div.tall { + background-color: blue; + border: 1px dotted purple; + height: 1000px; + width: 50px; + } + </style> + <script> + function runTest() { + var summary = document.getElementById("summary"); + summary.dispatchEvent(new MouseEvent("click")); + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details> + <summary id="summary"> + <div class="tall"> + </div> + </summary> + <div class="tall"> + </div> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/mouse-click-overflow-hidden-details.html b/layout/reftests/details-summary/mouse-click-overflow-hidden-details.html new file mode 100644 index 000000000..ae44865df --- /dev/null +++ b/layout/reftests/details-summary/mouse-click-overflow-hidden-details.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <style> + details { + background-color: orange; + overflow: hidden; + width: 300px; + height: 200px; + } + summary::-moz-list-bullet { + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + summary { + background-color: green; + overflow: hidden; + width: 200px; + height: 100px; + } + </style> + <script> + function runTest() { + var summary = document.getElementById("summary"); + summary.dispatchEvent(new MouseEvent("click")); + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details> + <summary id="summary"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + </summary> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/mouse-click-second-summary.html b/layout/reftests/details-summary/mouse-click-second-summary.html new file mode 100644 index 000000000..978d8ad23 --- /dev/null +++ b/layout/reftests/details-summary/mouse-click-second-summary.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + var summary = document.getElementById("summary"); + summary.dispatchEvent(new MouseEvent("click")); + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details open> + <summary>Summary</summary> + <summary id="summary">Second Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/mouse-click-single-summary.html b/layout/reftests/details-summary/mouse-click-single-summary.html new file mode 100644 index 000000000..223c71f4d --- /dev/null +++ b/layout/reftests/details-summary/mouse-click-single-summary.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + var summary = document.getElementById("summary"); + summary.dispatchEvent(new MouseEvent("click")); + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details> + <summary id="summary">Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/mouse-click-twice-fixed-summary.html b/layout/reftests/details-summary/mouse-click-twice-fixed-summary.html new file mode 100644 index 000000000..ddeb617b6 --- /dev/null +++ b/layout/reftests/details-summary/mouse-click-twice-fixed-summary.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <style> + summary { + position: fixed; + bottom: 0; + right: 0; + } + </style> + <script> + function runTest() { + var summary = document.getElementById("summary"); + summary.dispatchEvent(new MouseEvent("click")); + summary.dispatchEvent(new MouseEvent("click")); + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details> + <summary id="summary">Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/mouse-click-twice-float-details.html b/layout/reftests/details-summary/mouse-click-twice-float-details.html new file mode 100644 index 000000000..c99c3ea33 --- /dev/null +++ b/layout/reftests/details-summary/mouse-click-twice-float-details.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + details { + border: 1px solid red; + float: right; + } + </style> + <script> + function runTest() { + var summary = document.getElementById("summary"); + summary.dispatchEvent(new MouseEvent("click")); + summary.dispatchEvent(new MouseEvent("click")); + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details> + <summary id="summary">Summary</summary> + <p>This is the details.</p> + </details> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + </body> +</html> diff --git a/layout/reftests/details-summary/mouse-click-twice-open-single-summary.html b/layout/reftests/details-summary/mouse-click-twice-open-single-summary.html new file mode 100644 index 000000000..d18f5e5da --- /dev/null +++ b/layout/reftests/details-summary/mouse-click-twice-open-single-summary.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + var summary = document.getElementById("summary"); + summary.dispatchEvent(new MouseEvent("click")); + summary.dispatchEvent(new MouseEvent("click")); + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details open> + <summary id="summary">Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/mouse-click-twice-overflow-auto-details.html b/layout/reftests/details-summary/mouse-click-twice-overflow-auto-details.html new file mode 100644 index 000000000..5398befb4 --- /dev/null +++ b/layout/reftests/details-summary/mouse-click-twice-overflow-auto-details.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <style> + details { + background-color: orange; + overflow: auto; + width: 300px; + height: 200px; + } + summary::-moz-list-bullet { + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + summary { + background-color: green; + overflow: auto; + width: 200px; + height: 100px; + } + </style> + <script> + function runTest() { + var summary = document.getElementById("summary"); + summary.dispatchEvent(new MouseEvent("click")); + summary.dispatchEvent(new MouseEvent("click")); + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details> + <summary id="summary"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + </summary> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/mouse-click-twice-overflow-hidden-details.html b/layout/reftests/details-summary/mouse-click-twice-overflow-hidden-details.html new file mode 100644 index 000000000..eb28c3305 --- /dev/null +++ b/layout/reftests/details-summary/mouse-click-twice-overflow-hidden-details.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <style> + details { + background-color: orange; + overflow: hidden; + width: 300px; + height: 200px; + } + summary::-moz-list-bullet { + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + summary { + background-color: green; + overflow: hidden; + width: 200px; + height: 100px; + } + </style> + <script> + function runTest() { + var summary = document.getElementById("summary"); + summary.dispatchEvent(new MouseEvent("click")); + summary.dispatchEvent(new MouseEvent("click")); + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details> + <summary id="summary"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + </summary> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/mouse-click-twice-single-summary.html b/layout/reftests/details-summary/mouse-click-twice-single-summary.html new file mode 100644 index 000000000..3609b84f2 --- /dev/null +++ b/layout/reftests/details-summary/mouse-click-twice-single-summary.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + var summary = document.getElementById("summary"); + summary.dispatchEvent(new MouseEvent("click")); + summary.dispatchEvent(new MouseEvent("click")); + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details> + <summary id="summary">Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/multiple-summary.html b/layout/reftests/details-summary/multiple-summary.html new file mode 100644 index 000000000..6ac034675 --- /dev/null +++ b/layout/reftests/details-summary/multiple-summary.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <body> + <details> + <summary>Summary</summary> + <summary>Second Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/no-summary-ref.html b/layout/reftests/details-summary/no-summary-ref.html new file mode 100644 index 000000000..e1b4d449b --- /dev/null +++ b/layout/reftests/details-summary/no-summary-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> + <details> + <summary>Details</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/no-summary.html b/layout/reftests/details-summary/no-summary.html new file mode 100644 index 000000000..f33b45f05 --- /dev/null +++ b/layout/reftests/details-summary/no-summary.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <body> + <details> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/open-details-after.html b/layout/reftests/details-summary/open-details-after.html new file mode 100644 index 000000000..1c5d8b725 --- /dev/null +++ b/layout/reftests/details-summary/open-details-after.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<head> + <style> + details::after { + content: "This is the details."; + /* Match the margins and display of <p> */ + display: block; + margin-block-start: 1em; + margin-block-end: 1em; + } + </style> +</head> +<html> + <body> + <details open> + <summary>Summary</summary> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/open-details-before.html b/layout/reftests/details-summary/open-details-before.html new file mode 100644 index 000000000..a35a58111 --- /dev/null +++ b/layout/reftests/details-summary/open-details-before.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<head> + <style> + details::before { + content: "This is the details."; + /* Match the margins and display of <p> */ + display: block; + margin-block-start: 1em; + margin-block-end: 1em; + } + </style> +</head> +<html> + <body> + <details open> + <summary>Summary</summary> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/open-details-first-line-1.html b/layout/reftests/details-summary/open-details-first-line-1.html new file mode 100644 index 000000000..a579d0342 --- /dev/null +++ b/layout/reftests/details-summary/open-details-first-line-1.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + summary { + display: inline; /* ::first-line appiles only to inline element. */ + } + + details::first-line { + color: blue; + } + </style> + <body> + <details open> + <summary>Summary + <!-- Need ib-split so that the summary has multiple frames. --> + <div>Block in summary</div> + </summary> + <span>This is the details.</span> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/open-details-first-line-2.html b/layout/reftests/details-summary/open-details-first-line-2.html new file mode 100644 index 000000000..93af8f462 --- /dev/null +++ b/layout/reftests/details-summary/open-details-first-line-2.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + summary { + display: inline; /* ::first-line appiles only to inline element. */ + } + + details::first-line { + color: blue; + } + </style> + <body> + <details open> + <span>This is the details.</span> + <summary>Summary + <!-- Need ib-split so that the summary has multiple frames. --> + <div>Block in summary</div> + </summary> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/open-details-first-line-ref.html b/layout/reftests/details-summary/open-details-first-line-ref.html new file mode 100644 index 000000000..d975ecfc7 --- /dev/null +++ b/layout/reftests/details-summary/open-details-first-line-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + div#details::first-line { + color: blue; + } + </style> + <body> + <div id="details"> + <span>Summary + <div>Block in summary</div> + </span> + <span>This is the details.</span> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/open-fixed-summary.html b/layout/reftests/details-summary/open-fixed-summary.html new file mode 100644 index 000000000..155e2abb7 --- /dev/null +++ b/layout/reftests/details-summary/open-fixed-summary.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + summary { + position: fixed; + bottom: 0; + right: 0; + } + </style> + <body> + <details open> + <summary>Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/open-float-details.html b/layout/reftests/details-summary/open-float-details.html new file mode 100644 index 000000000..4f0e5b46f --- /dev/null +++ b/layout/reftests/details-summary/open-float-details.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + details { + border: 1px solid red; + float: right; + } + </style> + <body> + <details open> + <summary>Summary</summary> + <p>This is the details.</p> + </details> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + </body> +</html> diff --git a/layout/reftests/details-summary/open-multiple-summary-ref.html b/layout/reftests/details-summary/open-multiple-summary-ref.html new file mode 100644 index 000000000..27b6046fe --- /dev/null +++ b/layout/reftests/details-summary/open-multiple-summary-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <body> + <details open> + <summary>Summary</summary> + <div>Second Summary</div> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/open-multiple-summary.html b/layout/reftests/details-summary/open-multiple-summary.html new file mode 100644 index 000000000..3216e5907 --- /dev/null +++ b/layout/reftests/details-summary/open-multiple-summary.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <body> + <details open> + <summary>Summary</summary> + <summary>Second Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/open-nested-details-ref.html b/layout/reftests/details-summary/open-nested-details-ref.html new file mode 100644 index 000000000..75eada081 --- /dev/null +++ b/layout/reftests/details-summary/open-nested-details-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <body> + <details open> + <summary>outer summary</summary> + <details open> + <summary>inner summary</summary> + <p>inner details</p> + <details open> + <summary>inner most summary</summary> + <p>inner most details</p> + </details> + </details> + <p>outer details</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/open-nested-details.html b/layout/reftests/details-summary/open-nested-details.html new file mode 100644 index 000000000..573ba50da --- /dev/null +++ b/layout/reftests/details-summary/open-nested-details.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html class="reftest-wait"> + <script> + function runTest() { + // Open the inner details. + document.getElementById("inner").open = true; + document.documentElement.removeAttribute("class"); + } + </script> + <body onload="runTest();"> + <details open> + <summary>outer summary</summary> + <details id="inner"> + <summary>inner summary</summary> + <p>inner details</p> + <details open> + <summary>inner most summary</summary> + <p>inner most details</p> + </details> + </details> + <p>outer details</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/open-no-summary-ref.html b/layout/reftests/details-summary/open-no-summary-ref.html new file mode 100644 index 000000000..e3f85c210 --- /dev/null +++ b/layout/reftests/details-summary/open-no-summary-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> + <details open> + <summary>Details</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/open-no-summary.html b/layout/reftests/details-summary/open-no-summary.html new file mode 100644 index 000000000..15c02115b --- /dev/null +++ b/layout/reftests/details-summary/open-no-summary.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <body> + <details open> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/open-single-summary.html b/layout/reftests/details-summary/open-single-summary.html new file mode 100644 index 000000000..9dd2c3da2 --- /dev/null +++ b/layout/reftests/details-summary/open-single-summary.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <body> + <details open> + <summary>Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/open-summary-block-style-ref.html b/layout/reftests/details-summary/open-summary-block-style-ref.html new file mode 100644 index 000000000..f643af6dc --- /dev/null +++ b/layout/reftests/details-summary/open-summary-block-style-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>Summary</div> + <p>This is the details.</p> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/open-summary-block-style.html b/layout/reftests/details-summary/open-summary-block-style.html new file mode 100644 index 000000000..0cb3ab851 --- /dev/null +++ b/layout/reftests/details-summary/open-summary-block-style.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <body> + <details open> + <!-- Test the disclosure triangle is gone. --> + <summary style="display: block;">Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/open-summary-inline-style-ref.html b/layout/reftests/details-summary/open-summary-inline-style-ref.html new file mode 100644 index 000000000..f0be2f66d --- /dev/null +++ b/layout/reftests/details-summary/open-summary-inline-style-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <body> + <div> + <span>Summary + <div>Block in summary</div> + </span> + <p>This is the details.</p> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/open-summary-inline-style.html b/layout/reftests/details-summary/open-summary-inline-style.html new file mode 100644 index 000000000..1c28d62fe --- /dev/null +++ b/layout/reftests/details-summary/open-summary-inline-style.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + summary { + display: inline; + } + </style> + <body> + <details open> + <p>This is the details.</p> + <!-- Make summary the second element child so that layout will try to + render it as the first child. --> + <summary>Summary + <!-- Need ib-split so that the summary has multiple frames. --> + <div>Block in summary</div> + </summary> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/open-summary-not-first-child.html b/layout/reftests/details-summary/open-summary-not-first-child.html new file mode 100644 index 000000000..8aca740c9 --- /dev/null +++ b/layout/reftests/details-summary/open-summary-not-first-child.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <body> + <details open> + <p>This is the details.</p> + <summary>Summary</summary> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/open-summary-table-cell-style-ref.html b/layout/reftests/details-summary/open-summary-table-cell-style-ref.html new file mode 100644 index 000000000..634bfec1d --- /dev/null +++ b/layout/reftests/details-summary/open-summary-table-cell-style-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <body> + <div> + <span style="display: table-cell;">Summary + <div>Block in summary</div> + </span> + <p>This is the details.</p> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/open-summary-table-cell-style.html b/layout/reftests/details-summary/open-summary-table-cell-style.html new file mode 100644 index 000000000..9b6ef4034 --- /dev/null +++ b/layout/reftests/details-summary/open-summary-table-cell-style.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + summary { + display: table-cell; + } + </style> + <body> + <details open> + <p>This is the details.</p> + <!-- Make summary the second element child so that layout will try to + render it as the first child. --> + <summary>Summary + <div>Block in summary</div> + </summary> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/overflow-auto-details.html b/layout/reftests/details-summary/overflow-auto-details.html new file mode 100644 index 000000000..ef8abb430 --- /dev/null +++ b/layout/reftests/details-summary/overflow-auto-details.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + details { + background-color: orange; + overflow: auto; + width: 300px; + height: 200px; + } + summary::-moz-list-bullet { + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + summary { + background-color: green; + overflow: auto; + width: 200px; + height: 100px; + } + </style> + <body> + <details> + <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + </summary> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/overflow-auto-open-details-ref.html b/layout/reftests/details-summary/overflow-auto-open-details-ref.html new file mode 100644 index 000000000..0ab995cdb --- /dev/null +++ b/layout/reftests/details-summary/overflow-auto-open-details-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + div#details { + background-color: orange; + overflow: auto; + width: 300px; + height: 200px; + } + div#summary { + background-color: green; + overflow: auto; + width: 200px; + height: 100px; + } + div.tall { + background-color: blue; + border: 1px dotted purple; + height: 1000px; + width: 50px; + } + </style> + <body> + <div id="details"> + <div id="summary"> + <div class="tall"> + </div> + </div> + <div class="tall"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/overflow-auto-open-details.html b/layout/reftests/details-summary/overflow-auto-open-details.html new file mode 100644 index 000000000..0be656e75 --- /dev/null +++ b/layout/reftests/details-summary/overflow-auto-open-details.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + details { + background-color: orange; + overflow: auto; + width: 300px; + height: 200px; + } + summary::-moz-list-bullet { + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + summary { + background-color: green; + overflow: auto; + width: 200px; + height: 100px; + } + div.tall { + background-color: blue; + border: 1px dotted purple; + height: 1000px; + width: 50px; + } + </style> + <body> + <details open> + <summary> + <div class="tall"> + </div> + </summary> + <div class="tall"> + </div> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/overflow-hidden-details.html b/layout/reftests/details-summary/overflow-hidden-details.html new file mode 100644 index 000000000..c92fd6650 --- /dev/null +++ b/layout/reftests/details-summary/overflow-hidden-details.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + details { + background-color: orange; + overflow: hidden; + width: 300px; + height: 200px; + } + summary::-moz-list-bullet { + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + summary { + background-color: green; + overflow: hidden; + width: 200px; + height: 100px; + } + </style> + <body> + <details> + <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + </summary> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/overflow-hidden-open-details-ref.html b/layout/reftests/details-summary/overflow-hidden-open-details-ref.html new file mode 100644 index 000000000..a8ae2039d --- /dev/null +++ b/layout/reftests/details-summary/overflow-hidden-open-details-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + div#details { + background-color: orange; + overflow: hidden; + width: 300px; + height: 200px; + } + div#summary { + background-color: green; + overflow: hidden; + width: 200px; + height: 100px; + } + </style> + <body> + <div id="details"> + <div id="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit + in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui + officia deserunt mollit anim id est laborum. + </div> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/overflow-hidden-open-details.html b/layout/reftests/details-summary/overflow-hidden-open-details.html new file mode 100644 index 000000000..8fcc03dc7 --- /dev/null +++ b/layout/reftests/details-summary/overflow-hidden-open-details.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + details { + background-color: orange; + overflow: hidden; + width: 300px; + height: 200px; + } + summary::-moz-list-bullet { + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + summary { + background-color: green; + overflow: hidden; + width: 200px; + height: 100px; + } + </style> + <body> + <details open> + <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + </summary> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/overflow-scroll-details-ref.html b/layout/reftests/details-summary/overflow-scroll-details-ref.html new file mode 100644 index 000000000..b85a242c9 --- /dev/null +++ b/layout/reftests/details-summary/overflow-scroll-details-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + div#details { + background-color: orange; + overflow: scroll; + width: 300px; + height: 200px; + } + div#summary { + background-color: green; + width: 200px; + height: 100px; + } + </style> + <body> + <div id="details"> + <div id="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit + in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui + officia deserunt mollit anim id est laborum. + </div> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/overflow-scroll-details.html b/layout/reftests/details-summary/overflow-scroll-details.html new file mode 100644 index 000000000..62ef22f4a --- /dev/null +++ b/layout/reftests/details-summary/overflow-scroll-details.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + details { + background-color: orange; + overflow: scroll; + width: 300px; + height: 200px; + } + summary::-moz-list-bullet { + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + summary { + background-color: green; + width: 200px; + height: 100px; + } + </style> + <body> + <details> + <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + </summary> + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/reftest-stylo.list b/layout/reftests/details-summary/reftest-stylo.list new file mode 100644 index 000000000..e23b1206b --- /dev/null +++ b/layout/reftests/details-summary/reftest-stylo.list @@ -0,0 +1,87 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +default-preferences pref(dom.details_element.enabled,true) + +# Disable <details> and <summary> +pref(dom.details_element.enabled,false) == single-summary.html single-summary.html +pref(dom.details_element.enabled,false) == open-single-summary.html open-single-summary.html +pref(dom.details_element.enabled,false) == no-summary.html no-summary.html + +# Basic <summary> handling +== multiple-summary.html multiple-summary.html +== open-multiple-summary.html open-multiple-summary.html +== summary-not-first-child.html summary-not-first-child.html +== open-summary-not-first-child.html open-summary-not-first-child.html +== open-summary-block-style.html open-summary-block-style.html +== no-summary.html no-summary.html +== open-no-summary.html open-no-summary.html +== summary-not-in-details.html summary-not-in-details.html +== summary-not-direct-child.html summary-not-direct-child.html +== float-in-summary.html float-in-summary.html + +# Add elements dynamically +== dynamic-add-single-summary.html dynamic-add-single-summary.html +== dynamic-add-summary-not-first-child.html dynamic-add-summary-not-first-child.html +== dynamic-add-summary-and-paragraph.html dynamic-add-summary-and-paragraph.html +== dynamic-add-paragraph-before-summary.html dynamic-add-paragraph-before-summary.html +== dynamic-add-paragraph-before-summary-close.html dynamic-add-paragraph-before-summary-close.html +== dynamic-add-paragraph-after-summary.html dynamic-add-paragraph-after-summary.html +== dynamic-add-paragraph-after-summary-close.html dynamic-add-paragraph-after-summary-close.html +== dynamic-add-details.html dynamic-add-details.html +== dynamic-add-first-summary.html dynamic-add-first-summary.html +== dynamic-add-second-summary.html dynamic-add-second-summary.html + +# Remove elements dynamically +== dynamic-remove-single-summary.html dynamic-remove-single-summary.html +== dynamic-remove-summary-not-first-child.html dynamic-remove-summary-not-first-child.html +== dynamic-remove-first-summary.html dynamic-remove-first-summary.html +== dynamic-remove-second-summary.html dynamic-remove-second-summary.html + +# Toggle details by open attribute +== close-nested-details.html close-nested-details.html +== open-nested-details.html open-nested-details.html + +# With 'overflow' property +== overflow-hidden-open-details.html overflow-hidden-open-details.html +== overflow-auto-open-details.html overflow-auto-open-details.html + +# With pagination property +== details-page-break-after-1.html details-page-break-after-1.html +== details-page-break-after-2.html details-page-break-after-2.html +== details-page-break-before-1.html details-page-break-before-1.html +== details-page-break-before-2.html details-page-break-before-2.html + +# Various properties on details or summary +== details-display-inline.html details-display-inline.html +== details-percentage-height-children.html details-percentage-height-children.html +== details-absolute-children.html details-absolute-children.html +== details-three-columns.html details-three-columns.html +== details-writing-mode.html details-writing-mode.html +== details-in-ol.html details-in-ol.html +== summary-three-columns.html summary-three-columns.html + +# Dispatch mouse click to summary +== mouse-click-single-summary.html mouse-click-single-summary.html +== mouse-click-twice-single-summary.html mouse-click-twice-single-summary.html +== mouse-click-open-single-summary.html mouse-click-open-single-summary.html +== mouse-click-twice-open-single-summary.html mouse-click-twice-open-single-summary.html +== mouse-click-open-second-summary.html mouse-click-open-second-summary.html +== mouse-click-overflow-hidden-details.html mouse-click-overflow-hidden-details.html +== mouse-click-twice-overflow-hidden-details.html mouse-click-twice-overflow-hidden-details.html +skip == mouse-click-overflow-auto-details.html mouse-click-overflow-auto-details.html +== mouse-click-twice-overflow-auto-details.html mouse-click-twice-overflow-auto-details.html +== mouse-click-display-none-details.html mouse-click-display-none-details.html +== mouse-click-change-details-to-display-none.html mouse-click-change-details-to-display-none.html +== mouse-click-change-summary-to-display-none.html mouse-click-change-summary-to-display-none.html +== mouse-click-move-summary-to-different-details.html mouse-click-move-summary-to-different-details.html + +# Dispatch mouse click to out-of-flow details or summary +== mouse-click-fixed-summary.html mouse-click-fixed-summary.html +== mouse-click-twice-fixed-summary.html mouse-click-twice-fixed-summary.html +== mouse-click-float-details.html mouse-click-float-details.html +== mouse-click-twice-float-details.html mouse-click-twice-float-details.html + +# Dispatch keyboard event to summary +== key-enter-single-summary.html key-enter-single-summary.html +== key-enter-open-second-summary.html key-enter-open-second-summary.html +== key-enter-prevent-default.html key-enter-prevent-default.html +== key-space-single-summary.html key-space-single-summary.html diff --git a/layout/reftests/details-summary/reftest.list b/layout/reftests/details-summary/reftest.list new file mode 100644 index 000000000..92b1404b5 --- /dev/null +++ b/layout/reftests/details-summary/reftest.list @@ -0,0 +1,110 @@ +default-preferences pref(dom.details_element.enabled,true) + +# Disable <details> and <summary> +pref(dom.details_element.enabled,false) == single-summary.html disabled-single-summary-ref.html +pref(dom.details_element.enabled,false) == open-single-summary.html disabled-single-summary-ref.html +pref(dom.details_element.enabled,false) == no-summary.html disabled-no-summary-ref.html + +# Basic <summary> handling +== multiple-summary.html single-summary.html +== open-multiple-summary.html open-multiple-summary-ref.html +== summary-not-first-child.html single-summary.html +== open-summary-not-first-child.html open-single-summary.html +== open-summary-block-style.html open-summary-block-style-ref.html +== open-summary-inline-style.html open-summary-inline-style-ref.html +== open-summary-table-cell-style.html open-summary-table-cell-style-ref.html +== no-summary.html no-summary-ref.html +== open-no-summary.html open-no-summary-ref.html +== summary-not-in-details.html summary-not-in-details-ref.html +== summary-not-direct-child.html summary-not-direct-child-ref.html +== float-in-summary.html float-in-summary-ref.html + +# Add elements dynamically +== dynamic-add-single-summary.html open-single-summary.html +== dynamic-add-summary-not-first-child.html open-single-summary.html +== dynamic-add-summary-and-paragraph.html open-single-summary.html +== dynamic-add-paragraph-before-summary.html open-single-summary.html +== dynamic-add-paragraph-before-summary-close.html single-summary.html +== dynamic-add-paragraph-after-summary.html open-single-summary.html +== dynamic-add-paragraph-after-summary-close.html single-summary.html +== dynamic-add-details.html open-single-summary.html +== dynamic-add-first-summary.html open-multiple-summary.html +== dynamic-add-second-summary.html open-multiple-summary.html + +# Remove elements dynamically +== dynamic-remove-single-summary.html open-no-summary.html +== dynamic-remove-summary-not-first-child.html open-no-summary.html +== dynamic-remove-first-summary.html open-single-summary.html +== dynamic-remove-second-summary.html open-single-summary.html + +# Toggle details by open attribute +== close-nested-details.html close-nested-details-ref.html +== open-nested-details.html open-nested-details-ref.html + +# With 'overflow' property +== overflow-hidden-open-details.html overflow-hidden-open-details-ref.html +== overflow-auto-open-details.html overflow-auto-open-details-ref.html +== overflow-scroll-details.html overflow-scroll-details-ref.html + +# With pagination property +== details-page-break-after-1.html details-two-pages.html +== details-page-break-after-2.html details-two-pages.html +== details-page-break-before-1.html details-two-pages.html +== details-page-break-before-2.html details-two-pages.html + +# With 'float' property +== float-left-and-float-details.html float-left-and-float-details-ref.html +== float-left-and-inflow-details.html float-left-and-inflow-details-ref.html +== float-left-and-float-open-details.html float-left-and-float-open-details-ref.html +== float-left-and-inflow-open-details.html float-left-and-inflow-open-details-ref.html +== float-right-and-float-details.html float-right-and-float-details-ref.html +== float-right-and-inflow-details.html float-right-and-inflow-details-ref.html +== float-right-and-float-open-details.html float-right-and-float-open-details-ref.html +== float-right-and-inflow-open-details.html float-right-and-inflow-open-details-ref.html +== float-open-details-contains-float-left.html float-open-details-contains-float-left-ref.html +== float-open-details-contains-float-right.html float-open-details-contains-float-right-ref.html + +# Various properties on details or summary +== details-display-inline.html details-display-inline-ref.html +== details-percentage-height-children.html details-percentage-height-children-ref.html +== details-absolute-children.html details-absolute-children-ref.html +== details-three-columns.html details-three-columns-ref.html +== details-writing-mode.html details-writing-mode-ref.html +== details-in-ol.html details-in-ol-ref.html +== summary-three-columns.html summary-three-columns-ref.html +== details-first-line.html details-first-line-ref.html +== open-details-first-line-1.html open-details-first-line-ref.html +== open-details-first-line-2.html open-details-first-line-ref.html + +# Dispatch mouse click to summary +== mouse-click-single-summary.html open-single-summary.html +== mouse-click-twice-single-summary.html single-summary.html +== mouse-click-open-single-summary.html single-summary.html +== mouse-click-twice-open-single-summary.html open-single-summary.html +== mouse-click-open-second-summary.html open-multiple-summary.html +== mouse-click-overflow-hidden-details.html overflow-hidden-open-details.html +== mouse-click-twice-overflow-hidden-details.html overflow-hidden-details.html +fuzzy-if(gtkWidget,1,20) == mouse-click-overflow-auto-details.html overflow-auto-open-details.html #Bug 1294278 +== mouse-click-twice-overflow-auto-details.html overflow-auto-details.html +== mouse-click-display-none-details.html open-single-summary.html +== mouse-click-change-details-to-display-none.html open-single-summary.html +== mouse-click-change-summary-to-display-none.html mouse-click-change-summary-to-display-none-ref.html +== mouse-click-move-summary-to-different-details.html mouse-click-move-summary-to-different-details-ref.html + +# Dispatch mouse click to out-of-flow details or summary +== mouse-click-fixed-summary.html open-fixed-summary.html +== mouse-click-twice-fixed-summary.html fixed-summary.html +== mouse-click-float-details.html open-float-details.html +fuzzy(1,1) == mouse-click-twice-float-details.html float-details.html # Bug 1316430 + +# Dispatch keyboard event to summary +== key-enter-single-summary.html open-single-summary.html +== key-enter-open-second-summary.html open-multiple-summary.html +== key-enter-prevent-default.html single-summary.html +== key-space-single-summary.html open-single-summary.html + +# Generated content bits +== details-after.html single-summary.html +== details-before.html single-summary.html +== open-details-after.html open-single-summary.html +== open-details-before.html open-single-summary.html diff --git a/layout/reftests/details-summary/single-summary.html b/layout/reftests/details-summary/single-summary.html new file mode 100644 index 000000000..95d125237 --- /dev/null +++ b/layout/reftests/details-summary/single-summary.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <body> + <details> + <summary>Summary</summary> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/summary-not-direct-child-ref.html b/layout/reftests/details-summary/summary-not-direct-child-ref.html new file mode 100644 index 000000000..54cf25430 --- /dev/null +++ b/layout/reftests/details-summary/summary-not-direct-child-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> + <details open> + <span><div>Summary</div></span> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/summary-not-direct-child.html b/layout/reftests/details-summary/summary-not-direct-child.html new file mode 100644 index 000000000..c12b0719e --- /dev/null +++ b/layout/reftests/details-summary/summary-not-direct-child.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <body> + <details open> + <span><summary>Summary</summary></span> + <p>This is the details.</p> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/summary-not-first-child.html b/layout/reftests/details-summary/summary-not-first-child.html new file mode 100644 index 000000000..c06a6e3ac --- /dev/null +++ b/layout/reftests/details-summary/summary-not-first-child.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <body> + <details> + <p>This is the details.</p> + <summary>Summary</summary> + </details> + </body> +</html> diff --git a/layout/reftests/details-summary/summary-not-in-details-ref.html b/layout/reftests/details-summary/summary-not-in-details-ref.html new file mode 100644 index 000000000..1d4f5c6ac --- /dev/null +++ b/layout/reftests/details-summary/summary-not-in-details-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <body> + <div>Summary</div> + </body> +</html> diff --git a/layout/reftests/details-summary/summary-not-in-details.html b/layout/reftests/details-summary/summary-not-in-details.html new file mode 100644 index 000000000..c0ff654f1 --- /dev/null +++ b/layout/reftests/details-summary/summary-not-in-details.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <body> + <!-- Render standalone summary as a normal block element. --> + <summary>Summary</summary> + </body> +</html> diff --git a/layout/reftests/details-summary/summary-three-columns-ref.html b/layout/reftests/details-summary/summary-three-columns-ref.html new file mode 100644 index 000000000..1aff0fa33 --- /dev/null +++ b/layout/reftests/details-summary/summary-three-columns-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + .summary-columns { + -moz-column-count: 3; + -moz-column-rule: 1px solid lightgray; + -webkit-column-count: 3; + -webkit-column-rule: 1px solid lightgray; + border: 1px solid lightblue; + background-color: lightgreen; + } + </style> + <body> + <div> + <div class="summary-columns"> + <p>line</p> + <p>line</p> + <p>line</p> + <p>line</p> + <p>line</p> + <p>line</p> + <p>line</p> + </div> + <p>This is the details.</p> + </div> + </body> +</html> diff --git a/layout/reftests/details-summary/summary-three-columns.html b/layout/reftests/details-summary/summary-three-columns.html new file mode 100644 index 000000000..5b21cc569 --- /dev/null +++ b/layout/reftests/details-summary/summary-three-columns.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> + +<html> + <style> + summary::-moz-list-bullet { + /* Hide the triangle for comparing with div in reftest. */ + list-style-type: none; + } + summary { + -moz-column-count: 3; + -moz-column-rule: 1px solid lightgray; + -webkit-column-count: 3; + -webkit-column-rule: 1px solid lightgray; + border: 1px solid lightblue; + background-color: lightgreen; + } + </style> + <body> + <details open> + <summary> + <p>line</p> + <p>line</p> + <p>line</p> + <p>line</p> + <p>line</p> + <p>line</p> + <p>line</p> + </summary> + <p>This is the details.</p> + </details> + </body> +</html> |