From 36d22d82aa202bb199967e9512281e9a53db42c9 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 21:33:14 +0200
Subject: Adding upstream version 115.7.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../details-summary/close-nested-details-ref.html  | 20 +++++
 .../details-summary/close-nested-details.html      | 27 ++++++
 .../details-absolute-children-ref.html             | 40 +++++++++
 .../details-summary/details-absolute-children.html | 41 ++++++++++
 .../details-summary/details-after-ref.html         |  5 ++
 layout/reftests/details-summary/details-after.html | 24 ++++++
 .../details-summary/details-before-ref.html        |  5 ++
 .../reftests/details-summary/details-before.html   | 24 ++++++
 .../details-display-inline-ref.html                | 18 ++++
 .../details-summary/details-display-inline.html    | 22 +++++
 .../details-summary/details-first-line-ref.html    | 13 +++
 .../details-summary/details-first-line.html        | 24 ++++++
 .../details-summary/details-in-ol-ref.html         | 38 +++++++++
 layout/reftests/details-summary/details-in-ol.html | 48 +++++++++++
 .../details-percentage-height-children-ref.html    | 29 +++++++
 .../details-percentage-height-children.html        | 33 ++++++++
 .../details-summary/details-three-columns-ref.html | 30 +++++++
 .../details-summary/details-three-columns.html     | 34 ++++++++
 .../details-summary/details-writing-mode-ref.html  | 42 ++++++++++
 .../details-summary/details-writing-mode.html      | 46 +++++++++++
 .../details-summary/dynamic-add-details.html       | 28 +++++++
 .../details-summary/dynamic-add-first-summary.html | 25 ++++++
 .../dynamic-add-paragraph-after-summary-close.html | 24 ++++++
 .../dynamic-add-paragraph-after-summary.html       | 24 ++++++
 ...dynamic-add-paragraph-before-summary-close.html | 24 ++++++
 .../dynamic-add-paragraph-before-summary.html      | 24 ++++++
 .../dynamic-add-second-summary.html                | 25 ++++++
 .../dynamic-add-single-summary.html                | 24 ++++++
 .../dynamic-add-summary-and-paragraph.html         | 28 +++++++
 .../dynamic-add-summary-not-first-child.html       | 24 ++++++
 .../dynamic-remove-first-summary.html              | 23 ++++++
 .../dynamic-remove-second-summary.html             | 23 ++++++
 .../dynamic-remove-single-summary.html             | 22 +++++
 .../dynamic-remove-summary-not-first-child.html    | 22 +++++
 layout/reftests/details-summary/fixed-summary.html | 19 +++++
 layout/reftests/details-summary/float-details.html | 19 +++++
 .../details-summary/float-in-summary-ref.html      | 40 +++++++++
 .../reftests/details-summary/float-in-summary.html | 42 ++++++++++
 .../float-left-and-float-details-ref.html          | 31 +++++++
 .../float-left-and-float-details.html              | 40 +++++++++
 .../float-left-and-float-open-details-ref.html     | 37 +++++++++
 .../float-left-and-float-open-details.html         | 40 +++++++++
 .../float-left-and-inflow-details-ref.html         | 30 +++++++
 .../float-left-and-inflow-details.html             | 38 +++++++++
 .../float-left-and-inflow-open-details-ref.html    | 36 ++++++++
 .../float-left-and-inflow-open-details.html        | 38 +++++++++
 ...float-open-details-contains-float-left-ref.html | 30 +++++++
 .../float-open-details-contains-float-left.html    | 32 ++++++++
 ...loat-open-details-contains-float-right-ref.html | 30 +++++++
 .../float-open-details-contains-float-right.html   | 32 ++++++++
 .../float-right-and-float-details-ref.html         | 31 +++++++
 .../float-right-and-float-details.html             | 40 +++++++++
 .../float-right-and-float-open-details-ref.html    | 37 +++++++++
 .../float-right-and-float-open-details.html        | 40 +++++++++
 .../float-right-and-inflow-details-ref.html        | 30 +++++++
 .../float-right-and-inflow-details.html            | 38 +++++++++
 .../float-right-and-inflow-open-details-ref.html   | 36 ++++++++
 .../float-right-and-inflow-open-details.html       | 38 +++++++++
 ...mouse-click-change-details-to-display-none.html | 29 +++++++
 ...e-click-change-summary-to-display-none-ref.html | 11 +++
 ...mouse-click-change-summary-to-display-none.html | 29 +++++++
 .../mouse-click-display-none-details.html          | 25 ++++++
 .../details-summary/mouse-click-fixed-summary.html | 26 ++++++
 .../details-summary/mouse-click-float-details.html | 26 ++++++
 ...lick-move-summary-to-different-details-ref.html | 16 ++++
 ...se-click-move-summary-to-different-details.html | 35 ++++++++
 .../mouse-click-open-second-summary.html           | 21 +++++
 .../mouse-click-open-single-summary.html           | 19 +++++
 .../mouse-click-overflow-auto-details.html         | 47 +++++++++++
 .../mouse-click-overflow-hidden-details.html       | 51 ++++++++++++
 .../mouse-click-second-summary.html                | 20 +++++
 .../mouse-click-single-summary.html                | 19 +++++
 .../mouse-click-twice-fixed-summary.html           | 27 ++++++
 .../mouse-click-twice-float-details.html           | 27 ++++++
 .../mouse-click-twice-open-single-summary.html     | 20 +++++
 .../mouse-click-twice-overflow-auto-details.html   | 50 ++++++++++++
 .../mouse-click-twice-overflow-hidden-details.html | 50 ++++++++++++
 .../mouse-click-twice-single-summary.html          | 20 +++++
 ...ove-float-summary-to-different-details-ref.html | 16 ++++
 .../move-float-summary-to-different-details.html   | 26 ++++++
 ...-absolute-summary-to-different-details-ref.html | 16 ++++
 ...tion-absolute-summary-to-different-details.html | 26 ++++++
 .../reftests/details-summary/multiple-summary.html | 13 +++
 .../reftests/details-summary/no-summary-ref.html   | 12 +++
 layout/reftests/details-summary/no-summary.html    | 11 +++
 .../details-summary/open-details-after.html        | 21 +++++
 .../details-summary/open-details-before.html       | 24 ++++++
 .../details-summary/open-details-first-line-1.html | 24 ++++++
 .../details-summary/open-details-first-line-2.html | 24 ++++++
 .../open-details-first-line-ref.html               | 14 ++++
 .../details-summary/open-fixed-summary.html        | 19 +++++
 .../details-summary/open-float-details.html        | 19 +++++
 .../details-summary/open-multiple-summary-ref.html | 13 +++
 .../details-summary/open-multiple-summary.html     | 13 +++
 .../details-summary/open-nested-details-ref.html   | 20 +++++
 .../details-summary/open-nested-details.html       | 27 ++++++
 .../details-summary/open-no-summary-ref.html       | 12 +++
 .../reftests/details-summary/open-no-summary.html  | 11 +++
 .../details-summary/open-single-summary.html       | 12 +++
 .../open-summary-block-style-ref.html              | 12 +++
 .../details-summary/open-summary-block-style.html  | 13 +++
 .../open-summary-inline-style-ref.html             | 14 ++++
 .../details-summary/open-summary-inline-style.html | 22 +++++
 .../open-summary-not-first-child.html              | 12 +++
 .../open-summary-table-cell-style-ref.html         | 14 ++++
 .../open-summary-table-cell-style.html             | 21 +++++
 .../details-summary/overflow-auto-details.html     | 41 ++++++++++
 .../overflow-auto-open-details-ref.html            | 36 ++++++++
 .../overflow-auto-open-details.html                | 38 +++++++++
 .../details-summary/overflow-hidden-details.html   | 41 ++++++++++
 .../overflow-hidden-open-details-ref.html          | 39 +++++++++
 .../overflow-hidden-open-details.html              | 41 ++++++++++
 .../overflow-scroll-details-ref.html               | 31 +++++++
 .../details-summary/overflow-scroll-details.html   | 40 +++++++++
 layout/reftests/details-summary/reftest.list       | 95 ++++++++++++++++++++++
 .../reftests/details-summary/single-summary.html   | 12 +++
 .../summary-not-direct-child-ref.html              | 12 +++
 .../details-summary/summary-not-direct-child.html  | 12 +++
 .../details-summary/summary-not-first-child.html   | 12 +++
 .../summary-not-in-details-ref.html                |  9 ++
 .../details-summary/summary-not-in-details.html    | 10 +++
 .../details-summary/summary-three-columns-ref.html | 30 +++++++
 .../details-summary/summary-three-columns.html     | 32 ++++++++
 123 files changed, 3307 insertions(+)
 create mode 100644 layout/reftests/details-summary/close-nested-details-ref.html
 create mode 100644 layout/reftests/details-summary/close-nested-details.html
 create mode 100644 layout/reftests/details-summary/details-absolute-children-ref.html
 create mode 100644 layout/reftests/details-summary/details-absolute-children.html
 create mode 100644 layout/reftests/details-summary/details-after-ref.html
 create mode 100644 layout/reftests/details-summary/details-after.html
 create mode 100644 layout/reftests/details-summary/details-before-ref.html
 create mode 100644 layout/reftests/details-summary/details-before.html
 create mode 100644 layout/reftests/details-summary/details-display-inline-ref.html
 create mode 100644 layout/reftests/details-summary/details-display-inline.html
 create mode 100644 layout/reftests/details-summary/details-first-line-ref.html
 create mode 100644 layout/reftests/details-summary/details-first-line.html
 create mode 100644 layout/reftests/details-summary/details-in-ol-ref.html
 create mode 100644 layout/reftests/details-summary/details-in-ol.html
 create mode 100644 layout/reftests/details-summary/details-percentage-height-children-ref.html
 create mode 100644 layout/reftests/details-summary/details-percentage-height-children.html
 create mode 100644 layout/reftests/details-summary/details-three-columns-ref.html
 create mode 100644 layout/reftests/details-summary/details-three-columns.html
 create mode 100644 layout/reftests/details-summary/details-writing-mode-ref.html
 create mode 100644 layout/reftests/details-summary/details-writing-mode.html
 create mode 100644 layout/reftests/details-summary/dynamic-add-details.html
 create mode 100644 layout/reftests/details-summary/dynamic-add-first-summary.html
 create mode 100644 layout/reftests/details-summary/dynamic-add-paragraph-after-summary-close.html
 create mode 100644 layout/reftests/details-summary/dynamic-add-paragraph-after-summary.html
 create mode 100644 layout/reftests/details-summary/dynamic-add-paragraph-before-summary-close.html
 create mode 100644 layout/reftests/details-summary/dynamic-add-paragraph-before-summary.html
 create mode 100644 layout/reftests/details-summary/dynamic-add-second-summary.html
 create mode 100644 layout/reftests/details-summary/dynamic-add-single-summary.html
 create mode 100644 layout/reftests/details-summary/dynamic-add-summary-and-paragraph.html
 create mode 100644 layout/reftests/details-summary/dynamic-add-summary-not-first-child.html
 create mode 100644 layout/reftests/details-summary/dynamic-remove-first-summary.html
 create mode 100644 layout/reftests/details-summary/dynamic-remove-second-summary.html
 create mode 100644 layout/reftests/details-summary/dynamic-remove-single-summary.html
 create mode 100644 layout/reftests/details-summary/dynamic-remove-summary-not-first-child.html
 create mode 100644 layout/reftests/details-summary/fixed-summary.html
 create mode 100644 layout/reftests/details-summary/float-details.html
 create mode 100644 layout/reftests/details-summary/float-in-summary-ref.html
 create mode 100644 layout/reftests/details-summary/float-in-summary.html
 create mode 100644 layout/reftests/details-summary/float-left-and-float-details-ref.html
 create mode 100644 layout/reftests/details-summary/float-left-and-float-details.html
 create mode 100644 layout/reftests/details-summary/float-left-and-float-open-details-ref.html
 create mode 100644 layout/reftests/details-summary/float-left-and-float-open-details.html
 create mode 100644 layout/reftests/details-summary/float-left-and-inflow-details-ref.html
 create mode 100644 layout/reftests/details-summary/float-left-and-inflow-details.html
 create mode 100644 layout/reftests/details-summary/float-left-and-inflow-open-details-ref.html
 create mode 100644 layout/reftests/details-summary/float-left-and-inflow-open-details.html
 create mode 100644 layout/reftests/details-summary/float-open-details-contains-float-left-ref.html
 create mode 100644 layout/reftests/details-summary/float-open-details-contains-float-left.html
 create mode 100644 layout/reftests/details-summary/float-open-details-contains-float-right-ref.html
 create mode 100644 layout/reftests/details-summary/float-open-details-contains-float-right.html
 create mode 100644 layout/reftests/details-summary/float-right-and-float-details-ref.html
 create mode 100644 layout/reftests/details-summary/float-right-and-float-details.html
 create mode 100644 layout/reftests/details-summary/float-right-and-float-open-details-ref.html
 create mode 100644 layout/reftests/details-summary/float-right-and-float-open-details.html
 create mode 100644 layout/reftests/details-summary/float-right-and-inflow-details-ref.html
 create mode 100644 layout/reftests/details-summary/float-right-and-inflow-details.html
 create mode 100644 layout/reftests/details-summary/float-right-and-inflow-open-details-ref.html
 create mode 100644 layout/reftests/details-summary/float-right-and-inflow-open-details.html
 create mode 100644 layout/reftests/details-summary/mouse-click-change-details-to-display-none.html
 create mode 100644 layout/reftests/details-summary/mouse-click-change-summary-to-display-none-ref.html
 create mode 100644 layout/reftests/details-summary/mouse-click-change-summary-to-display-none.html
 create mode 100644 layout/reftests/details-summary/mouse-click-display-none-details.html
 create mode 100644 layout/reftests/details-summary/mouse-click-fixed-summary.html
 create mode 100644 layout/reftests/details-summary/mouse-click-float-details.html
 create mode 100644 layout/reftests/details-summary/mouse-click-move-summary-to-different-details-ref.html
 create mode 100644 layout/reftests/details-summary/mouse-click-move-summary-to-different-details.html
 create mode 100644 layout/reftests/details-summary/mouse-click-open-second-summary.html
 create mode 100644 layout/reftests/details-summary/mouse-click-open-single-summary.html
 create mode 100644 layout/reftests/details-summary/mouse-click-overflow-auto-details.html
 create mode 100644 layout/reftests/details-summary/mouse-click-overflow-hidden-details.html
 create mode 100644 layout/reftests/details-summary/mouse-click-second-summary.html
 create mode 100644 layout/reftests/details-summary/mouse-click-single-summary.html
 create mode 100644 layout/reftests/details-summary/mouse-click-twice-fixed-summary.html
 create mode 100644 layout/reftests/details-summary/mouse-click-twice-float-details.html
 create mode 100644 layout/reftests/details-summary/mouse-click-twice-open-single-summary.html
 create mode 100644 layout/reftests/details-summary/mouse-click-twice-overflow-auto-details.html
 create mode 100644 layout/reftests/details-summary/mouse-click-twice-overflow-hidden-details.html
 create mode 100644 layout/reftests/details-summary/mouse-click-twice-single-summary.html
 create mode 100644 layout/reftests/details-summary/move-float-summary-to-different-details-ref.html
 create mode 100644 layout/reftests/details-summary/move-float-summary-to-different-details.html
 create mode 100644 layout/reftests/details-summary/move-position-absolute-summary-to-different-details-ref.html
 create mode 100644 layout/reftests/details-summary/move-position-absolute-summary-to-different-details.html
 create mode 100644 layout/reftests/details-summary/multiple-summary.html
 create mode 100644 layout/reftests/details-summary/no-summary-ref.html
 create mode 100644 layout/reftests/details-summary/no-summary.html
 create mode 100644 layout/reftests/details-summary/open-details-after.html
 create mode 100644 layout/reftests/details-summary/open-details-before.html
 create mode 100644 layout/reftests/details-summary/open-details-first-line-1.html
 create mode 100644 layout/reftests/details-summary/open-details-first-line-2.html
 create mode 100644 layout/reftests/details-summary/open-details-first-line-ref.html
 create mode 100644 layout/reftests/details-summary/open-fixed-summary.html
 create mode 100644 layout/reftests/details-summary/open-float-details.html
 create mode 100644 layout/reftests/details-summary/open-multiple-summary-ref.html
 create mode 100644 layout/reftests/details-summary/open-multiple-summary.html
 create mode 100644 layout/reftests/details-summary/open-nested-details-ref.html
 create mode 100644 layout/reftests/details-summary/open-nested-details.html
 create mode 100644 layout/reftests/details-summary/open-no-summary-ref.html
 create mode 100644 layout/reftests/details-summary/open-no-summary.html
 create mode 100644 layout/reftests/details-summary/open-single-summary.html
 create mode 100644 layout/reftests/details-summary/open-summary-block-style-ref.html
 create mode 100644 layout/reftests/details-summary/open-summary-block-style.html
 create mode 100644 layout/reftests/details-summary/open-summary-inline-style-ref.html
 create mode 100644 layout/reftests/details-summary/open-summary-inline-style.html
 create mode 100644 layout/reftests/details-summary/open-summary-not-first-child.html
 create mode 100644 layout/reftests/details-summary/open-summary-table-cell-style-ref.html
 create mode 100644 layout/reftests/details-summary/open-summary-table-cell-style.html
 create mode 100644 layout/reftests/details-summary/overflow-auto-details.html
 create mode 100644 layout/reftests/details-summary/overflow-auto-open-details-ref.html
 create mode 100644 layout/reftests/details-summary/overflow-auto-open-details.html
 create mode 100644 layout/reftests/details-summary/overflow-hidden-details.html
 create mode 100644 layout/reftests/details-summary/overflow-hidden-open-details-ref.html
 create mode 100644 layout/reftests/details-summary/overflow-hidden-open-details.html
 create mode 100644 layout/reftests/details-summary/overflow-scroll-details-ref.html
 create mode 100644 layout/reftests/details-summary/overflow-scroll-details.html
 create mode 100644 layout/reftests/details-summary/reftest.list
 create mode 100644 layout/reftests/details-summary/single-summary.html
 create mode 100644 layout/reftests/details-summary/summary-not-direct-child-ref.html
 create mode 100644 layout/reftests/details-summary/summary-not-direct-child.html
 create mode 100644 layout/reftests/details-summary/summary-not-first-child.html
 create mode 100644 layout/reftests/details-summary/summary-not-in-details-ref.html
 create mode 100644 layout/reftests/details-summary/summary-not-in-details.html
 create mode 100644 layout/reftests/details-summary/summary-three-columns-ref.html
 create mode 100644 layout/reftests/details-summary/summary-three-columns.html

(limited to 'layout/reftests/details-summary')

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 0000000000..06c2942210
--- /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 0000000000..07e8c030f1
--- /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 0000000000..89a0c7a1c0
--- /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 0000000000..b26b3bcdb1
--- /dev/null
+++ b/layout/reftests/details-summary/details-absolute-children.html
@@ -0,0 +1,41 @@
+<!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 {
+    /* Hide the triangle for comparing with div in reftest. */
+    list-style-type: none;
+    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-ref.html b/layout/reftests/details-summary/details-after-ref.html
new file mode 100644
index 0000000000..01fc78bbdc
--- /dev/null
+++ b/layout/reftests/details-summary/details-after-ref.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<div id="details">
+  <div id="summary">Summary</div>
+  <p>This is the details.</p>
+</div>
diff --git a/layout/reftests/details-summary/details-after.html b/layout/reftests/details-summary/details-after.html
new file mode 100644
index 0000000000..e586fdda90
--- /dev/null
+++ b/layout/reftests/details-summary/details-after.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<head>
+  <style>
+    summary {
+      list-style-type: none;
+    }
+    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-ref.html b/layout/reftests/details-summary/details-before-ref.html
new file mode 100644
index 0000000000..817930b4d8
--- /dev/null
+++ b/layout/reftests/details-summary/details-before-ref.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<div id="details">
+  <p>This is the details.</p>
+  <div id="summary">Summary</div>
+</div>
diff --git a/layout/reftests/details-summary/details-before.html b/layout/reftests/details-summary/details-before.html
new file mode 100644
index 0000000000..9b9d437f99
--- /dev/null
+++ b/layout/reftests/details-summary/details-before.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<head>
+  <style>
+    summary {
+      list-style-type: none;
+    }
+    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 0000000000..7e28ef85d4
--- /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 0000000000..94c5db219a
--- /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 {
+    /* 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 0000000000..da8462cbc9
--- /dev/null
+++ b/layout/reftests/details-summary/details-first-line-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>
+    <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 0000000000..4ad2d9af5c
--- /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 0000000000..6bff1c814a
--- /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 style="list-style-position: inside">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 0000000000..2d9a9d1943
--- /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 {
+    /* 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-percentage-height-children-ref.html b/layout/reftests/details-summary/details-percentage-height-children-ref.html
new file mode 100644
index 0000000000..38404d59ce
--- /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 0000000000..75a9bf1727
--- /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 {
+    /* 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 0000000000..0908a13f9d
--- /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 {
+    column-count: 3;
+    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 0000000000..b01856ffe4
--- /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 {
+    column-count: 3;
+    column-rule: 1px solid lightgray;
+    -webkit-column-count: 3;
+    -webkit-column-rule: 1px solid lightgray;
+    border: 1px solid lightblue;
+  }
+  summary {
+    /* 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-writing-mode-ref.html b/layout/reftests/details-summary/details-writing-mode-ref.html
new file mode 100644
index 0000000000..1200409737
--- /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 0000000000..44cd45f920
--- /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 {
+    /* 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/dynamic-add-details.html b/layout/reftests/details-summary/dynamic-add-details.html
new file mode 100644
index 0000000000..6189d648a4
--- /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 0000000000..d7d67c46cf
--- /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 0000000000..224c6cacca
--- /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 0000000000..0d979bd2d8
--- /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 0000000000..71f93b0245
--- /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 0000000000..9a0d3340a0
--- /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 0000000000..df4a434524
--- /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 0000000000..bcd5cc95e2
--- /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 0000000000..463ee35239
--- /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 0000000000..98c599c7f5
--- /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 0000000000..b66c16a67c
--- /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 0000000000..5cd97d398f
--- /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 0000000000..382d002164
--- /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 0000000000..13961452c1
--- /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 0000000000..d79f17925a
--- /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 0000000000..8ec8babb16
--- /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 0000000000..c27bc7d957
--- /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 0000000000..e2abb73cf4
--- /dev/null
+++ b/layout/reftests/details-summary/float-in-summary.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: auto;
+    width: 500px;
+  }
+  summary {
+    /* Hide the triangle for comparing with div in reftest. */
+    list-style-type: none;
+    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 0000000000..57e3997794
--- /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 0000000000..3806b580a7
--- /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 0000000000..eb5a75e3cb
--- /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 0000000000..80e4d6a25a
--- /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 0000000000..909702354a
--- /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 0000000000..92875763d9
--- /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 0000000000..1642ad623c
--- /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 0000000000..a81c425c28
--- /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 0000000000..b943389305
--- /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 0000000000..372fef96d7
--- /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 0000000000..217ca4cd61
--- /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 0000000000..2b38050849
--- /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 0000000000..e7349f4a4a
--- /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 0000000000..c827558597
--- /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 0000000000..c8c3b54b3f
--- /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 0000000000..857624aa48
--- /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 0000000000..b65de5bdbb
--- /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 0000000000..b48bfaa957
--- /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 0000000000..f27b81a34e
--- /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 0000000000..04fd463041
--- /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/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 0000000000..64ff67bfd8
--- /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 0000000000..6ecdbcdc0a
--- /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 0000000000..47f97dc551
--- /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 0000000000..70dec7332c
--- /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 0000000000..bfaddf0d86
--- /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 0000000000..9785e9743c
--- /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 0000000000..0dc94b41fc
--- /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 0000000000..1e6c04505b
--- /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 0000000000..e590f86206
--- /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 0000000000..9edf9d96b3
--- /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 0000000000..fb73ed2126
--- /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 {
+    /* 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 0000000000..0ff967dd81
--- /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 {
+    /* 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 0000000000..978d8ad238
--- /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 0000000000..223c71f4db
--- /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 0000000000..ddeb617b68
--- /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 0000000000..c99c3ea33e
--- /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 0000000000..d18f5e5da4
--- /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 0000000000..d240ce02d9
--- /dev/null
+++ b/layout/reftests/details-summary/mouse-click-twice-overflow-auto-details.html
@@ -0,0 +1,50 @@
+<!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 {
+    /* Hide the triangle for comparing with div in reftest. */
+    list-style-type: none;
+    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 0000000000..efb2ca10b8
--- /dev/null
+++ b/layout/reftests/details-summary/mouse-click-twice-overflow-hidden-details.html
@@ -0,0 +1,50 @@
+<!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 {
+    /* Hide the triangle for comparing with div in reftest. */
+    list-style-type: none;
+    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 0000000000..3609b84f2a
--- /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/move-float-summary-to-different-details-ref.html b/layout/reftests/details-summary/move-float-summary-to-different-details-ref.html
new file mode 100644
index 0000000000..67d3d3f797
--- /dev/null
+++ b/layout/reftests/details-summary/move-float-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>
+      <summary style="float:left;">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/move-float-summary-to-different-details.html b/layout/reftests/details-summary/move-float-summary-to-different-details.html
new file mode 100644
index 0000000000..fd474d75dc
--- /dev/null
+++ b/layout/reftests/details-summary/move-float-summary-to-different-details.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">
+  <script>
+  function runTest() {
+    var details1 = document.getElementById("details1");
+    var summary2 = document.getElementById("summary2");
+
+    details1.insertBefore(summary2, details1.children[0]);
+
+    document.documentElement.removeAttribute("class");
+  }
+  </script>
+  <body onload="runTest();">
+    <details id="details1">
+      <summary>Summary 1</summary>
+      <p>This is the details 1.</p>
+    </details>
+    <details>
+      <summary id="summary2" style="float: left;">Summary 2</summary>
+      <p>This is the details 2.</p>
+    </details>
+  </body>
+</html>
diff --git a/layout/reftests/details-summary/move-position-absolute-summary-to-different-details-ref.html b/layout/reftests/details-summary/move-position-absolute-summary-to-different-details-ref.html
new file mode 100644
index 0000000000..d1a8cfc0cf
--- /dev/null
+++ b/layout/reftests/details-summary/move-position-absolute-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>
+      <summary style="position: absolute;">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/move-position-absolute-summary-to-different-details.html b/layout/reftests/details-summary/move-position-absolute-summary-to-different-details.html
new file mode 100644
index 0000000000..ccd1e83f45
--- /dev/null
+++ b/layout/reftests/details-summary/move-position-absolute-summary-to-different-details.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">
+  <script>
+  function runTest() {
+    var details1 = document.getElementById("details1");
+    var summary2 = document.getElementById("summary2");
+
+    details1.insertBefore(summary2, details1.children[0]);
+
+    document.documentElement.removeAttribute("class");
+  }
+  </script>
+  <body onload="runTest();">
+    <details id="details1">
+      <summary>Summary 1</summary>
+      <p>This is the details 1.</p>
+    </details>
+    <details>
+      <summary id="summary2" style="position: absolute;">Summary 2</summary>
+      <p>This is the details 2.</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 0000000000..6ac034675a
--- /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 0000000000..e1b4d449bc
--- /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 0000000000..f33b45f05c
--- /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 0000000000..1c5d8b7257
--- /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 0000000000..31008a6186
--- /dev/null
+++ b/layout/reftests/details-summary/open-details-before.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<head>
+  <style>
+    summary {
+      list-style-type: none;
+    }
+    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 0000000000..a579d03425
--- /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 0000000000..93af8f4624
--- /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 0000000000..f7cbdd7e0e
--- /dev/null
+++ b/layout/reftests/details-summary/open-details-first-line-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 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 0000000000..155e2abb7d
--- /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 0000000000..4f0e5b46f3
--- /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 0000000000..27b6046fe3
--- /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 0000000000..3216e5907f
--- /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 0000000000..75eada081a
--- /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 0000000000..573ba50daa
--- /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 0000000000..e3f85c2108
--- /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 0000000000..15c02115b5
--- /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 0000000000..9dd2c3da2a
--- /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 0000000000..f643af6dcd
--- /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 0000000000..0cb3ab8510
--- /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 0000000000..f0be2f66d3
--- /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 0000000000..1c28d62fe2
--- /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 0000000000..8aca740c93
--- /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 0000000000..634bfec1df
--- /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 0000000000..9b6ef4034b
--- /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 0000000000..9ad9c76111
--- /dev/null
+++ b/layout/reftests/details-summary/overflow-auto-details.html
@@ -0,0 +1,41 @@
+<!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 {
+    /* Hide the triangle for comparing with div in reftest. */
+    list-style-type: none;
+    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 0000000000..0ab995cdb1
--- /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 0000000000..a3b1819f54
--- /dev/null
+++ b/layout/reftests/details-summary/overflow-auto-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>
+  details {
+    background-color: orange;
+    overflow: auto;
+    width: 300px;
+    height: 200px;
+  }
+  summary {
+    /* Hide the triangle for comparing with div in reftest. */
+    list-style-type: none;
+    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 0000000000..d75969a6cc
--- /dev/null
+++ b/layout/reftests/details-summary/overflow-hidden-details.html
@@ -0,0 +1,41 @@
+<!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 {
+    /* Hide the triangle for comparing with div in reftest. */
+    list-style-type: none;
+    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 0000000000..a8ae2039d3
--- /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 0000000000..979b871a1a
--- /dev/null
+++ b/layout/reftests/details-summary/overflow-hidden-open-details.html
@@ -0,0 +1,41 @@
+<!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 {
+    /* Hide the triangle for comparing with div in reftest. */
+    list-style-type: none;
+    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 0000000000..b85a242c9d
--- /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 0000000000..ec5b80dcbb
--- /dev/null
+++ b/layout/reftests/details-summary/overflow-scroll-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: scroll;
+    width: 300px;
+    height: 200px;
+  }
+  summary {
+    /* Hide the triangle for comparing with div in reftest. */
+    list-style-type: none;
+    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.list b/layout/reftests/details-summary/reftest.list
new file mode 100644
index 0000000000..aaeb7798ff
--- /dev/null
+++ b/layout/reftests/details-summary/reftest.list
@@ -0,0 +1,95 @@
+# 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 '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(0-1,0-172) == 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
+fuzzy-if(geckoview,0-7,0-1) == mouse-click-float-details.html open-float-details.html
+fuzzy(0-4,0-1) == mouse-click-twice-float-details.html float-details.html # Bug 1316430
+
+# Generated content bits
+== details-after.html details-after-ref.html
+== details-before.html details-before-ref.html
+== open-details-after.html open-single-summary.html
+== open-details-before.html details-before-ref.html
+
+# Move summary element
+== move-float-summary-to-different-details.html move-float-summary-to-different-details-ref.html
+== move-position-absolute-summary-to-different-details.html move-position-absolute-summary-to-different-details-ref.html
diff --git a/layout/reftests/details-summary/single-summary.html b/layout/reftests/details-summary/single-summary.html
new file mode 100644
index 0000000000..95d125237d
--- /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 0000000000..54cf25430c
--- /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 0000000000..c12b0719e3
--- /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 0000000000..c06a6e3ac2
--- /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 0000000000..1d4f5c6ac8
--- /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 0000000000..c0ff654f17
--- /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 0000000000..4db14deba7
--- /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 {
+    column-count: 3;
+    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 0000000000..0f3f20cf2b
--- /dev/null
+++ b/layout/reftests/details-summary/summary-three-columns.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <style>
+  summary {
+    /* Hide the triangle for comparing with div in reftest. */
+    list-style-type: none;
+    column-count: 3;
+    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>
-- 
cgit v1.2.3