src/test/rustdoc-gui/sidebar-source-code-display.goml

   1 // This test ensures that the elements in the sidebar are displayed correctly.
   2 javascript: false
   3 goto: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
   4 // Since the javascript is disabled, there shouldn't be a toggle.
   5 assert-false: "#src-sidebar-toggle"
   6 wait-for-css: (".sidebar", {"display": "none"})
   7
   8 // Let's retry with javascript enabled.
   9 javascript: true
  10 reload:
  11 wait-for: "#src-sidebar-toggle"
  12 assert-css: ("#src-sidebar-toggle", {"visibility": "visible"})
  13 assert-css: (".sidebar > *:not(#src-sidebar-toggle)", {"visibility": "hidden"})
  14 // Let's expand the sidebar now.
  15 click: "#src-sidebar-toggle"
  16 wait-for-css: ("#src-sidebar-toggle", {"visibility": "visible"})
  17
  18 // We now check that opening the sidebar and clicking a link will leave it open.
  19 // The behavior here on desktop is different than the behavior on mobile,
  20 // but since the sidebar doesn't fill the entire screen here, it makes sense to have the
  21 // sidebar stay resident.
  22 wait-for-css: (".sidebar", {"width": "300px"})
  23 assert-local-storage: {"rustdoc-source-sidebar-show": "true"}
  24 click: ".sidebar a.selected"
  25 goto: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
  26 wait-for-css: (".sidebar", {"width": "300px"})
  27 assert-local-storage: {"rustdoc-source-sidebar-show": "true"}
  28
  29 // Now we check the display of the sidebar items.
  30 show-text: true
  31
  32 define-function: (
  33     "check-colors",
  34     (
  35         theme, color, color_hover, background, background_hover, background_toggle,
  36         background_toggle_hover,
  37     ),
  38     [
  39         ("local-storage", {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}),
  40         ("reload"),
  41         ("wait-for-css", ("#src-sidebar-toggle", {"visibility": "visible"})),
  42         ("assert-css", (
  43             "#source-sidebar details[open] > .files a.selected",
  44             {"color": |color_hover|, "background-color": |background|},
  45         )),
  46
  47         // Without hover or focus.
  48         ("assert-css", ("#src-sidebar-toggle > button", {"background-color": |background_toggle|})),
  49         // With focus.
  50         ("focus", "#src-sidebar-toggle > button"),
  51         ("assert-css", (
  52             "#src-sidebar-toggle > button:focus",
  53             {"background-color": |background_toggle_hover|},
  54         )),
  55         ("focus", ".search-input"),
  56         // With hover.
  57         ("move-cursor-to", "#src-sidebar-toggle > button"),
  58         ("assert-css", (
  59             "#src-sidebar-toggle > button:hover",
  60             {"background-color": |background_toggle_hover|},
  61         )),
  62
  63         // Without hover or focus.
  64         ("assert-css", (
  65             "#source-sidebar details[open] > .files a:not(.selected)",
  66             {"color": |color|, "background-color": |background_toggle|},
  67         )),
  68         // With focus.
  69         ("focus", "#source-sidebar details[open] > .files a:not(.selected)"),
  70         ("wait-for-css", (
  71             "#source-sidebar details[open] > .files a:not(.selected):focus",
  72             {"color": |color_hover|, "background-color": |background_hover|},
  73         )),
  74         ("focus", ".search-input"),
  75         // With hover.
  76         ("move-cursor-to", "#source-sidebar details[open] > .files a:not(.selected)"),
  77         ("assert-css", (
  78             "#source-sidebar details[open] > .files a:not(.selected):hover",
  79             {"color": |color_hover|, "background-color": |background_hover|},
  80         )),
  81
  82         // Without hover or focus.
  83         ("assert-css", (
  84             "#source-sidebar .dir-entry summary",
  85             {"color": |color|, "background-color": |background_toggle|},
  86         )),
  87         // With focus.
  88         ("focus", "#source-sidebar .dir-entry summary"),
  89         ("wait-for-css", (
  90             "#source-sidebar .dir-entry summary:focus",
  91             {"color": |color_hover|, "background-color": |background_hover|},
  92         )),
  93         ("focus", ".search-input"),
  94         // With hover.
  95         ("move-cursor-to", "#source-sidebar .dir-entry summary"),
  96         ("assert-css", (
  97             "#source-sidebar .dir-entry summary:hover",
  98             {"color": |color_hover|, "background-color": |background_hover|},
  99         )),
 100
 101         // Without hover or focus.
 102         ("assert-css", (
 103             "#source-sidebar details[open] > .folders > details > summary",
 104             {"color": |color|, "background-color": |background_toggle|},
 105         )),
 106         // With focus.
 107         ("focus", "#source-sidebar details[open] > .folders > details > summary"),
 108         ("wait-for-css", (
 109             "#source-sidebar details[open] > .folders > details > summary:focus",
 110             {"color": |color_hover|, "background-color": |background_hover|},
 111         )),
 112         ("focus", ".search-input"),
 113         // With hover.
 114         ("move-cursor-to", "#source-sidebar details[open] > .folders > details > summary"),
 115         ("assert-css", (
 116             "#source-sidebar details[open] > .folders > details > summary:hover",
 117             {"color": |color_hover|, "background-color": |background_hover|},
 118         )),
 119     ],
 120 )
 121
 122 call-function: ("check-colors", {
 123     "theme": "light",
 124     "color": "rgb(0, 0, 0)",
 125     "color_hover": "rgb(0, 0, 0)",
 126     "background": "rgb(255, 255, 255)",
 127     "background_hover": "rgb(224, 224, 224)",
 128     "background_toggle": "rgba(0, 0, 0, 0)",
 129     "background_toggle_hover": "rgb(224, 224, 224)",
 130 })
 131 call-function: ("check-colors", {
 132     "theme": "dark",
 133     "color": "rgb(221, 221, 221)",
 134     "color_hover": "rgb(221, 221, 221)",
 135     "background": "rgb(51, 51, 51)",
 136     "background_hover": "rgb(68, 68, 68)",
 137     "background_toggle": "rgba(0, 0, 0, 0)",
 138     "background_toggle_hover": "rgb(103, 103, 103)",
 139 })
 140 call-function: ("check-colors", {
 141     "theme": "ayu",
 142     "color": "rgb(197, 197, 197)",
 143     "color_hover": "rgb(255, 180, 76)",
 144     "background": "rgb(20, 25, 31)",
 145     "background_hover": "rgb(20, 25, 31)",
 146     "background_toggle": "rgba(0, 0, 0, 0)",
 147     "background_toggle_hover": "rgba(70, 70, 70, 0.33)",
 148 })
 149
 150 // Now checking on mobile devices.
 151 size: (500, 700)
 152 reload:
 153 // Waiting for the sidebar to be displayed...
 154 wait-for-css: ("#src-sidebar-toggle", {"visibility": "visible"})
 155
 156 // We now check it takes the full size of the display.
 157 assert-property: ("body", {"clientWidth": "500", "clientHeight": "700"})
 158 assert-property: (".sidebar", {"clientWidth": "500", "clientHeight": "700"})
 159
 160 // We now check the display of the toggle once the sidebar is expanded.
 161 assert-property: ("#src-sidebar-toggle", {"clientWidth": "500", "clientHeight": "39"})
 162 assert-css: (
 163     "#src-sidebar-toggle",
 164     {
 165         "border-top-width": "0px",
 166         "border-right-width": "0px",
 167         "border-left-width": "0px",
 168         "border-bottom-width": "1px",
 169     },
 170 )
 171
 172 // We now check that the scroll position is kept when opening the sidebar.
 173 click: "#src-sidebar-toggle"
 174 wait-for-css: (".sidebar", {"width": "0px"})
 175 // We scroll to line 117 to change the scroll position.
 176 scroll-to: '//*[@id="117"]'
 177 assert-window-property: {"pageYOffset": "2542"}
 178 // Expanding the sidebar...
 179 click: "#src-sidebar-toggle"
 180 wait-for-css: (".sidebar", {"width": "500px"})
 181 click: "#src-sidebar-toggle"
 182 wait-for-css: (".sidebar", {"width": "0px"})
 183 // The "scrollTop" property should be the same.
 184 assert-window-property: {"pageYOffset": "2542"}
 185
 186 // We now check that the scroll position is restored if the window is resized.
 187 size: (500, 700)
 188 click: "#src-sidebar-toggle"
 189 wait-for-css: ("#source-sidebar", {"visibility": "visible"})
 190 assert-window-property: {"pageYOffset": "0"}
 191 size: (900, 900)
 192 assert-window-property: {"pageYOffset": "2542"}
 193 size: (500, 700)
 194 click: "#src-sidebar-toggle"
 195 wait-for-css: ("#source-sidebar", {"visibility": "hidden"})
 196
 197 // We now check that opening the sidebar and clicking a link will close it.
 198 // The behavior here on mobile is different than the behavior on desktop,
 199 // but common sense dictates that if you have a list of files that fills the entire screen, and
 200 // you click one of them, you probably want to actually see the file's contents, and not just
 201 // make it the current selection.
 202 click: "#src-sidebar-toggle"
 203 wait-for-css: ("#source-sidebar", {"visibility": "visible"})
 204 assert-local-storage: {"rustdoc-source-sidebar-show": "true"}
 205 click: ".sidebar a.selected"
 206 goto: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
 207 wait-for-css: ("#source-sidebar", {"visibility": "hidden"})
 208 assert-local-storage: {"rustdoc-source-sidebar-show": "false"}
 209 // Resize back to desktop size, to check that the sidebar doesn't spontaneously open.
 210 size: (1000, 1000)
 211 wait-for-css: ("#source-sidebar", {"visibility": "hidden"})
 212 assert-local-storage: {"rustdoc-source-sidebar-show": "false"}
 213 click: "#src-sidebar-toggle"
 214 wait-for-css: ("#source-sidebar", {"visibility": "visible"})
 215 assert-local-storage: {"rustdoc-source-sidebar-show": "true"}