Fix scraped examples background gradient

2 files changed, 21 insertions, 2 deletions

diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 9d3a8c6bc14..6b31c596c40 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -2282,8 +2282,13 @@ in src-script.js and main.js
 	.example-wrap.scraped-example .button-holder {
 		top: calc(var(--pre-line-height) + 4px);
 	}
+	.scraped-example:not(.expanded)::before {
+		/* The gradient effect needs to be moved under the title */
+		top: var(--pre-line-height);
+	}
 }
 
+
 /* Should have min-width: (N + 1)px where N is the mobile breakpoint above. */
 @media (min-width: 701px) {
 	/* Places file-link for a scraped example on top of the example to save space.
@@ -2305,6 +2310,12 @@ in src-script.js and main.js
 	.item-table > li > div {
 		overflow-wrap: anywhere;
 	}
+
+	/* Starting this width, the "title" of scraped example will be in the code block so we can
+	put the background gradient at the top. */
+	.scraped-example:not(.expanded)::before {
+		top: 0;
+	}
 }
 
 @media print {
@@ -2395,7 +2406,6 @@ in src-script.js and main.js
 	z-index: 1;
 }
 .scraped-example:not(.expanded)::before {
-	top: 0;
 	background: linear-gradient(to bottom,
 		var(--scrape-example-code-wrapper-background-start),
 		var(--scrape-example-code-wrapper-background-end));
diff --git a/tests/rustdoc-gui/scrape-examples-layout.goml b/tests/rustdoc-gui/scrape-examples-layout.goml
index b0d22cba005..063e103458d 100644
--- a/tests/rustdoc-gui/scrape-examples-layout.goml
+++ b/tests/rustdoc-gui/scrape-examples-layout.goml
@@ -56,10 +56,19 @@ store-value: (offset_y, 4)
 assert-position: (".scraped-example", {"y": 226})
 assert-position: (".scraped-example .prev", {"y": 226 + |offset_y|})
 
+// Gradient background should be at the top of the code block.
+assert-css: (".scraped-example::before", {"top": "0px"})
+assert-css: (".scraped-example::after", {"bottom": "0px"})
+
 // Then with mobile
 set-window-size: (600, 600)
+store-size: (".example-wrap.scraped-example .scraped-example-title", {"height": title_height})
 assert-position: (".scraped-example", {"y": 284})
-assert-position: (".scraped-example .prev", {"y": 284 + |offset_y|})
+assert-position: (".scraped-example .prev", {"y": 284 + |offset_y| + |title_height|})
+
+// Gradient background should be at the top of the code block, which is now below the "title".
+assert-css: (".scraped-example::before", {"top": |title_height| + "px"})
+assert-css: (".scraped-example::after", {"bottom": "0px"})
 
 define-function: (
     "check_title_and_code_position",