src/test/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 > span:nth-child(4)" // This is the span 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 // We now check that the good spans are highlighted
  10 goto: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html#4-6"
  11 assert-attribute-false: (".src-line-numbers > span:nth-child(3)", {"class": "line-highlighted"})
  12 assert-attribute: (".src-line-numbers > span:nth-child(4)", {"class": "line-highlighted"})
  13 assert-attribute: (".src-line-numbers > span:nth-child(5)", {"class": "line-highlighted"})
  14 assert-attribute: (".src-line-numbers > span:nth-child(6)", {"class": "line-highlighted"})
  15 assert-attribute-false: (".src-line-numbers > span:nth-child(7)", {"class": "line-highlighted"})
  16
  17 define-function: (
  18     "check-colors",
  19     (theme, color, background_color, highlight_color, highlight_background_color),
  20     [
  21         ("local-storage", {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}),
  22         ("reload"),
  23         ("assert-css", (
  24             ".src-line-numbers > span:not(.line-highlighted)",
  25             {"color": |color|, "background-color": |background_color|},
  26             ALL,
  27         )),
  28         ("assert-css", (
  29             ".src-line-numbers > span.line-highlighted",
  30             {"color": |highlight_color|, "background-color": |highlight_background_color|},
  31             ALL,
  32         )),
  33     ],
  34 )
  35
  36 call-function: ("check-colors", {
  37     "theme": "ayu",
  38     "color": "rgb(92, 103, 115)",
  39     "background_color": "rgba(0, 0, 0, 0)",
  40     "highlight_color": "rgb(112, 128, 144)",
  41     "highlight_background_color": "rgba(255, 236, 164, 0.06)",
  42 })
  43 call-function: ("check-colors", {
  44     "theme": "dark",
  45     "color": "rgb(59, 145, 226)",
  46     "background_color": "rgba(0, 0, 0, 0)",
  47     "highlight_color": "rgb(59, 145, 226)",
  48     "highlight_background_color": "rgb(10, 4, 47)",
  49 })
  50 call-function: ("check-colors", {
  51     "theme": "light",
  52     "color": "rgb(198, 126, 45)",
  53     "background_color": "rgba(0, 0, 0, 0)",
  54     "highlight_color": "rgb(198, 126, 45)",
  55     "highlight_background_color": "rgb(253, 255, 211)",
  56 })
  57
  58 // This is to ensure that the content is correctly align with the line numbers.
  59 compare-elements-position: ("//*[@id='1']", ".rust > code > span", ("y"))
  60
  61 // Assert that the line numbers text is aligned to the right.
  62 assert-css: (".src-line-numbers", {"text-align": "right"})
  63
  64 // Now let's check that clicking on something else than the line number doesn't
  65 // do anything (and certainly not add a `#NaN` to the URL!).
  66 goto: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
  67 // We use this assert-position to know where we will click.
  68 assert-position: ("//*[@id='1']", {"x": 104, "y": 112})
  69 // We click on the left of the "1" span but still in the "src-line-number" `<pre>`.
  70 click: (103, 103)
  71 assert-document-property: ({"URL": "/lib.rs.html"}, ENDS_WITH)
  72
  73 // Checking the source code sidebar.
  74
  75 // First we "open" it.
  76 click: "#sidebar-toggle"
  77 assert: ".source-sidebar-expanded"
  78
  79 // We check that the first entry of the sidebar is collapsed
  80 assert-property: ("#source-sidebar details:first-of-type", {"open": "false"})
  81 assert-text: ("#source-sidebar details:first-of-type > summary", "implementors")
  82 // We now click on it.
  83 click: "#source-sidebar details:first-of-type > summary"
  84 assert-property: ("#source-sidebar details:first-of-type", {"open": "true"})
  85
  86 // And now we collapse it again.
  87 click: "#source-sidebar details:first-of-type > summary"
  88 assert-property: ("#source-sidebar details:first-of-type", {"open": "false"})
  89
  90 // Check the spacing.
  91 assert-css: ("#source-sidebar > details.dir-entry", {"padding-left": "4px"})
  92
  93 // Check the search form
  94 assert-css: ("nav.sub", {"flex-direction": "row"})
  95 // The goal of this test is to ensure the search input is perfectly centered
  96 // between the top of the page and the top of the gray code block.
  97 // To check this, we maintain the invariant:
  98 //
  99 // offsetTop[nav.sub form] = offsetTop[#main-content] - offsetHeight[nav.sub form] - offsetTop[nav.sub form]
 100 assert-property: ("nav.sub form", {"offsetTop": 28, "offsetHeight": 34})
 101 assert-property: ("#main-content", {"offsetTop": 90})
 102 // 28 = 90 - 34 - 28
 103
 104 // Now do the same check on moderately-sized mobile.
 105 size: (700, 700)
 106 assert-css: ("nav.sub", {"flex-direction": "row"})
 107 assert-property: ("nav.sub form", {"offsetTop": 21, "offsetHeight": 34})
 108 assert-property: ("#main-content", {"offsetTop": 76})
 109 // 21 = 76 - 34 - 21
 110
 111 // Tiny mobile gets a different display where the logo is stacked on top.
 112 size: (450, 700)
 113 assert-css: ("nav.sub", {"flex-direction": "column"})