Rollup merge of #130619 - GuillaumeGomez:scraped-examples-height, r=notriddle

Fix scraped examples height

Fixes [#130562](https://github.com/rust-lang/rust/issues/130562).

You can test it [here](https://rustdoc.crud.net/imperio/scraped-examples-height/doc/scrape_examples/fn.test_many.html).

I also used this opportunity to reduce the padding on line numbers:

| before | after |
| - | - |
| ![Screenshot from 2024-09-20 16-20-40](https://github.com/user-attachments/assets/9434704c-afe0-4ec3-a1dc-6f3c16d03b3b) | ![Screenshot from 2024-09-20 16-20-13](https://github.com/user-attachments/assets/f3bd01bf-760a-4acd-ba34-8e7db083245a) |

r? `@notriddle`
This commit is contained in:
Guillaume Gomez 2024-09-20 19:46:40 +02:00 committed by GitHub
commit 5708062bc1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 79 additions and 3 deletions

View File

@ -801,6 +801,9 @@ both the code example and the line numbers, so we need to remove the radius in t
* and we include additional 10px for padding. */ * and we include additional 10px for padding. */
max-height: calc(1.5em * 5 + 10px); max-height: calc(1.5em * 5 + 10px);
} }
.more-scraped-examples .scraped-example:not(.expanded) .example-wrap {
max-height: calc(1.5em * 10 + 10px);
}
.rustdoc:not(.src) .scraped-example:not(.expanded) .src-line-numbers, .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) .src-line-numbers > pre,
@ -828,10 +831,14 @@ both the code example and the line numbers, so we need to remove the radius in t
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
padding: 14px 8px; padding: 14px 8px;
padding-right: 2px;
color: var(--src-line-numbers-span-color); color: var(--src-line-numbers-span-color);
} }
.rustdoc .scraped-example .src-line-numbers { .rustdoc .scraped-example .example-wrap .src-line-numbers {
padding: 0;
}
.rustdoc .src-line-numbers pre {
padding: 14px 0; padding: 14px 0;
} }
.src-line-numbers a, .src-line-numbers span { .src-line-numbers a, .src-line-numbers span {
@ -890,7 +897,7 @@ both the code example and the line numbers, so we need to remove the radius in t
} }
.docblock code, .docblock-short code, .docblock code, .docblock-short code,
pre, .rustdoc.src .example-wrap { pre, .rustdoc.src .example-wrap, .example-wrap .src-line-numbers {
background-color: var(--code-block-background-color); background-color: var(--code-block-background-color);
} }

View File

@ -39,7 +39,10 @@ define-function: (
{ {
"color": |color|, "color": |color|,
"margin": "0px", "margin": "0px",
"padding": "14px 8px", "padding-top": "14px",
"padding-bottom": "14px",
"padding-left": "8px",
"padding-right": "2px",
"text-align": "right", "text-align": "right",
// There should not be a radius on the right of the line numbers. // There should not be a radius on the right of the line numbers.
"border-top-left-radius": "6px", "border-top-left-radius": "6px",
@ -141,3 +144,61 @@ assert-css: (
}, },
ALL, ALL,
) )
// Checking line numbers on scraped code examples.
go-to: "file://" + |DOC_PATH| + "/scrape_examples/fn.test_many.html"
define-function: (
"check-padding",
[path, padding_bottom],
block {
assert-css: (|path| + " .src-line-numbers", {
"padding-top": "0px",
"padding-bottom": "0px",
"padding-left": "0px",
"padding-right": "0px",
})
assert-css: (|path| + " .src-line-numbers > pre", {
"padding-top": "14px",
"padding-bottom": |padding_bottom|,
"padding-left": "0px",
"padding-right": "0px",
})
assert-css: (|path| + " .src-line-numbers > pre > span", {
"padding-top": "0px",
"padding-bottom": "0px",
"padding-left": "8px",
"padding-right": "8px",
})
},
)
call-function: ("check-padding", {
"path": ".scraped-example .example-wrap",
"padding_bottom": "0px",
})
move-cursor-to: ".scraped-example .example-wrap .rust"
wait-for: ".scraped-example .example-wrap .button-holder .expand"
click: ".scraped-example .example-wrap .button-holder .expand"
wait-for: ".scraped-example.expanded"
call-function: ("check-padding", {
"path": ".scraped-example.expanded .example-wrap",
"padding_bottom": "14px",
})
// Now checking the line numbers in the source code page.
click: ".src"
assert-css: (".src-line-numbers", {
"padding-top": "20px",
"padding-bottom": "20px",
"padding-left": "4px",
"padding-right": "0px",
})
assert-css: (".src-line-numbers > a", {
"padding-top": "0px",
"padding-bottom": "0px",
"padding-left": "8px",
"padding-right": "8px",
})

View File

@ -37,6 +37,7 @@ assert-property: (
// The "title" should be located at the right bottom corner of the code example. // The "title" should be located at the right bottom corner of the code example.
store-position: (".scraped-example .example-wrap", {"x": x, "y": y}) store-position: (".scraped-example .example-wrap", {"x": x, "y": y})
assert-size: (".scraped-example .example-wrap", {"height": 130})
store-size: (".scraped-example .example-wrap", {"width": width, "height": height}) store-size: (".scraped-example .example-wrap", {"width": width, "height": height})
store-size: (".scraped-example .scraped-example-title", { store-size: (".scraped-example .scraped-example-title", {
"width": title_width, "width": title_width,
@ -47,6 +48,13 @@ assert-position: (".scraped-example .scraped-example-title", {
"y": |y| + |height| - |title_height| - 8, "y": |y| + |height| - |title_height| - 8,
}) })
store-size: (".more-scraped-examples .scraped-example .example-wrap", {"height": more_height})
assert: |more_height| > |height|
assert-size: (".more-scraped-examples .scraped-example .example-wrap", {
"height": 250,
"width": |width|,
})
// Check that the expand button works and also that line number aligns with code. // Check that the expand button works and also that line number aligns with code.
move-cursor-to: ".scraped-example .rust" move-cursor-to: ".scraped-example .rust"
click: ".scraped-example .button-holder .expand" click: ".scraped-example .button-holder .expand"