diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 9fe0dee058830..4ca826bf9e68b 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1391,31 +1391,10 @@ details.dir-entry { padding-left: 4px; } -details.dir-entry > summary::after { - content: " ►"; - position: absolute; - left: -15px; - top: 0px; - font-size: 80%; - padding: 2px 0px; - /* set width to cover gap between arrow and text */ - width: 25px; -} - -details[open].dir-entry > summary::after { - content: " ▼"; -} - -details.dir-entry > summary::-webkit-details-marker, -details.dir-entry > summary::marker { - display: none; -} - details.dir-entry > summary { - margin: 0 0 0 13px; - list-style: none; + margin: 0 0 0 -4px; + padding: 0 0 0 4px; cursor: pointer; - position: relative; } details.dir-entry div.folders, details.dir-entry div.files { diff --git a/src/test/rustdoc-gui/source-code-page.goml b/src/test/rustdoc-gui/source-code-page.goml index 8a33e71319129..aa79219696020 100644 --- a/src/test/rustdoc-gui/source-code-page.goml +++ b/src/test/rustdoc-gui/source-code-page.goml @@ -111,8 +111,57 @@ assert-property: ("#source-sidebar details:first-of-type", {"open": "true"}) click: "#source-sidebar details:first-of-type > summary" assert-property: ("#source-sidebar details:first-of-type", {"open": "false"}) -// Check the spacing. -assert-css: ("#source-sidebar > details.dir-entry", {"padding-left": "4px"}) +// And open it again, since it'll be the reference we use to check positions. +click: "#source-sidebar details:first-of-type > summary" +assert-property: ("#source-sidebar details:first-of-type", {"open": "true"}) + +// Check the sidebar directory entries have a marker and spacing (desktop). +store-property: ( + link_height, + "#source-sidebar > details:first-of-type.dir-entry[open] > .files > a", + "offsetHeight" +) +define-function: ( + "check-sidebar-dir-entry", + (x, y), + [ + ("assert", "details:first-of-type.dir-entry[open] > summary::marker"), + ("assert-css", ("#source-sidebar > details:first-of-type.dir-entry", {"padding-left": "4px"})), + // This check ensures that the summary is only one line. + ("assert-property", ( + "#source-sidebar > details:first-of-type.dir-entry[open] > summary", + {"offsetHeight": |link_height|} + )), + ("assert-position", ( + "#source-sidebar > details:first-of-type.dir-entry[open] > summary", + {"x": |x|, "y": |y|} + )), + ("assert-property", ( + "#source-sidebar > details:first-of-type.dir-entry[open] > .files > a", + {"offsetHeight": |link_height|} + )), + ("assert-position", ( + "#source-sidebar > details:first-of-type.dir-entry[open] > .files > a", + // left margin + {"x": |x| + 27, "y": |y| + |link_height|} + )), + ] +) +store-property: ( + source_sidebar_title_height, + "#source-sidebar > .title", + "offsetHeight" +) +store-property: ( + source_sidebar_title_y, + "#source-sidebar > .title", + "offsetTop" +) +call-function: ("check-sidebar-dir-entry", { + "x": 0, + // border + margin = 6 + "y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6, +}) // Check the search form assert-css: ("nav.sub", {"flex-direction": "row"}) @@ -125,13 +174,45 @@ assert-property: ("nav.sub form", {"offsetTop": 28, "offsetHeight": 34}) assert-property: ("#main-content", {"offsetTop": 90}) // 28 = 90 - 34 - 28 -// Now do the same check on moderately-sized mobile. +// Now do the same check on moderately-sized, tablet mobile. size: (700, 700) assert-css: ("nav.sub", {"flex-direction": "row"}) assert-property: ("nav.sub form", {"offsetTop": 21, "offsetHeight": 34}) assert-property: ("#main-content", {"offsetTop": 76}) // 21 = 76 - 34 - 21 -// Tiny mobile gets a different display where the logo is stacked on top. +// Check the sidebar directory entries have a marker and spacing (tablet). +store-property: ( + source_sidebar_title_height, + "#source-sidebar > .title", + "offsetHeight" +) +store-property: ( + source_sidebar_title_y, + "#source-sidebar > .title", + "offsetTop" +) +call-function: ("check-sidebar-dir-entry", { + "x": 0, + "y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6, +}) + +// Tiny, phone mobile gets a different display where the logo is stacked on top. size: (450, 700) assert-css: ("nav.sub", {"flex-direction": "column"}) + +// Check the sidebar directory entries have a marker and spacing (phone). +store-property: ( + source_sidebar_title_height, + "#source-sidebar > .title", + "offsetHeight" +) +store-property: ( + source_sidebar_title_y, + "#source-sidebar > .title", + "offsetTop" +) +call-function: ("check-sidebar-dir-entry", { + "x": 0, + "y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6, +})