Rollup merge of #107964 - notriddle:notriddle/title-line-height, r=GuillaumeGomez

rustdoc: use tighter line height in h1 and h2

This keeps the line height for body text the same, as required by WCAG, but for headers, it makes sense to have wrapped lines be a bit tighter packed.

## Before

![image](https://user-images.githubusercontent.com/1593513/218332683-88a02467-7811-4e6b-81f8-67dded691465.png)

## After

![image](https://user-images.githubusercontent.com/1593513/218332698-a1b2a265-0658-4306-8473-b835f663172d.png)

Author: matthiaskrgr

src/librustdoc/html/static/css/rustdoc.css

@@ -174,6 +174,14 @@ h1, h2, h3, h4 {
 .top-doc .docblock > h4 {
 	border-bottom: 1px solid var(--headings-border-bottom-color);
 }
+/* while line-height 1.5 is required for any "block of text",
+	which WCAG defines as more than one sentence, it looks weird for
+	very large main headers */
+h1, h2 {
+	line-height: 1.25;
+	padding-top: 3px;
+	padding-bottom: 9px;
+}
 h3.code-header {
 	font-size: 1.125rem; /* 18px */
 }

tests/rustdoc-gui/mobile.goml

@@ -12,7 +12,7 @@ assert-css: (".main-heading", {
   "flex-direction": "column"
 })
 
-assert-property: (".mobile-topbar h2", {"offsetHeight": 36})
+assert-property: (".mobile-topbar h2", {"offsetHeight": 33})
 
 // Note: We can't use assert-text here because the 'Since' is set by CSS and
 // is therefore not part of the DOM.

tests/rustdoc-gui/scrape-examples-layout.goml

@@ -40,10 +40,10 @@ assert-property: (
 store-value: (offset_y, 4)
 
 // First with desktop
-assert-position: (".scraped-example .code-wrapper", {"y": 255})
-assert-position: (".scraped-example .code-wrapper .prev", {"y": 255 + |offset_y|})
+assert-position: (".scraped-example .code-wrapper", {"y": 253})
+assert-position: (".scraped-example .code-wrapper .prev", {"y": 253 + |offset_y|})
 
 // Then with mobile
 size: (600, 600)
-assert-position: (".scraped-example .code-wrapper", {"y": 314})
-assert-position: (".scraped-example .code-wrapper .prev", {"y": 314 + |offset_y|})
+assert-position: (".scraped-example .code-wrapper", {"y": 308})
+assert-position: (".scraped-example .code-wrapper .prev", {"y": 308 + |offset_y|})

tests/rustdoc-gui/search-result-display.goml

@@ -22,7 +22,7 @@ size: (900, 900)
 
 // First we check the current width, height and position.
 assert-css: ("#crate-search", {"width": "223px"})
-assert-css: (".search-results-title", {"height": "44px", "width": "640px"})
+assert-css: (".search-results-title", {"height": "50px", "width": "640px"})
 assert-css: ("#search", {"width": "640px"})
 
 // Then we update the text of one of the `<option>`.
@@ -33,7 +33,7 @@ text: (
 
 // Then we compare again to confirm the height didn't change.
 assert-css: ("#crate-search", {"width": "527px"})
-assert-css: (".search-results-title", {"height": "44px", "width": "640px"})
+assert-css: (".search-results-title", {"height": "50px", "width": "640px"})
 // And we check that the `<select>` isn't bigger than its container (".search-results-title").
 assert-css: ("#search", {"width": "640px"})
 

tests/rustdoc-gui/sidebar-mobile-scroll.goml

@@ -6,7 +6,7 @@ assert-css: (".sidebar", {"display": "block", "left": "-1000px"})
 
 // Scroll down.
 scroll-to: "//h2[@id='blanket-implementations']"
-assert-window-property: {"pageYOffset": "627"}
+assert-window-property: {"pageYOffset": "622"}
 
 // Open the sidebar menu.
 click: ".sidebar-menu-toggle"
@@ -21,11 +21,11 @@ assert-window-property: {"pageYOffset": "0"}
 // Close the sidebar menu. Make sure the scroll position gets restored.
 click: ".sidebar-menu-toggle"
 wait-for-css: (".sidebar", {"left": "-1000px"})
-assert-window-property: {"pageYOffset": "627"}
+assert-window-property: {"pageYOffset": "622"}
 
 // Now test that scrollability returns when the browser window is just resized.
 click: ".sidebar-menu-toggle"
 wait-for-css: (".sidebar", {"left": "0px"})
 assert-window-property: {"pageYOffset": "0"}
 size: (900, 600)
-assert-window-property: {"pageYOffset": "627"}
+assert-window-property: {"pageYOffset": "622"}

tests/rustdoc-gui/sidebar-mobile.goml

@@ -45,7 +45,7 @@ assert-property: (".mobile-topbar", {"clientHeight": "45"})
 // so the target is not obscured by the topbar.
 click: ".sidebar-menu-toggle"
 click: ".sidebar-elems section .block li > a"
-assert-position: ("#method\.must_use", {"y": 45})
+assert-position: ("#method\.must_use", {"y": 46})
 
 // Check that the bottom-most item on the sidebar menu can be scrolled fully into view.
 click: ".sidebar-menu-toggle"