tests/rustdoc-gui/source-code-page.goml

   1 // Checks that the interactions with the source code pages are working as expected.
   2 goto: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
   3 show-text: true
   4 // Check that we can click on the line number.
   5 click: ".src-line-numbers > a:nth-child(4)" // This is the anchor for line 4.
   6 // Ensure that the page URL was updated.
   7 assert-document-property: ({"URL": "lib.rs.html#4"}, ENDS_WITH)
   8 assert-attribute: ("//*[@id='4']", {"class": "line-highlighted"})
   9 // Ensure that the default style, with the right border, isn't used.
  10 assert-css: ("//*[@id='4']", {"border-right-width": "0px"})
  11 reload:
  12 assert-attribute: ("//*[@id='4']", {"class": "line-highlighted"})
  13 assert-css: ("//*[@id='4']", {"border-right-width": "0px"})
  14 // We now check that the good anchors are highlighted
  15 goto: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html#4-6"
  16 assert-attribute-false: (".src-line-numbers > a:nth-child(3)", {"class": "line-highlighted"})
  17 assert-attribute: (".src-line-numbers > a:nth-child(4)", {"class": "line-highlighted"})
  18 assert-attribute: (".src-line-numbers > a:nth-child(5)", {"class": "line-highlighted"})
  19 assert-attribute: (".src-line-numbers > a:nth-child(6)", {"class": "line-highlighted"})
  20 assert-attribute-false: (".src-line-numbers > a:nth-child(7)", {"class": "line-highlighted"})
  21
  22 define-function: (
  23     "check-colors",
  24     (theme, color, background_color, highlight_color, highlight_background_color),
  25     block {
  26         local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
  27         reload:
  28         assert-css: (
  29             ".src-line-numbers > a:not(.line-highlighted)",
  30             {"color": |color|, "background-color": |background_color|},
  31             ALL,
  32         )
  33         assert-css: (
  34             ".src-line-numbers > a.line-highlighted",
  35             {"color": |highlight_color|, "background-color": |highlight_background_color|},
  36             ALL,
  37         )
  38     },
  39 )
  40
  41 call-function: ("check-colors", {
  42     "theme": "ayu",
  43     "color": "rgb(92, 103, 115)",
  44     "background_color": "rgba(0, 0, 0, 0)",
  45     "highlight_color": "rgb(112, 128, 144)",
  46     "highlight_background_color": "rgba(255, 236, 164, 0.06)",
  47 })
  48 call-function: ("check-colors", {
  49     "theme": "dark",
  50     "color": "rgb(59, 145, 226)",
  51     "background_color": "rgba(0, 0, 0, 0)",
  52     "highlight_color": "rgb(59, 145, 226)",
  53     "highlight_background_color": "rgb(10, 4, 47)",
  54 })
  55 call-function: ("check-colors", {
  56     "theme": "light",
  57     "color": "rgb(198, 126, 45)",
  58     "background_color": "rgba(0, 0, 0, 0)",
  59     "highlight_color": "rgb(198, 126, 45)",
  60     "highlight_background_color": "rgb(253, 255, 211)",
  61 })
  62
  63 // This is to ensure that the content is correctly align with the line numbers.
  64 compare-elements-position: ("//*[@id='1']", ".rust > code > span", ("y"))
  65 // Check the `href` property so that users can treat anchors as links.
  66 assert-property: (".src-line-numbers > a:nth-child(1)", {
  67     "href": "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html#1"
  68 })
  69 assert-property: (".src-line-numbers > a:nth-child(2)", {
  70     "href": "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html#2"
  71 })
  72 assert-property: (".src-line-numbers > a:nth-child(3)", {
  73     "href": "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html#3"
  74 })
  75 assert-property: (".src-line-numbers > a:nth-child(4)", {
  76     "href": "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html#4"
  77 })
  78 assert-property: (".src-line-numbers > a:nth-child(5)", {
  79     "href": "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html#5"
  80 })
  81 assert-property: (".src-line-numbers > a:nth-child(6)", {
  82     "href": "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html#6"
  83 })
  84
  85 // Assert that the line numbers text is aligned to the right.
  86 assert-css: (".src-line-numbers", {"text-align": "right"})
  87
  88 // Now let's check that clicking on something else than the line number doesn't
  89 // do anything (and certainly not add a `#NaN` to the URL!).
  90 goto: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
  91 // We use this assert-position to know where we will click.
  92 assert-position: ("//*[@id='1']", {"x": 88, "y": 112})
  93 // We click on the left of the "1" anchor but still in the "src-line-number" `<pre>`.
  94 click: (87, 103)
  95 assert-document-property: ({"URL": "/lib.rs.html"}, ENDS_WITH)
  96
  97 // Checking the source code sidebar.
  98
  99 // First we "open" it.
 100 click: "#src-sidebar-toggle"
 101 assert: ".source-sidebar-expanded"
 102
 103 // We check that the first entry of the sidebar is collapsed
 104 assert-property: ("#source-sidebar details:first-of-type", {"open": "false"})
 105 assert-text: ("#source-sidebar details:first-of-type > summary", "http")
 106 // We now click on it.
 107 click: "#source-sidebar details:first-of-type > summary"
 108 assert-property: ("#source-sidebar details:first-of-type", {"open": "true"})
 109
 110 // And now we collapse it again.
 111 click: "#source-sidebar details:first-of-type > summary"
 112 assert-property: ("#source-sidebar details:first-of-type", {"open": "false"})
 113
 114 // And open it again, since it'll be the reference we use to check positions.
 115 click: "#source-sidebar details:first-of-type > summary"
 116 assert-property: ("#source-sidebar details:first-of-type", {"open": "true"})
 117
 118 // Check the sidebar directory entries have a marker and spacing (desktop).
 119 store-property: (
 120     link_height,
 121     "#source-sidebar > details:first-of-type.dir-entry[open] > .files > a",
 122     "offsetHeight"
 123 )
 124 define-function: (
 125     "check-sidebar-dir-entry",
 126     (x, y),
 127     block {
 128         assert: "details:first-of-type.dir-entry[open] > summary::marker"
 129         assert-css: ("#source-sidebar > details:first-of-type.dir-entry", {"padding-left": "4px"})
 130         // This check ensures that the summary is only one line.
 131         assert-property: (
 132             "#source-sidebar > details:first-of-type.dir-entry[open] > summary",
 133             {"offsetHeight": |link_height|}
 134         )
 135         assert-position: (
 136             "#source-sidebar > details:first-of-type.dir-entry[open] > summary",
 137             {"x": |x|, "y": |y|}
 138         )
 139         assert-property: (
 140             "#source-sidebar > details:first-of-type.dir-entry[open] > .files > a",
 141             {"offsetHeight": |link_height|}
 142         )
 143         assert-position: (
 144             "#source-sidebar > details:first-of-type.dir-entry[open] > .files > a",
 145             // left margin
 146             {"x": |x| + 27, "y": |y| + |link_height|}
 147         )
 148     }
 149 )
 150 store-property: (
 151     source_sidebar_title_height,
 152     "#source-sidebar > .title",
 153     "offsetHeight"
 154 )
 155 store-property: (
 156     source_sidebar_title_y,
 157     "#source-sidebar > .title",
 158     "offsetTop"
 159 )
 160 call-function: ("check-sidebar-dir-entry", {
 161     "x": 0,
 162     // border + margin = 6
 163     "y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6,
 164 })
 165
 166 // Check the search form
 167 assert-css: ("nav.sub", {"flex-direction": "row"})
 168 // The goal of this test is to ensure the search input is perfectly centered
 169 // between the top of the page and the top of the gray code block.
 170 // To check this, we maintain the invariant:
 171 //
 172 // offsetTop[nav.sub form] = offsetTop[#main-content] - offsetHeight[nav.sub form] - offsetTop[nav.sub form]
 173 assert-property: ("nav.sub form", {"offsetTop": 28, "offsetHeight": 34})
 174 assert-property: ("#main-content", {"offsetTop": 90})
 175 // 28 = 90 - 34 - 28
 176
 177 // Now do the same check on moderately-sized, tablet mobile.
 178 size: (700, 700)
 179 assert-css: ("nav.sub", {"flex-direction": "row"})
 180 assert-property: ("nav.sub form", {"offsetTop": 21, "offsetHeight": 34})
 181 assert-property: ("#main-content", {"offsetTop": 76})
 182 // 21 = 76 - 34 - 21
 183
 184 // Check the sidebar directory entries have a marker and spacing (tablet).
 185 store-property: (
 186     source_sidebar_title_height,
 187     "#source-sidebar > .title",
 188     "offsetHeight"
 189 )
 190 store-property: (
 191     source_sidebar_title_y,
 192     "#source-sidebar > .title",
 193     "offsetTop"
 194 )
 195 call-function: ("check-sidebar-dir-entry", {
 196     "x": 0,
 197     "y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6,
 198 })
 199
 200 // Tiny, phone mobile gets a different display where the logo is stacked on top.
 201 size: (450, 700)
 202 assert-css: ("nav.sub", {"flex-direction": "column"})
 203
 204 // Check the sidebar directory entries have a marker and spacing (phone).
 205 store-property: (
 206     source_sidebar_title_height,
 207     "#source-sidebar > .title",
 208     "offsetHeight"
 209 )
 210 store-property: (
 211     source_sidebar_title_y,
 212     "#source-sidebar > .title",
 213     "offsetTop"
 214 )
 215 call-function: ("check-sidebar-dir-entry", {
 216     "x": 0,
 217     "y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6,
 218 })