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: "#sidebar-toggle"
   6 // For some reason, we need to wait a bit here because it seems like the transition on opacity
   7 // is being applied whereas it can't be reproduced in a browser...
   8 wait-for-css: (".sidebar > *", {"visibility": "hidden", "opacity": 0})
   9
  10 // Let's retry with javascript enabled.
  11 javascript: true
  12 reload:
  13 wait-for: "#sidebar-toggle"
  14 assert-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
  15 assert-css: (".sidebar > *:not(#sidebar-toggle)", {"visibility": "hidden", "opacity": 0})
  16 // Let's expand the sidebar now.
  17 click: "#sidebar-toggle"
  18 // Because of the transition CSS, we check by using `wait-for-css` instead of `assert-css`.
  19 wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
  20
  21 // We now check that opening the sidebar and clicking a link will leave it open.
  22 // The behavior here on desktop is different than the behavior on mobile,
  23 // but since the sidebar doesn't fill the entire screen here, it makes sense to have the
  24 // sidebar stay resident.
  25 wait-for-css: (".sidebar", {"width": "300px"})
  26 assert-local-storage: {"rustdoc-source-sidebar-show": "true"}
  27 click: ".sidebar a.selected"
  28 goto: file://|DOC_PATH|/src/test_docs/lib.rs.html
  29 wait-for-css: (".sidebar", {"width": "300px"})
  30 assert-local-storage: {"rustdoc-source-sidebar-show": "true"}
  31
  32 // Now we check the display of the sidebar items.
  33 show-text: true
  34
  35 // First we start with the light theme.
  36 local-storage: {"rustdoc-theme": "light", "rustdoc-use-system-theme": "false"}
  37 reload:
  38 // Waiting for the sidebar to be displayed...
  39 wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
  40 assert-css: (
  41     "#source-sidebar details[open] > .files a.selected",
  42     {"color": "rgb(0, 0, 0)", "background-color": "rgb(255, 255, 255)"},
  43 )
  44 // Without hover or focus.
  45 assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(0, 0, 0, 0)"})
  46 // With focus.
  47 focus: "#sidebar-toggle > button"
  48 assert-css: ("#sidebar-toggle > button", {"background-color": "rgb(224, 224, 224)"})
  49 focus: ".search-input"
  50 // With hover.
  51 move-cursor-to: "#sidebar-toggle > button"
  52 assert-css: ("#sidebar-toggle > button", {"background-color": "rgb(224, 224, 224)"})
  53 // Without hover.
  54 assert-css: (
  55     "#source-sidebar details[open] > .files a:not(.selected)",
  56     {"color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)"},
  57 )
  58 // With focus.
  59 focus: "#source-sidebar details[open] > .files a:not(.selected)"
  60 wait-for-css: (
  61     "#source-sidebar details[open] > .files a:not(.selected)",
  62     {"color": "rgb(0, 0, 0)", "background-color": "rgb(224, 224, 224)"},
  63 )
  64 focus: ".search-input"
  65 // With hover.
  66 move-cursor-to: "#source-sidebar details[open] > .files a:not(.selected)"
  67 assert-css: (
  68     "#source-sidebar details[open] > .files a:not(.selected)",
  69     {"color": "rgb(0, 0, 0)", "background-color": "rgb(224, 224, 224)"},
  70 )
  71 // Without hover.
  72 assert-css: (
  73     "#source-sidebar details[open] > .folders > details > summary",
  74     {"color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)"},
  75 )
  76 // With focus.
  77 focus: "#source-sidebar details[open] > .folders > details > summary"
  78 wait-for-css: (
  79     "#source-sidebar details[open] > .folders > details > summary",
  80     {"color": "rgb(0, 0, 0)", "background-color": "rgb(224, 224, 224)"},
  81 )
  82 focus: ".search-input"
  83 // With hover.
  84 move-cursor-to: "#source-sidebar details[open] > .folders > details > summary"
  85 assert-css: (
  86     "#source-sidebar details[open] > .folders > details > summary",
  87     {"color": "rgb(0, 0, 0)", "background-color": "rgb(224, 224, 224)"},
  88 )
  89
  90 // Now with the dark theme.
  91 local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
  92 reload:
  93 // Waiting for the sidebar to be displayed...
  94 wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
  95 assert-css: (
  96     "#source-sidebar details[open] > .files > a.selected",
  97     {"color": "rgb(221, 221, 221)", "background-color": "rgb(51, 51, 51)"},
  98 )
  99 // Without hover or focus.
 100 assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(0, 0, 0, 0)"})
 101 // With focus.
 102 focus: "#sidebar-toggle > button"
 103 assert-css: ("#sidebar-toggle > button", {"background-color": "rgb(103, 103, 103)"})
 104 focus: ".search-input"
 105 // With hover.
 106 move-cursor-to: "#sidebar-toggle > button"
 107 assert-css: ("#sidebar-toggle > button", {"background-color": "rgb(103, 103, 103)"})
 108 // Without hover.
 109 assert-css: (
 110     "#source-sidebar details[open] > .files > a:not(.selected)",
 111     {"color": "rgb(221, 221, 221)", "background-color": "rgba(0, 0, 0, 0)"},
 112 )
 113 // With focus.
 114 focus: "#source-sidebar details[open] > .files a:not(.selected)"
 115 wait-for-css: (
 116     "#source-sidebar details[open] > .files a:not(.selected)",
 117     {"color": "rgb(221, 221, 221)", "background-color": "rgb(68, 68, 68)"},
 118 )
 119 focus: ".search-input"
 120 // With hover.
 121 move-cursor-to: "#source-sidebar details[open] > .files a:not(.selected)"
 122 assert-css: (
 123     "#source-sidebar details[open] > .files a:not(.selected)",
 124     {"color": "rgb(221, 221, 221)", "background-color": "rgb(68, 68, 68)"},
 125 )
 126 // Without hover.
 127 assert-css: (
 128     "#source-sidebar details[open] > .folders > details > summary",
 129     {"color": "rgb(221, 221, 221)", "background-color": "rgba(0, 0, 0, 0)"},
 130 )
 131 // With focus.
 132 focus: "#source-sidebar details[open] > .folders > details > summary"
 133 wait-for-css: (
 134     "#source-sidebar details[open] > .folders > details > summary",
 135     {"color": "rgb(221, 221, 221)", "background-color": "rgb(68, 68, 68)"},
 136 )
 137 focus: ".search-input"
 138 // With hover.
 139 move-cursor-to: "#source-sidebar details[open] > .folders > details > summary"
 140 assert-css: (
 141     "#source-sidebar details[open] > .folders > details > summary",
 142     {"color": "rgb(221, 221, 221)", "background-color": "rgb(68, 68, 68)"},
 143 )
 144
 145 // And finally with the ayu theme.
 146 local-storage: {"rustdoc-theme": "ayu", "rustdoc-use-system-theme": "false"}
 147 reload:
 148 // Waiting for the sidebar to be displayed...
 149 wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
 150 assert-css: (
 151     "#source-sidebar details[open] > .files a.selected",
 152     {"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
 153 )
 154 // Without hover or focus.
 155 assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(0, 0, 0, 0)"})
 156 // With focus.
 157 focus: "#sidebar-toggle > button"
 158 assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(70, 70, 70, 0.33)"})
 159 focus: ".search-input"
 160 // With hover.
 161 move-cursor-to: "#sidebar-toggle > button"
 162 assert-css: ("#sidebar-toggle > button", {"background-color": "rgba(70, 70, 70, 0.33)"})
 163 // Without hover.
 164 assert-css: (
 165     "#source-sidebar details[open] > .files a:not(.selected)",
 166     {"color": "rgb(197, 197, 197)", "background-color": "rgba(0, 0, 0, 0)"},
 167 )
 168 // With focus.
 169 focus: "#source-sidebar details[open] > .files a:not(.selected)"
 170 wait-for-css: (
 171     "#source-sidebar details[open] > .files a:not(.selected)",
 172     {"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
 173 )
 174 focus: ".search-input"
 175 // With hover.
 176 move-cursor-to: "#source-sidebar details[open] > .files a:not(.selected)"
 177 assert-css: (
 178     "#source-sidebar details[open] > .files a:not(.selected)",
 179     {"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
 180 )
 181 // Without hover.
 182 assert-css: (
 183     "#source-sidebar details[open] > .folders > details > summary",
 184     {"color": "rgb(197, 197, 197)", "background-color": "rgba(0, 0, 0, 0)"},
 185 )
 186 // With focus.
 187 focus: "#source-sidebar details[open] > .folders > details > summary"
 188 wait-for-css: (
 189     "#source-sidebar details[open] > .folders > details > summary",
 190     {"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
 191 )
 192 focus: ".search-input"
 193 // With hover.
 194 move-cursor-to: "#source-sidebar details[open] > .folders > details > summary"
 195 assert-css: (
 196     "#source-sidebar details[open] > .folders > details > summary",
 197     {"color": "rgb(255, 180, 76)", "background-color": "rgb(20, 25, 31)"},
 198 )
 199
 200 // Now checking on mobile devices.
 201 size: (500, 700)
 202 reload:
 203 // Waiting for the sidebar to be displayed...
 204 wait-for-css: ("#sidebar-toggle", {"visibility": "visible", "opacity": 1})
 205
 206 // We now check it takes the full size of the display.
 207 assert-property: ("body", {"clientWidth": "500", "clientHeight": "700"})
 208 assert-property: (".sidebar", {"clientWidth": "500", "clientHeight": "700"})
 209
 210 // We now check the display of the toggle once the sidebar is expanded.
 211 assert-property: ("#sidebar-toggle", {"clientWidth": "500", "clientHeight": "39"})
 212 assert-css: (
 213     "#sidebar-toggle",
 214     {
 215         "border-top-width": "0px",
 216         "border-right-width": "0px",
 217         "border-left-width": "0px",
 218         "border-bottom-width": "1px",
 219     },
 220 )
 221
 222 // We now check that the scroll position is kept when opening the sidebar.
 223 click: "#sidebar-toggle"
 224 wait-for-css: (".sidebar", {"width": "0px"})
 225 // We scroll to line 117 to change the scroll position.
 226 scroll-to: '//*[@id="117"]'
 227 assert-window-property: {"pageYOffset": "2519"}
 228 // Expanding the sidebar...
 229 click: "#sidebar-toggle"
 230 wait-for-css: (".sidebar", {"width": "500px"})
 231 click: "#sidebar-toggle"
 232 wait-for-css: (".sidebar", {"width": "0px"})
 233 // The "scrollTop" property should be the same.
 234 assert-window-property: {"pageYOffset": "2519"}
 235
 236 // We now check that the scroll position is restored if the window is resized.
 237 size: (500, 700)
 238 click: "#sidebar-toggle"
 239 wait-for-css: ("#source-sidebar", {"visibility": "visible"})
 240 assert-window-property: {"pageYOffset": "0"}
 241 size: (900, 900)
 242 assert-window-property: {"pageYOffset": "2519"}
 243 size: (500, 700)
 244 click: "#sidebar-toggle"
 245 wait-for-css: ("#source-sidebar", {"visibility": "hidden"})
 246
 247 // We now check that opening the sidebar and clicking a link will close it.
 248 // The behavior here on mobile is different than the behavior on desktop,
 249 // but common sense dictates that if you have a list of files that fills the entire screen, and
 250 // you click one of them, you probably want to actually see the file's contents, and not just
 251 // make it the current selection.
 252 click: "#sidebar-toggle"
 253 wait-for-css: ("#source-sidebar", {"visibility": "visible"})
 254 assert-local-storage: {"rustdoc-source-sidebar-show": "true"}
 255 click: ".sidebar a.selected"
 256 goto: file://|DOC_PATH|/src/test_docs/lib.rs.html
 257 wait-for-css: ("#source-sidebar", {"visibility": "hidden"})
 258 assert-local-storage: {"rustdoc-source-sidebar-show": "false"}
 259 // Resize back to desktop size, to check that the sidebar doesn't spontaneously open.
 260 size: (1000, 1000)
 261 wait-for-css: ("#source-sidebar", {"visibility": "hidden"})
 262 assert-local-storage: {"rustdoc-source-sidebar-show": "false"}
 263 click: "#sidebar-toggle"
 264 wait-for-css: ("#source-sidebar", {"visibility": "visible"})
 265 assert-local-storage: {"rustdoc-source-sidebar-show": "true"}