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