Rollup merge of #97249 - GuillaumeGomez:details-summary-fixes, r=notriddle

`<details>`/`<summary>` UI fixes

With images it's easier to understand:

![Screenshot from 2022-05-21 14-10-42](https://user-images.githubusercontent.com/3050060/169653038-9c58de67-589a-4986-a8ff-dbdddaf136a4.png)
![Screenshot from 2022-05-21 14-08-49](https://user-images.githubusercontent.com/3050060/169653042-56e87258-13fe-4f80-9858-4e15c318c3fb.png)

The headings in `<summary>` should not have bottom border so I removed it as well alongside the other fixes.

r? `@jsha`

3 files changed, 42 insertions, 2 deletions

diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 532b98d9bb9..0ea954d601b 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -158,8 +158,8 @@ h1.fqn {
 	Underlines elsewhere in the documentation break up visual flow and tend to invert
 	section hierarchies. */
 h2,
-.top-doc h3,
-.top-doc h4 {
+.top-doc .docblock > h3,
+.top-doc .docblock > h4 {
 	border-bottom: 1px solid;
 }
 h3.code-header {
@@ -1681,6 +1681,11 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 	content: "Collapse";
 }
 
+/* This is needed in docblocks to have the "▶" element to be on the same line. */
+.docblock summary > * {
+	display: inline-block;
+}
+
 /* Media Queries */
 
 @media (min-width: 701px) {
diff --git a/src/test/rustdoc-gui/docblock-details.goml b/src/test/rustdoc-gui/docblock-details.goml
new file mode 100644
index 00000000000..2edbf1e4e2d
--- /dev/null
+++ b/src/test/rustdoc-gui/docblock-details.goml
@@ -0,0 +1,23 @@
+// This ensures that the `<details>`/`<summary>` elements are displayed as expected.
+goto: file://|DOC_PATH|/test_docs/details/struct.Details.html
+show-text: true
+local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
+reload:
+
+// We first check that the headers in the `.top-doc` doc block still have their
+// bottom border.
+assert-text: (".top-doc .docblock > h3", "Hello")
+assert-css: (
+    ".top-doc .docblock > h3",
+    {"border-bottom": "1px solid rgb(221, 221, 221)"},
+)
+// We now check that the `<summary>` doesn't have a bottom border and has the correct display.
+assert-css: (
+    ".top-doc .docblock summary h4",
+    {"border-bottom": "0px none rgb(221, 221, 221)"},
+)
+// This allows to ensure that summary is on one line only!
+assert-property: (".top-doc .docblock summary h4", {"offsetHeight": "33"})
+assert-css: (".top-doc .docblock summary h4", {"margin-top": "15px", "margin-bottom": "5px"})
+// So `33 + 15 + 5` == `53`
+assert-property: (".top-doc .docblock summary", {"offsetHeight": "53"})
diff --git a/src/test/rustdoc-gui/src/test_docs/lib.rs b/src/test/rustdoc-gui/src/test_docs/lib.rs
index b6fe9eb2565..aa2f78289be 100644
--- a/src/test/rustdoc-gui/src/test_docs/lib.rs
+++ b/src/test/rustdoc-gui/src/test_docs/lib.rs
@@ -277,3 +277,15 @@ pub use macros::*;
 
 #[doc(alias = "AliasForTheStdReexport")]
 pub use ::std as TheStdReexport;
+
+pub mod details {
+    /// We check the appearance of the `<details>`/`<summary>` in here.
+    ///
+    /// ## Hello
+    ///
+    /// <details>
+    /// <summary><h4>I'm a summary</h4></summary>
+    /// <div>I'm the content of the details!</div>
+    /// </details>
+    pub struct Details;
+}