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
4 goto: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html"
5 // Switching to "mobile view" by reducing the width to 600px.
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"})
22 // Open the sidebar menu.
23 click: ".sidebar-menu-toggle"
24 assert-css: (".sidebar", {"left": "0px"})
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"})
33 assert-css: (".sidebar", {"display": "block", "left": "-1000px"})
35 // Open the sidebar menu, and make sure pressing Escape closes it.
36 click: ".sidebar-menu-toggle"
37 assert-css: (".sidebar", {"left": "0px"})
39 assert-css: (".sidebar", {"display": "block", "left": "-1000px"})
41 // Check that the topbar is visible
42 assert-property: (".mobile-topbar", {"clientHeight": "45"})
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})
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})
55 // Now checking the background color of the sidebar.
60 (theme, color, background),
62 ("local-storage", {"rustdoc-use-system-theme": "false", "rustdoc-theme": |theme|}),
65 // Open the sidebar menu.
66 ("click", ".sidebar-menu-toggle"),
67 ("assert-css", (".sidebar", {
68 "background-color": |background|,
74 call-function: ("check-colors", {
76 "color": "rgb(197, 197, 197)",
77 "background": "rgb(20, 25, 31)",
79 call-function: ("check-colors", {
81 "color": "rgb(221, 221, 221)",
82 "background": "rgb(80, 80, 80)",
84 call-function: ("check-colors", {
86 "color": "rgb(0, 0, 0)",
87 "background": "rgb(245, 245, 245)",