tests/rustdoc-gui/sidebar-mobile.goml

   1 // This test ensure that the sidebar isn't "hidden" on mobile but instead moved out of the viewport.
   2 // This is especially important for devices for "text-first" content (like for users with
   3 // sight issues).
   4 goto: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html"
   5 // Switching to "mobile view" by reducing the width to 600px.
   6 size: (600, 600)
   7 assert-css: (".sidebar", {"display": "block", "left": "-1000px"})
   8 // Opening the sidebar menu.
   9 click: ".sidebar-menu-toggle"
  10 assert-css: (".sidebar", {"display": "block", "left": "0px"})
  11 // Closing the sidebar menu.
  12 click: ".sidebar-menu-toggle"
  13 assert-css: (".sidebar", {"display": "block", "left": "-1000px"})
  14 // Force the sidebar open by focusing a link inside it.
  15 // This makes it easier for keyboard users to get to it.
  16 focus: ".sidebar-elems h3 a"
  17 assert-css: (".sidebar", {"display": "block", "left": "0px"})
  18 // When we tab out of the sidebar, close it.
  19 focus: ".search-input"
  20 assert-css: (".sidebar", {"display": "block", "left": "-1000px"})
  21
  22 // Open the sidebar menu.
  23 click: ".sidebar-menu-toggle"
  24 assert-css: (".sidebar", {"left": "0px"})
  25
  26 // Make sure the "struct Foo" header is hidden, since the mobile topbar already does it.
  27 assert-css: ("//nav[contains(@class, 'sidebar')]//h2/a[text()='Foo']/parent::h2", {"display": "none"})
  28 // Make sure the global navigation is still here.
  29 assert-css: ("//nav[contains(@class, 'sidebar')]//h2/a[text()='In test_docs']/parent::h2", {"display": "block"})
  30
  31 // Click elsewhere.
  32 click: "body"
  33 assert-css: (".sidebar", {"display": "block", "left": "-1000px"})
  34
  35 // Open the sidebar menu, and make sure pressing Escape closes it.
  36 click: ".sidebar-menu-toggle"
  37 assert-css: (".sidebar", {"left": "0px"})
  38 press-key: "Escape"
  39 assert-css: (".sidebar", {"display": "block", "left": "-1000px"})
  40
  41 // Check that the topbar is visible
  42 assert-property: (".mobile-topbar", {"clientHeight": "45"})
  43
  44 // Check that clicking an element from the sidebar scrolls to the right place
  45 // so the target is not obscured by the topbar.
  46 click: ".sidebar-menu-toggle"
  47 click: ".sidebar-elems section .block li > a"
  48 assert-position: ("#method\.must_use", {"y": 45})
  49
  50 // Check that the bottom-most item on the sidebar menu can be scrolled fully into view.
  51 click: ".sidebar-menu-toggle"
  52 scroll-to: ".block.keyword li:nth-child(1)"
  53 compare-elements-position-near: (".block.keyword li:nth-child(1)", ".mobile-topbar", {"y": 543.19})
  54
  55 // Now checking the background color of the sidebar.
  56 show-text: true
  57
  58 define-function: (
  59     "check-colors",
  60     (theme, color, background),
  61     block {
  62         local-storage: {"rustdoc-use-system-theme": "false", "rustdoc-theme": |theme|}
  63         reload:
  64
  65         // Open the sidebar menu.
  66         click: ".sidebar-menu-toggle"
  67         assert-css: (".sidebar", {
  68             "background-color": |background|,
  69             "color": |color|,
  70         })
  71     },
  72 )
  73
  74 call-function: ("check-colors", {
  75     "theme": "ayu",
  76     "color": "rgb(197, 197, 197)",
  77     "background": "rgb(20, 25, 31)",
  78 })
  79 call-function: ("check-colors", {
  80     "theme": "dark",
  81     "color": "rgb(221, 221, 221)",
  82     "background": "rgb(80, 80, 80)",
  83 })
  84 call-function: ("check-colors", {
  85     "theme": "light",
  86     "color": "rgb(0, 0, 0)",
  87     "background": "rgb(245, 245, 245)",
  88 })