Rollup merge of #103990 - notriddle:notriddle/logo-container, r=GuillaumeGomez
rustdoc: clean up `.logo-container` layout CSS This commit should result in no appearance changes. To make the logo container exactly the desired height, you want to get rid of the part of the box used for typographic descenders (you know, the part of g, y, and j that descends below the baseline). After all, it contains no text, but the space is still left open in the layout by default, because `<img>` is `display:inline`. The CSS used to employ three different tricks to accomplish this: * By making `.sidebar .logo-container` a flex container, the image becomes a flex item and is [blockified], without synthesizing any inline boxes. No inline boxes means no descenders. * By giving `.mobile-topbar .logo-container` a max-height exactly the same as the height of the image plus the padding, the descender area gets cut off. * By setting `.sub-logo-container { line-height: 0 }`, we ensure that the only box that contributes to the height of the line box is the image itself, and not any zero-content text boxes that neighbor it. See the [logical height algorithm]. This commit gets rid of the first two hacks, leaving only the third, since it requires only one line of code to accomplish and doesn't require setting the value based on math. [blockified]: https://drafts.csswg.org/css-flexbox-1/#flex-items [logical height algorithm]: https://www.w3.org/TR/css-inline-3/#inline-height
This commit is contained in:
commit
c013962695
8 changed files with 60 additions and 9 deletions
|
@ -367,7 +367,8 @@ img {
|
|||
overflow: visible;
|
||||
}
|
||||
|
||||
.sub-logo-container {
|
||||
.sub-logo-container, .logo-container {
|
||||
/* zero text boxes so that computed line height = image height exactly */
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
|
@ -465,10 +466,9 @@ img {
|
|||
}
|
||||
|
||||
.sidebar .logo-container {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.version {
|
||||
|
@ -1755,10 +1755,6 @@ in storage.js
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mobile-topbar .logo-container {
|
||||
max-height: 45px;
|
||||
}
|
||||
|
||||
.mobile-topbar .logo-container > img {
|
||||
max-width: 35px;
|
||||
max-height: 35px;
|
||||
|
|
21
src/test/rustdoc-gui/huge-logo.goml
Normal file
21
src/test/rustdoc-gui/huge-logo.goml
Normal file
|
@ -0,0 +1,21 @@
|
|||
// huge_logo crate has a custom 712x860 logo
|
||||
// test to ensure the maximum size in the layout works correctly
|
||||
goto: "file://" + |DOC_PATH| + "/huge_logo/index.html"
|
||||
|
||||
size: (1280, 1024)
|
||||
// offsetWidth = width of sidebar
|
||||
assert-property: (".sidebar .logo-container", {"offsetWidth": "200", "offsetHeight": 100})
|
||||
assert-property: (".sidebar .logo-container img", {"offsetWidth": "100", "offsetHeight": 100})
|
||||
|
||||
size: (400, 600)
|
||||
// offset = size + margin
|
||||
assert-property: (".mobile-topbar .logo-container", {"offsetWidth": "55", "offsetHeight": 45})
|
||||
assert-property: (".mobile-topbar .logo-container img", {"offsetWidth": "35", "offsetHeight": 35})
|
||||
|
||||
goto: "file://" + |DOC_PATH| + "/src/huge_logo/lib.rs.html"
|
||||
|
||||
size: (1280, 1024)
|
||||
assert-property: (".sub-logo-container", {"offsetWidth": "60", "offsetHeight": 60})
|
||||
|
||||
size: (400, 600)
|
||||
assert-property: (".sub-logo-container", {"offsetWidth": "35", "offsetHeight": 35})
|
|
@ -14,6 +14,7 @@ click: "#crate-search"
|
|||
// We select "lib2" option then press enter to change the filter.
|
||||
press-key: "ArrowDown"
|
||||
press-key: "ArrowDown"
|
||||
press-key: "ArrowDown"
|
||||
press-key: "Enter"
|
||||
// Waiting for the search results to appear...
|
||||
wait-for: "#titles"
|
||||
|
@ -37,6 +38,7 @@ assert-property: ("#crate-search", {"value": "lib2"})
|
|||
click: "#crate-search"
|
||||
press-key: "ArrowUp"
|
||||
press-key: "ArrowUp"
|
||||
press-key: "ArrowUp"
|
||||
press-key: "Enter"
|
||||
// Waiting for the search results to appear...
|
||||
wait-for: "#titles"
|
||||
|
|
|
@ -28,7 +28,7 @@ assert: "//*[@class='dir-entry' and @open]/*[text()='sub_mod']"
|
|||
// Only "another_folder" should be "open" in "lib2".
|
||||
assert: "//*[@class='dir-entry' and not(@open)]/*[text()='another_mod']"
|
||||
// All other trees should be collapsed.
|
||||
assert-count: ("//*[@id='source-sidebar']/details[not(text()='lib2') and not(@open)]", 5)
|
||||
assert-count: ("//*[@id='source-sidebar']/details[not(text()='lib2') and not(@open)]", 6)
|
||||
|
||||
// We now switch to mobile mode.
|
||||
size: (600, 600)
|
||||
|
|
|
@ -78,7 +78,7 @@ assert: ".source-sidebar-expanded"
|
|||
|
||||
// We check that the first entry of the sidebar is collapsed
|
||||
assert-property: ("#source-sidebar details:first-of-type", {"open": "false"})
|
||||
assert-text: ("#source-sidebar details:first-of-type > summary", "implementors")
|
||||
assert-text: ("#source-sidebar details:first-of-type > summary", "huge_logo")
|
||||
// We now click on it.
|
||||
click: "#source-sidebar details:first-of-type > summary"
|
||||
assert-property: ("#source-sidebar details:first-of-type", {"open": "true"})
|
||||
|
|
7
src/test/rustdoc-gui/src/huge_logo/Cargo.lock
Normal file
7
src/test/rustdoc-gui/src/huge_logo/Cargo.lock
Normal file
|
@ -0,0 +1,7 @@
|
|||
# This file is automatically @generated by Cargo.
|
||||
# It is not intended for manual editing.
|
||||
version = 3
|
||||
|
||||
[[package]]
|
||||
name = "huge_logo"
|
||||
version = "0.1.0"
|
8
src/test/rustdoc-gui/src/huge_logo/Cargo.toml
Normal file
8
src/test/rustdoc-gui/src/huge_logo/Cargo.toml
Normal file
|
@ -0,0 +1,8 @@
|
|||
[package]
|
||||
name = "huge_logo"
|
||||
version = "0.1.0"
|
||||
edition = "2021"
|
||||
|
||||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||
|
||||
[dependencies]
|
17
src/test/rustdoc-gui/src/huge_logo/src/lib.rs
Normal file
17
src/test/rustdoc-gui/src/huge_logo/src/lib.rs
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue