Fix wrong padding for expanded scraped example

3 files changed, 28 insertions, 2 deletions

diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index fa5a936d3f4..b69689cfb68 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -789,11 +789,18 @@ both the code example and the line numbers, so we need to remove the radius in t
 }
 
 .rustdoc:not(.src) .scraped-example:not(.expanded) .src-line-numbers,
+.rustdoc:not(.src) .scraped-example:not(.expanded) .src-line-numbers > pre,
 .rustdoc:not(.src) .scraped-example:not(.expanded) pre.rust {
 	padding-bottom: 0;
 	/* See above comment, should be the same max-height. */
 	overflow: auto hidden;
 }
+.rustdoc:not(.src) .scraped-example .src-line-numbers {
+	padding-top: 0;
+}
+.rustdoc:not(.src) .scraped-example.expanded .src-line-numbers {
+	padding-bottom: 0;
+}
 
 .rustdoc:not(.src) .example-wrap pre {
 	overflow: auto;
diff --git a/tests/rustdoc-gui/scrape-examples-button-focus.goml b/tests/rustdoc-gui/scrape-examples-button-focus.goml
index 442a3a4dcad..83ed6a219b2 100644
--- a/tests/rustdoc-gui/scrape-examples-button-focus.goml
+++ b/tests/rustdoc-gui/scrape-examples-button-focus.goml
@@ -29,10 +29,10 @@ assert-property: (".scraped-example-list > .scraped-example .rust", {
 
 // The expand button increases the scrollHeight of the minimized code viewport
 store-property: (".scraped-example-list > .scraped-example pre", {"offsetHeight": smallOffsetHeight})
-assert-property-false: (".scraped-example-list > .scraped-example .src-line-numbers", {
+assert-property: (".scraped-example-list > .scraped-example .src-line-numbers", {
     "scrollHeight": |smallOffsetHeight|
 }, NEAR)
-assert-property-false: (".scraped-example-list > .scraped-example .rust", {
+assert-property: (".scraped-example-list > .scraped-example .rust", {
     "scrollHeight": |smallOffsetHeight|
 }, NEAR)
 focus: ".scraped-example-list > .scraped-example .expand"
diff --git a/tests/rustdoc-gui/scrape-examples-layout.goml b/tests/rustdoc-gui/scrape-examples-layout.goml
index f0023f7022a..6bea352bce4 100644
--- a/tests/rustdoc-gui/scrape-examples-layout.goml
+++ b/tests/rustdoc-gui/scrape-examples-layout.goml
@@ -47,6 +47,25 @@ assert-position: (".scraped-example .scraped-example-title", {
     "y": |y| + |height| - |title_height| - 8,
 })
 
+// Check that the expand button works and also that line number aligns with code.
+move-cursor-to: ".scraped-example .rust"
+click: ".scraped-example .button-holder .expand"
+wait-for: ".scraped-example.expanded"
+// They should have the same y position.
+compare-elements-position: (
+    ".scraped-example.expanded .src-line-numbers pre span",
+    ".scraped-example.expanded .rust code",
+    ["y"],
+)
+// And they should have the same height.
+compare-elements-size: (
+    ".scraped-example.expanded .src-line-numbers",
+    ".scraped-example.expanded .rust",
+    ["height"],
+)
+// Collapse code again.
+click: ".scraped-example .button-holder .expand"
+
 // Check that for both mobile and desktop sizes, the buttons in scraped examples are displayed
 // correctly.