diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 9c593aa85d987..899c4383986d4 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1943,13 +1943,8 @@ in src-script.js and main.js pixels to avoid overflowing the topbar when the user sets a bigger font size. */ font-size: 24px; - } - - .mobile-topbar h2 a { - display: block; - text-overflow: ellipsis; - overflow: hidden; white-space: nowrap; + text-overflow: ellipsis; } .mobile-topbar .logo-container > img { diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js index b46701b55ea7a..b26efb75ff657 100644 --- a/src/librustdoc/html/static/js/main.js +++ b/src/librustdoc/html/static/js/main.js @@ -45,7 +45,7 @@ function setMobileTopbar() { const mobileTitle = document.createElement("h2"); mobileTitle.className = "location"; if (hasClass(document.querySelector(".rustdoc"), "crate")) { - mobileTitle.innerText = `Crate ${window.currentCrate}`; + mobileTitle.innerHTML = `Crate ${window.currentCrate}`; } else if (locationTitle) { mobileTitle.innerHTML = locationTitle.innerHTML; } diff --git a/tests/rustdoc-gui/mobile-crate-name.goml b/tests/rustdoc-gui/mobile-crate-name.goml new file mode 100644 index 0000000000000..a0c96eec8a5ad --- /dev/null +++ b/tests/rustdoc-gui/mobile-crate-name.goml @@ -0,0 +1,22 @@ +// Checks that if the crate name is too long on mobile, it will not grow and overflow its parent +// (thanks to text overflow ellipsis). + +go-to: "file://" + |DOC_PATH| + "/test_docs/index.html" +// First we change the title to make it big. +set-window-size: (350, 800) +// We ensure that the "format" of the title is the same as the one we'll use. +assert-text: (".mobile-topbar .location a", "test_docs") +// We store the height we know is correct. +store-property: (".mobile-topbar .location", {"offsetHeight": height}) +// We change the crate name to something longer. +set-text: (".mobile-topbar .location a", "cargo_packager_resource_resolver") +// And we check that the size remained the same. +assert-property: (".mobile-topbar .location", {"offsetHeight": |height|}) + +// Now we check if it works for the non-crate pages as well. +go-to: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html" +// We store the height we know is correct. +store-property: (".mobile-topbar .location", {"offsetHeight": height}) +set-text: (".mobile-topbar .location a", "Something_incredibly_long_because") +// And we check that the size remained the same. +assert-property: (".mobile-topbar .location", {"offsetHeight": |height|}) diff --git a/tests/rustdoc-gui/type-declation-overflow.goml b/tests/rustdoc-gui/type-declation-overflow.goml index 5780f5c88f82c..a97cc98897ae2 100644 --- a/tests/rustdoc-gui/type-declation-overflow.goml +++ b/tests/rustdoc-gui/type-declation-overflow.goml @@ -39,8 +39,8 @@ assert-property: ("pre.item-decl", {"scrollWidth": "950"}) set-window-size: (600, 600) go-to: "file://" + |DOC_PATH| + "/lib2/too_long/struct.SuperIncrediblyLongLongLongLongLongLongLongGigaGigaGigaMegaLongLongLongStructName.html" // It shouldn't have an overflow in the topbar either. -store-property: (".mobile-topbar h2", {"scrollWidth": scrollWidth}) -assert-property: (".mobile-topbar h2", {"clientWidth": |scrollWidth|}) +store-property: (".mobile-topbar", {"scrollWidth": scrollWidth}) +assert-property: (".mobile-topbar", {"clientWidth": |scrollWidth|}) assert-css: (".mobile-topbar h2", {"overflow-x": "hidden"}) // Check wrapping for top main-heading h1 and out-of-band.