From cf2dff2b1e3fa55fa5415d524200070d0d7aacfe Mon Sep 17 00:00:00 2001 From: Albert Larsan <74931857+albertlarsan68@users.noreply.github.com> Date: Thu, 5 Jan 2023 09:13:28 +0100 Subject: Move /src/test to /tests --- tests/rustdoc-gui/README.md | 34 ++ tests/rustdoc-gui/anchor-navigable.goml | 11 + tests/rustdoc-gui/anchors.goml | 109 +++++ .../auto-hide-trait-implementations.goml | 13 + tests/rustdoc-gui/basic-code.goml | 4 + tests/rustdoc-gui/check-code-blocks-margin.goml | 6 + tests/rustdoc-gui/check-stab-in-docblock.goml | 27 ++ tests/rustdoc-gui/check_info_sign_position.goml | 11 + tests/rustdoc-gui/code-blocks-overflow.goml | 8 + tests/rustdoc-gui/code-color.goml | 24 ++ tests/rustdoc-gui/code-sidebar-toggle.goml | 7 + tests/rustdoc-gui/code-tags.goml | 24 ++ tests/rustdoc-gui/codeblock-sub.goml | 5 + tests/rustdoc-gui/codeblock-tooltip.goml | 149 +++++++ tests/rustdoc-gui/cursor.goml | 24 ++ tests/rustdoc-gui/default-settings.goml | 8 + tests/rustdoc-gui/docblock-big-code-mobile.goml | 13 + .../docblock-code-block-line-number.goml | 71 +++ tests/rustdoc-gui/docblock-details.goml | 34 ++ tests/rustdoc-gui/docblock-table-overflow.goml | 21 + tests/rustdoc-gui/docblock-table.goml | 52 +++ tests/rustdoc-gui/duplicate-macro-reexport.goml | 14 + tests/rustdoc-gui/enum-variants.goml | 10 + tests/rustdoc-gui/escape-key.goml | 35 ++ tests/rustdoc-gui/font-weight.goml | 44 ++ tests/rustdoc-gui/hash-item-expansion.goml | 11 + tests/rustdoc-gui/headers-color.goml | 70 +++ tests/rustdoc-gui/headings.goml | 234 ++++++++++ tests/rustdoc-gui/help-page.goml | 72 ++++ tests/rustdoc-gui/highlight-colors.goml | 94 ++++ .../rustdoc-gui/huge-collection-of-constants.goml | 9 + tests/rustdoc-gui/huge-logo.goml | 21 + tests/rustdoc-gui/impl-default-expansion.goml | 3 + tests/rustdoc-gui/impl-doc.goml | 9 + tests/rustdoc-gui/implementors.goml | 41 ++ tests/rustdoc-gui/item-decl-colors.goml | 80 ++++ tests/rustdoc-gui/item-info-alignment.goml | 10 + tests/rustdoc-gui/item-info-overflow.goml | 31 ++ tests/rustdoc-gui/item-info.goml | 32 ++ tests/rustdoc-gui/item-summary-table.goml | 6 + tests/rustdoc-gui/javascript-disabled.goml | 6 + tests/rustdoc-gui/jump-to-def-background.goml | 22 + tests/rustdoc-gui/label-next-to-symbol.goml | 66 +++ tests/rustdoc-gui/links-color.goml | 98 +++++ tests/rustdoc-gui/list_code_block.goml | 4 + tests/rustdoc-gui/method-margins.goml | 18 + tests/rustdoc-gui/mobile.goml | 34 ++ tests/rustdoc-gui/module-items-font.goml | 67 +++ tests/rustdoc-gui/no-docblock.goml | 13 + tests/rustdoc-gui/notable-trait.goml | 276 ++++++++++++ .../rustdoc-gui/overflow-tooltip-information.goml | 8 + tests/rustdoc-gui/pocket-menu.goml | 98 +++++ tests/rustdoc-gui/run-on-hover.goml | 54 +++ tests/rustdoc-gui/rust-logo.goml | 58 +++ .../rustdoc-gui/scrape-examples-button-focus.goml | 29 ++ tests/rustdoc-gui/scrape-examples-color.goml | 60 +++ tests/rustdoc-gui/scrape-examples-fonts.goml | 9 + tests/rustdoc-gui/scrape-examples-layout.goml | 49 +++ tests/rustdoc-gui/scrape-examples-toggle.goml | 51 +++ tests/rustdoc-gui/search-filter.goml | 87 ++++ tests/rustdoc-gui/search-form-elements.goml | 263 ++++++++++++ tests/rustdoc-gui/search-input-mobile.goml | 11 + tests/rustdoc-gui/search-keyboard.goml | 28 ++ tests/rustdoc-gui/search-no-result.goml | 36 ++ tests/rustdoc-gui/search-reexport.goml | 33 ++ tests/rustdoc-gui/search-result-color.goml | 401 +++++++++++++++++ tests/rustdoc-gui/search-result-description.goml | 5 + tests/rustdoc-gui/search-result-display.goml | 78 ++++ tests/rustdoc-gui/search-result-go-to-first.goml | 19 + tests/rustdoc-gui/search-result-keyword.goml | 13 + .../search-tab-change-title-fn-sig.goml | 74 ++++ tests/rustdoc-gui/search-tab.goml | 76 ++++ tests/rustdoc-gui/settings.goml | 200 +++++++++ tests/rustdoc-gui/shortcuts.goml | 31 ++ tests/rustdoc-gui/sidebar-links-color.goml | 171 ++++++++ tests/rustdoc-gui/sidebar-macro-reexport.goml | 5 + tests/rustdoc-gui/sidebar-mobile-scroll.goml | 31 ++ tests/rustdoc-gui/sidebar-mobile.goml | 88 ++++ tests/rustdoc-gui/sidebar-source-code-display.goml | 215 ++++++++++ tests/rustdoc-gui/sidebar-source-code.goml | 90 ++++ tests/rustdoc-gui/sidebar.goml | 151 +++++++ tests/rustdoc-gui/source-anchor-scroll.goml | 20 + tests/rustdoc-gui/source-code-page.goml | 218 ++++++++++ tests/rustdoc-gui/src-font-size.goml | 16 + tests/rustdoc-gui/src/huge_logo/Cargo.lock | 7 + tests/rustdoc-gui/src/huge_logo/Cargo.toml | 8 + tests/rustdoc-gui/src/huge_logo/src/lib.rs | 17 + tests/rustdoc-gui/src/lib2/Cargo.lock | 22 + tests/rustdoc-gui/src/lib2/Cargo.toml | 11 + tests/rustdoc-gui/src/lib2/another_folder/mod.rs | 3 + .../src/lib2/another_folder/sub_mod/mod.rs | 1 + tests/rustdoc-gui/src/lib2/another_mod/mod.rs | 1 + tests/rustdoc-gui/src/lib2/http/Cargo.toml | 7 + tests/rustdoc-gui/src/lib2/http/lib.rs | 1 + tests/rustdoc-gui/src/lib2/implementors/Cargo.lock | 7 + tests/rustdoc-gui/src/lib2/implementors/Cargo.toml | 10 + tests/rustdoc-gui/src/lib2/implementors/lib.rs | 22 + tests/rustdoc-gui/src/lib2/lib.rs | 343 +++++++++++++++ .../rustdoc-gui/src/link_to_definition/Cargo.lock | 7 + .../rustdoc-gui/src/link_to_definition/Cargo.toml | 7 + tests/rustdoc-gui/src/link_to_definition/lib.rs | 35 ++ tests/rustdoc-gui/src/scrape_examples/Cargo.lock | 7 + tests/rustdoc-gui/src/scrape_examples/Cargo.toml | 8 + .../src/scrape_examples/examples/check-many-1.rs | 13 + .../src/scrape_examples/examples/check-many-2.rs | 13 + .../src/scrape_examples/examples/check-many-3.rs | 13 + .../src/scrape_examples/examples/check-many-4.rs | 13 + .../src/scrape_examples/examples/check-many-5.rs | 13 + .../src/scrape_examples/examples/check-many-6.rs | 13 + .../src/scrape_examples/examples/check-many-7.rs | 13 + .../src/scrape_examples/examples/check.rs | 26 ++ tests/rustdoc-gui/src/scrape_examples/src/lib.rs | 9 + tests/rustdoc-gui/src/settings/.cargo/config.toml | 2 + tests/rustdoc-gui/src/settings/Cargo.lock | 7 + tests/rustdoc-gui/src/settings/Cargo.toml | 7 + tests/rustdoc-gui/src/settings/lib.rs | 1 + tests/rustdoc-gui/src/staged_api/Cargo.lock | 7 + tests/rustdoc-gui/src/staged_api/Cargo.toml | 12 + tests/rustdoc-gui/src/staged_api/lib.rs | 12 + tests/rustdoc-gui/src/test_docs/Cargo.lock | 7 + tests/rustdoc-gui/src/test_docs/Cargo.toml | 13 + tests/rustdoc-gui/src/test_docs/build.rs | 15 + tests/rustdoc-gui/src/test_docs/lib.rs | 476 +++++++++++++++++++++ tests/rustdoc-gui/src/test_docs/macros.rs | 4 + tests/rustdoc-gui/stab-badge.goml | 41 ++ tests/rustdoc-gui/struct-fields.goml | 5 + tests/rustdoc-gui/target.goml | 35 ++ tests/rustdoc-gui/theme-change.goml | 67 +++ tests/rustdoc-gui/theme-in-history.goml | 27 ++ tests/rustdoc-gui/toggle-click-deadspace.goml | 15 + tests/rustdoc-gui/toggle-docs-mobile.goml | 33 ++ tests/rustdoc-gui/toggle-docs.goml | 75 ++++ tests/rustdoc-gui/toggle-implementors.goml | 4 + .../rustdoc-gui/toggled-open-implementations.goml | 5 + tests/rustdoc-gui/trait-sidebar-item-order.goml | 13 + tests/rustdoc-gui/type-declation-overflow.goml | 76 ++++ tests/rustdoc-gui/unsafe-fn.goml | 28 ++ tests/rustdoc-gui/where-whitespace.goml | 27 ++ 138 files changed, 6525 insertions(+) create mode 100644 tests/rustdoc-gui/README.md create mode 100644 tests/rustdoc-gui/anchor-navigable.goml create mode 100644 tests/rustdoc-gui/anchors.goml create mode 100644 tests/rustdoc-gui/auto-hide-trait-implementations.goml create mode 100644 tests/rustdoc-gui/basic-code.goml create mode 100644 tests/rustdoc-gui/check-code-blocks-margin.goml create mode 100644 tests/rustdoc-gui/check-stab-in-docblock.goml create mode 100644 tests/rustdoc-gui/check_info_sign_position.goml create mode 100644 tests/rustdoc-gui/code-blocks-overflow.goml create mode 100644 tests/rustdoc-gui/code-color.goml create mode 100644 tests/rustdoc-gui/code-sidebar-toggle.goml create mode 100644 tests/rustdoc-gui/code-tags.goml create mode 100644 tests/rustdoc-gui/codeblock-sub.goml create mode 100644 tests/rustdoc-gui/codeblock-tooltip.goml create mode 100644 tests/rustdoc-gui/cursor.goml create mode 100644 tests/rustdoc-gui/default-settings.goml create mode 100644 tests/rustdoc-gui/docblock-big-code-mobile.goml create mode 100644 tests/rustdoc-gui/docblock-code-block-line-number.goml create mode 100644 tests/rustdoc-gui/docblock-details.goml create mode 100644 tests/rustdoc-gui/docblock-table-overflow.goml create mode 100644 tests/rustdoc-gui/docblock-table.goml create mode 100644 tests/rustdoc-gui/duplicate-macro-reexport.goml create mode 100644 tests/rustdoc-gui/enum-variants.goml create mode 100644 tests/rustdoc-gui/escape-key.goml create mode 100644 tests/rustdoc-gui/font-weight.goml create mode 100644 tests/rustdoc-gui/hash-item-expansion.goml create mode 100644 tests/rustdoc-gui/headers-color.goml create mode 100644 tests/rustdoc-gui/headings.goml create mode 100644 tests/rustdoc-gui/help-page.goml create mode 100644 tests/rustdoc-gui/highlight-colors.goml create mode 100644 tests/rustdoc-gui/huge-collection-of-constants.goml create mode 100644 tests/rustdoc-gui/huge-logo.goml create mode 100644 tests/rustdoc-gui/impl-default-expansion.goml create mode 100644 tests/rustdoc-gui/impl-doc.goml create mode 100644 tests/rustdoc-gui/implementors.goml create mode 100644 tests/rustdoc-gui/item-decl-colors.goml create mode 100644 tests/rustdoc-gui/item-info-alignment.goml create mode 100644 tests/rustdoc-gui/item-info-overflow.goml create mode 100644 tests/rustdoc-gui/item-info.goml create mode 100644 tests/rustdoc-gui/item-summary-table.goml create mode 100644 tests/rustdoc-gui/javascript-disabled.goml create mode 100644 tests/rustdoc-gui/jump-to-def-background.goml create mode 100644 tests/rustdoc-gui/label-next-to-symbol.goml create mode 100644 tests/rustdoc-gui/links-color.goml create mode 100644 tests/rustdoc-gui/list_code_block.goml create mode 100644 tests/rustdoc-gui/method-margins.goml create mode 100644 tests/rustdoc-gui/mobile.goml create mode 100644 tests/rustdoc-gui/module-items-font.goml create mode 100644 tests/rustdoc-gui/no-docblock.goml create mode 100644 tests/rustdoc-gui/notable-trait.goml create mode 100644 tests/rustdoc-gui/overflow-tooltip-information.goml create mode 100644 tests/rustdoc-gui/pocket-menu.goml create mode 100644 tests/rustdoc-gui/run-on-hover.goml create mode 100644 tests/rustdoc-gui/rust-logo.goml create mode 100644 tests/rustdoc-gui/scrape-examples-button-focus.goml create mode 100644 tests/rustdoc-gui/scrape-examples-color.goml create mode 100644 tests/rustdoc-gui/scrape-examples-fonts.goml create mode 100644 tests/rustdoc-gui/scrape-examples-layout.goml create mode 100644 tests/rustdoc-gui/scrape-examples-toggle.goml create mode 100644 tests/rustdoc-gui/search-filter.goml create mode 100644 tests/rustdoc-gui/search-form-elements.goml create mode 100644 tests/rustdoc-gui/search-input-mobile.goml create mode 100644 tests/rustdoc-gui/search-keyboard.goml create mode 100644 tests/rustdoc-gui/search-no-result.goml create mode 100644 tests/rustdoc-gui/search-reexport.goml create mode 100644 tests/rustdoc-gui/search-result-color.goml create mode 100644 tests/rustdoc-gui/search-result-description.goml create mode 100644 tests/rustdoc-gui/search-result-display.goml create mode 100644 tests/rustdoc-gui/search-result-go-to-first.goml create mode 100644 tests/rustdoc-gui/search-result-keyword.goml create mode 100644 tests/rustdoc-gui/search-tab-change-title-fn-sig.goml create mode 100644 tests/rustdoc-gui/search-tab.goml create mode 100644 tests/rustdoc-gui/settings.goml create mode 100644 tests/rustdoc-gui/shortcuts.goml create mode 100644 tests/rustdoc-gui/sidebar-links-color.goml create mode 100644 tests/rustdoc-gui/sidebar-macro-reexport.goml create mode 100644 tests/rustdoc-gui/sidebar-mobile-scroll.goml create mode 100644 tests/rustdoc-gui/sidebar-mobile.goml create mode 100644 tests/rustdoc-gui/sidebar-source-code-display.goml create mode 100644 tests/rustdoc-gui/sidebar-source-code.goml create mode 100644 tests/rustdoc-gui/sidebar.goml create mode 100644 tests/rustdoc-gui/source-anchor-scroll.goml create mode 100644 tests/rustdoc-gui/source-code-page.goml create mode 100644 tests/rustdoc-gui/src-font-size.goml create mode 100644 tests/rustdoc-gui/src/huge_logo/Cargo.lock create mode 100644 tests/rustdoc-gui/src/huge_logo/Cargo.toml create mode 100644 tests/rustdoc-gui/src/huge_logo/src/lib.rs create mode 100644 tests/rustdoc-gui/src/lib2/Cargo.lock create mode 100644 tests/rustdoc-gui/src/lib2/Cargo.toml create mode 100644 tests/rustdoc-gui/src/lib2/another_folder/mod.rs create mode 100644 tests/rustdoc-gui/src/lib2/another_folder/sub_mod/mod.rs create mode 100644 tests/rustdoc-gui/src/lib2/another_mod/mod.rs create mode 100644 tests/rustdoc-gui/src/lib2/http/Cargo.toml create mode 100644 tests/rustdoc-gui/src/lib2/http/lib.rs create mode 100644 tests/rustdoc-gui/src/lib2/implementors/Cargo.lock create mode 100644 tests/rustdoc-gui/src/lib2/implementors/Cargo.toml create mode 100644 tests/rustdoc-gui/src/lib2/implementors/lib.rs create mode 100644 tests/rustdoc-gui/src/lib2/lib.rs create mode 100644 tests/rustdoc-gui/src/link_to_definition/Cargo.lock create mode 100644 tests/rustdoc-gui/src/link_to_definition/Cargo.toml create mode 100644 tests/rustdoc-gui/src/link_to_definition/lib.rs create mode 100644 tests/rustdoc-gui/src/scrape_examples/Cargo.lock create mode 100644 tests/rustdoc-gui/src/scrape_examples/Cargo.toml create mode 100644 tests/rustdoc-gui/src/scrape_examples/examples/check-many-1.rs create mode 100644 tests/rustdoc-gui/src/scrape_examples/examples/check-many-2.rs create mode 100644 tests/rustdoc-gui/src/scrape_examples/examples/check-many-3.rs create mode 100644 tests/rustdoc-gui/src/scrape_examples/examples/check-many-4.rs create mode 100644 tests/rustdoc-gui/src/scrape_examples/examples/check-many-5.rs create mode 100644 tests/rustdoc-gui/src/scrape_examples/examples/check-many-6.rs create mode 100644 tests/rustdoc-gui/src/scrape_examples/examples/check-many-7.rs create mode 100644 tests/rustdoc-gui/src/scrape_examples/examples/check.rs create mode 100644 tests/rustdoc-gui/src/scrape_examples/src/lib.rs create mode 100644 tests/rustdoc-gui/src/settings/.cargo/config.toml create mode 100644 tests/rustdoc-gui/src/settings/Cargo.lock create mode 100644 tests/rustdoc-gui/src/settings/Cargo.toml create mode 100644 tests/rustdoc-gui/src/settings/lib.rs create mode 100644 tests/rustdoc-gui/src/staged_api/Cargo.lock create mode 100644 tests/rustdoc-gui/src/staged_api/Cargo.toml create mode 100644 tests/rustdoc-gui/src/staged_api/lib.rs create mode 100644 tests/rustdoc-gui/src/test_docs/Cargo.lock create mode 100644 tests/rustdoc-gui/src/test_docs/Cargo.toml create mode 100644 tests/rustdoc-gui/src/test_docs/build.rs create mode 100644 tests/rustdoc-gui/src/test_docs/lib.rs create mode 100644 tests/rustdoc-gui/src/test_docs/macros.rs create mode 100644 tests/rustdoc-gui/stab-badge.goml create mode 100644 tests/rustdoc-gui/struct-fields.goml create mode 100644 tests/rustdoc-gui/target.goml create mode 100644 tests/rustdoc-gui/theme-change.goml create mode 100644 tests/rustdoc-gui/theme-in-history.goml create mode 100644 tests/rustdoc-gui/toggle-click-deadspace.goml create mode 100644 tests/rustdoc-gui/toggle-docs-mobile.goml create mode 100644 tests/rustdoc-gui/toggle-docs.goml create mode 100644 tests/rustdoc-gui/toggle-implementors.goml create mode 100644 tests/rustdoc-gui/toggled-open-implementations.goml create mode 100644 tests/rustdoc-gui/trait-sidebar-item-order.goml create mode 100644 tests/rustdoc-gui/type-declation-overflow.goml create mode 100644 tests/rustdoc-gui/unsafe-fn.goml create mode 100644 tests/rustdoc-gui/where-whitespace.goml (limited to 'tests/rustdoc-gui') diff --git a/tests/rustdoc-gui/README.md b/tests/rustdoc-gui/README.md new file mode 100644 index 00000000000..d9854e2e715 --- /dev/null +++ b/tests/rustdoc-gui/README.md @@ -0,0 +1,34 @@ +The tests present here are used to test the generated HTML from rustdoc. The +goal is to prevent unsound/unexpected GUI changes. + +This is using the [browser-ui-test] framework to do so. It works as follows: + +It wraps [puppeteer] to send commands to a web browser in order to navigate and +test what's being currently displayed in the web page. + +You can find more information and its documentation in its [repository][browser-ui-test]. + +If you need to have more information on the tests run, you can use `--test-args`: + +```bash +$ ./x.py test src/test/rustdoc-gui --stage 1 --test-args --debug +``` + +If you don't want to run in headless mode (helpful to debug sometimes), you can use +`--no-headless`: + +```bash +$ ./x.py test src/test/rustdoc-gui --stage 1 --test-args --no-headless +``` + +To see the supported options, use `--help`. + +Important to be noted: if the chromium instance crashes when you run it, you might need to +use `--no-sandbox` to make it work: + +```bash +$ ./x.py test src/test/rustdoc-gui --stage 1 --test-args --no-sandbox +``` + +[browser-ui-test]: https://github.com/GuillaumeGomez/browser-UI-test/ +[puppeteer]: https://pptr.dev/ diff --git a/tests/rustdoc-gui/anchor-navigable.goml b/tests/rustdoc-gui/anchor-navigable.goml new file mode 100644 index 00000000000..9d5c55a1e1d --- /dev/null +++ b/tests/rustdoc-gui/anchor-navigable.goml @@ -0,0 +1,11 @@ +// The `impl Foo` heading underneath `Implementations` has a § +// anchor to its left (used for linking to that heading). The anchor only shows +// up when hovering the `impl Foo`. This test ensures there's no gap between the +// anchor and the `impl Foo`. If there were a gap, this would cause an annoying +// problem: you hover `impl Foo` to see the anchor, then when you move your +// mouse to the left, the anchor disappears before you reach it. +goto: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html" +// We check that ".item-info" is bigger than its content. +move-cursor-to: ".impl" +assert-property: (".impl > a.anchor", {"offsetWidth": "8"}) +assert-css: (".impl > a.anchor", {"left": "-8px"}) diff --git a/tests/rustdoc-gui/anchors.goml b/tests/rustdoc-gui/anchors.goml new file mode 100644 index 00000000000..c9b53a1a0f7 --- /dev/null +++ b/tests/rustdoc-gui/anchors.goml @@ -0,0 +1,109 @@ +// This test is to ensure that the anchors (`§`) have the expected color and position. + +define-function: ( + "check-colors", + (theme, main_color, title_color, fqn_color, fqn_type_color, src_link_color, sidebar_link_color), + block { + goto: "file://" + |DOC_PATH| + "/staged_api/struct.Foo.html" + // This is needed to ensure that the text color is computed. + show-text: true + + // Setting the theme. + local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"} + // We reload the page so the local storage settings are being used. + reload: + + assert-css: ("#toggle-all-docs", {"color": |main_color|}) + assert-css: (".fqn a:nth-of-type(1)", {"color": |fqn_color|}) + assert-css: (".fqn a:nth-of-type(2)", {"color": |fqn_type_color|}) + assert-css: ( + ".rightside .srclink", + {"color": |src_link_color|, "text-decoration": "none solid " + |src_link_color|}, + ALL, + ) + compare-elements-css: ( + ".rightside .srclink", + ".rightside.srclink", + ["color", "text-decoration"], + ) + compare-elements-css: ( + ".main-heading .srclink", + ".rightside.srclink", + ["color", "text-decoration"], + ) + + move-cursor-to: ".main-heading .srclink" + assert-css: ( + ".main-heading .srclink", + {"color": |src_link_color|, "text-decoration": "underline solid " + |src_link_color|}, + ) + move-cursor-to: ".impl-items .rightside .srclink" + assert-css: ( + ".impl-items .rightside .srclink", + {"color": |src_link_color|, "text-decoration": "none solid " + |src_link_color|}, + ) + move-cursor-to: ".impl-items .rightside.srclink" + assert-css: ( + ".impl-items .rightside.srclink", + {"color": |src_link_color|, "text-decoration": "none solid " + |src_link_color|}, + ) + + goto: "file://" + |DOC_PATH| + "/test_docs/struct.HeavilyDocumentedStruct.html" + // Since we changed page, we need to set the theme again. + local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"} + // We reload the page so the local storage settings are being used. + reload: + + assert-css: ("#top-doc-prose-title", {"color": |title_color|}) + + assert-css: (".sidebar a", {"color": |sidebar_link_color|}) + assert-css: ("h1.fqn a", {"color": |title_color|}) + + // We move the cursor over the "Implementations" title so the anchor is displayed. + move-cursor-to: "h2#implementations" + assert-css: ("h2#implementations a.anchor", {"color": |main_color|}) + + // Same thing with the impl block title. + move-cursor-to: "#impl-HeavilyDocumentedStruct" + assert-css: ("#impl-HeavilyDocumentedStruct a.anchor", {"color": |main_color|}) + + assert-css: ("#title-for-struct-impl-item-doc", {"margin-left": "0px"}) + }, +) + +call-function: ( + "check-colors", + { + "theme": "ayu", + "main_color": "rgb(197, 197, 197)", + "title_color": "rgb(255, 255, 255)", + "fqn_color": "rgb(255, 255, 255)", + "fqn_type_color": "rgb(255, 160, 165)", + "src_link_color": "rgb(57, 175, 215)", + "sidebar_link_color": "rgb(83, 177, 219)", + }, +) +call-function: ( + "check-colors", + { + "theme": "dark", + "main_color": "rgb(221, 221, 221)", + "title_color": "rgb(221, 221, 221)", + "fqn_color": "rgb(221, 221, 221)", + "fqn_type_color": "rgb(45, 191, 184)", + "src_link_color": "rgb(210, 153, 29)", + "sidebar_link_color": "rgb(253, 191, 53)", + }, +) +call-function: ( + "check-colors", + { + "theme": "light", + "main_color": "rgb(0, 0, 0)", + "title_color": "rgb(0, 0, 0)", + "fqn_color": "rgb(0, 0, 0)", + "fqn_type_color": "rgb(173, 55, 138)", + "src_link_color": "rgb(56, 115, 173)", + "sidebar_link_color": "rgb(53, 109, 164)", + }, +) diff --git a/tests/rustdoc-gui/auto-hide-trait-implementations.goml b/tests/rustdoc-gui/auto-hide-trait-implementations.goml new file mode 100644 index 00000000000..0a619c3524a --- /dev/null +++ b/tests/rustdoc-gui/auto-hide-trait-implementations.goml @@ -0,0 +1,13 @@ +// Checks that the setting "auto hide trait implementations" is working as expected. +goto: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html" + +// By default, the trait implementations are not collapsed. +assert-attribute: ("#trait-implementations-list > details", {"open": ""}, ALL) + +// We now set the setting to auto hide all trait implementations. +local-storage: {"rustdoc-auto-hide-trait-implementations": "true" } +// We reload to ensure the trait implementations are collapsed as expected. +reload: + +// We now check that all matching elements don't have the open attributes. +assert-attribute-false: ("#trait-implementations-list > details", {"open": ""}, ALL) diff --git a/tests/rustdoc-gui/basic-code.goml b/tests/rustdoc-gui/basic-code.goml new file mode 100644 index 00000000000..108cf8abcb5 --- /dev/null +++ b/tests/rustdoc-gui/basic-code.goml @@ -0,0 +1,4 @@ +goto: "file://" + |DOC_PATH| + "/test_docs/index.html" +click: ".srclink" +wait-for: ".src-line-numbers" +assert-count: (".src-line-numbers", 1) diff --git a/tests/rustdoc-gui/check-code-blocks-margin.goml b/tests/rustdoc-gui/check-code-blocks-margin.goml new file mode 100644 index 00000000000..c2cec00204d --- /dev/null +++ b/tests/rustdoc-gui/check-code-blocks-margin.goml @@ -0,0 +1,6 @@ +// This test ensures that the docblock elements have the appropriate left margin. +goto: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html" +// The top docblock elements shouldn't have left margin... +assert-css: ("#main-content .item-decl", {"margin-left": "0px"}) +// ... but all the others should! +assert-css: ("#main-content .docblock", {"margin-left": "24px"}) diff --git a/tests/rustdoc-gui/check-stab-in-docblock.goml b/tests/rustdoc-gui/check-stab-in-docblock.goml new file mode 100644 index 00000000000..266fa999728 --- /dev/null +++ b/tests/rustdoc-gui/check-stab-in-docblock.goml @@ -0,0 +1,27 @@ +// This test checks that using `.stab` attributes in `.docblock` elements doesn't +// create scrollable paragraphs. +goto: "file://" + |DOC_PATH| + "/test_docs/index.html" +// Needs the text to be display to check for scrollable content. +show-text: true +size: (786, 600) +// Confirms that there 3 paragraphs. +assert-count: (".top-doc .docblock p", 3) +// Checking that there is no scrollable content. +store-property: (clientHeight, ".top-doc .docblock p:nth-of-type(1)", "clientHeight") +store-property: (clientWidth, ".top-doc .docblock p:nth-of-type(1)", "clientWidth") +assert-property: ( + ".top-doc .docblock p:nth-of-type(1)", + {"scrollHeight": |clientHeight|, "scrollWidth": |clientWidth|}, +) +store-property: (clientHeight, ".top-doc .docblock p:nth-of-type(2)", "clientHeight") +store-property: (clientWidth, ".top-doc .docblock p:nth-of-type(2)", "clientWidth") +assert-property: ( + ".top-doc .docblock p:nth-of-type(2)", + {"scrollHeight": |clientHeight|, "scrollWidth": |clientWidth|}, +) +store-property: (clientHeight, ".top-doc .docblock p:nth-of-type(3)", "clientHeight") +store-property: (clientWidth, ".top-doc .docblock p:nth-of-type(3)", "clientWidth") +assert-property: ( + ".top-doc .docblock p:nth-of-type(3)", + {"scrollHeight": |clientHeight|, "scrollWidth": |clientWidth|}, +) diff --git a/tests/rustdoc-gui/check_info_sign_position.goml b/tests/rustdoc-gui/check_info_sign_position.goml new file mode 100644 index 00000000000..f36e73fc5e9 --- /dev/null +++ b/tests/rustdoc-gui/check_info_sign_position.goml @@ -0,0 +1,11 @@ +// This test checks the position of the information on the code blocks (like +// `compile_fail` or `ignore`). +goto: "file://" + |DOC_PATH| + "/test_docs/index.html" +goto: "./fn.check_list_code_block.html" +// If the codeblock is the first element of the docblock, the information tooltip must have +// have some top margin to avoid going over the toggle (the "[+]"). +assert-css: (".docblock > .example-wrap.compile_fail .tooltip", { "margin-top": "16px" }) +// Checks that the other codeblocks don't have this top margin. +assert-css: ("ol > li > .example-wrap.compile_fail .tooltip", { "margin-top": "0px" }) +assert-css: ("ol > li > .example-wrap.ignore .tooltip", { "margin-top": "0px" }) +assert-css: (".docblock > .example-wrap.ignore .tooltip", { "margin-top": "0px" }) diff --git a/tests/rustdoc-gui/code-blocks-overflow.goml b/tests/rustdoc-gui/code-blocks-overflow.goml new file mode 100644 index 00000000000..fbf0e890bdc --- /dev/null +++ b/tests/rustdoc-gui/code-blocks-overflow.goml @@ -0,0 +1,8 @@ +// This test ensures that codeblocks content don't overflow. +goto: "file://" + |DOC_PATH| + "/lib2/sub_mod/struct.Foo.html" +size: (1080, 600) +// There should be two codeblocks: a rust one and a non-rust one. +assert-count: (".docblock > .example-wrap", 2) +assert: ".docblock > .example-wrap > .language-txt" +assert: ".docblock > .example-wrap > .rust-example-rendered" +assert-css: (".docblock > .example-wrap > pre", {"width": "796px", "overflow-x": "auto"}, ALL) diff --git a/tests/rustdoc-gui/code-color.goml b/tests/rustdoc-gui/code-color.goml new file mode 100644 index 00000000000..cb550a4573a --- /dev/null +++ b/tests/rustdoc-gui/code-color.goml @@ -0,0 +1,24 @@ +// The ayu theme has a different color for the "" tags in the doc blocks. We need to +// check that the rule isn't applied on other "" elements. +// +// While we're at it, we also check it for the other themes. +goto: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html" +// If the text isn't displayed, the browser doesn't compute color style correctly... +show-text: true + +define-function: ( + "check-colors", + (theme, doc_code_color, doc_inline_code_color), + block { + // Set the theme. + local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"} + // We reload the page so the local storage settings are being used. + reload: + assert-css: (".docblock pre > code", {"color": |doc_code_color|}, ALL) + assert-css: (".docblock > p > code", {"color": |doc_inline_code_color|}, ALL) + }, +) + +call-function: ("check-colors", ("ayu", "rgb(230, 225, 207)", "rgb(255, 180, 84)")) +call-function: ("check-colors", ("dark", "rgb(221, 221, 221)", "rgb(221, 221, 221)")) +call-function: ("check-colors", ("light", "rgb(0, 0, 0)", "rgb(0, 0, 0)")) diff --git a/tests/rustdoc-gui/code-sidebar-toggle.goml b/tests/rustdoc-gui/code-sidebar-toggle.goml new file mode 100644 index 00000000000..df665bd46c0 --- /dev/null +++ b/tests/rustdoc-gui/code-sidebar-toggle.goml @@ -0,0 +1,7 @@ +// This test checks that the source code pages sidebar toggle is working as expected. +goto: "file://" + |DOC_PATH| + "/test_docs/index.html" +click: ".srclink" +wait-for: "#src-sidebar-toggle" +click: "#src-sidebar-toggle" +fail: true +assert-css: ("#source-sidebar", { "left": "-300px" }) diff --git a/tests/rustdoc-gui/code-tags.goml b/tests/rustdoc-gui/code-tags.goml new file mode 100644 index 00000000000..94c1a6525aa --- /dev/null +++ b/tests/rustdoc-gui/code-tags.goml @@ -0,0 +1,24 @@ +// This test ensures that items and documentation code blocks are wrapped in 

+
+// We need to disable this check because `implementors/test_docs/trait.AnotherOne.js`
+// doesn't exist.
+fail-on-request-error: false
+goto: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html"
+size: (1080, 600)
+// There should be four doc codeblocks.
+// Check that their content is inside 

+assert-count: (".example-wrap pre > code", 4)
+// Check that function signature is inside 

+assert: "pre.rust.fn > code"
+
+goto: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html"
+assert: "pre.rust.struct > code"
+
+goto: "file://" + |DOC_PATH| + "/test_docs/enum.AnEnum.html"
+assert: "pre.rust.enum > code"
+
+goto: "file://" + |DOC_PATH| + "/test_docs/trait.AnotherOne.html"
+assert: "pre.rust.trait > code"
+
+goto: "file://" + |DOC_PATH| + "/test_docs/type.SomeType.html"
+assert: "pre.rust.typedef > code"
diff --git a/tests/rustdoc-gui/codeblock-sub.goml b/tests/rustdoc-gui/codeblock-sub.goml
new file mode 100644
index 00000000000..cbd314d2791
--- /dev/null
+++ b/tests/rustdoc-gui/codeblock-sub.goml
@@ -0,0 +1,5 @@
+// Test that code blocks nested within  do not have a line height of 0.
+goto: "file://" + |DOC_PATH| + "/test_docs/codeblock_sub/index.html"
+
+store-property: (codeblock_sub_1, "#codeblock-sub-1", "offsetHeight")
+assert-property-false: ("#codeblock-sub-3", { "offsetHeight": |codeblock_sub_1| })
diff --git a/tests/rustdoc-gui/codeblock-tooltip.goml b/tests/rustdoc-gui/codeblock-tooltip.goml
new file mode 100644
index 00000000000..a3ef4e77b54
--- /dev/null
+++ b/tests/rustdoc-gui/codeblock-tooltip.goml
@@ -0,0 +1,149 @@
+// Checking the colors of the codeblocks tooltips.
+goto: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html"
+show-text: true
+
+define-function: (
+    "check-colors",
+    (theme, background, color, border),
+    block {
+        // Setting the theme.
+        local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
+        reload:
+
+        // compile_fail block
+        assert-css: (
+            ".docblock .example-wrap.compile_fail .tooltip",
+            {"color": "rgba(255, 0, 0, 0.5)"},
+        )
+        assert-css: (
+            ".docblock .example-wrap.compile_fail",
+            {"border-left": "2px solid rgba(255, 0, 0, 0.5)"},
+        )
+
+        move-cursor-to: ".docblock .example-wrap.compile_fail .tooltip"
+
+        assert-css: (
+            ".docblock .example-wrap.compile_fail .tooltip",
+            {"color": "rgb(255, 0, 0)"},
+        )
+        assert-css: (
+            ".docblock .example-wrap.compile_fail",
+            {"border-left": "2px solid rgb(255, 0, 0)"},
+        )
+        assert-css: (
+            ".docblock .example-wrap.compile_fail .tooltip::after",
+            {
+                "content": '"This example deliberately fails to compile"',
+                "padding": "5px 3px 3px",
+                "background-color": |background|,
+                "color": |color|,
+                "border": "1px solid " + |border|,
+            },
+        )
+        assert-css: (
+            ".docblock .example-wrap.compile_fail .tooltip::before",
+            {
+                "border-width": "5px",
+                "border-style": "solid",
+                "border-color": "rgba(0, 0, 0, 0) " + |background| + " rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)",
+            },
+        )
+
+        // should_panic block
+        assert-css: (
+            ".docblock .example-wrap.should_panic .tooltip",
+            {"color": "rgba(255, 0, 0, 0.5)"},
+        )
+        assert-css: (
+            ".docblock .example-wrap.should_panic",
+            {"border-left": "2px solid rgba(255, 0, 0, 0.5)"},
+        )
+
+        move-cursor-to: ".docblock .example-wrap.should_panic .tooltip"
+
+        assert-css: (
+            ".docblock .example-wrap.should_panic .tooltip",
+            {"color": "rgb(255, 0, 0)"},
+        )
+        assert-css: (
+            ".docblock .example-wrap.should_panic",
+            {"border-left": "2px solid rgb(255, 0, 0)"},
+        )
+        assert-css: (
+            ".docblock .example-wrap.should_panic .tooltip::after",
+            {
+                "content": '"This example panics"',
+                "padding": "5px 3px 3px",
+                "background-color": |background|,
+                "color": |color|,
+                "border": "1px solid " + |border|,
+            },
+        )
+        assert-css: (
+            ".docblock .example-wrap.should_panic .tooltip::before",
+            {
+                "border-width": "5px",
+                "border-style": "solid",
+                "border-color": "rgba(0, 0, 0, 0) " + |background| + " rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)",
+            },
+        )
+
+        // ignore block
+        assert-css: (
+            ".docblock .example-wrap.ignore .tooltip",
+            {"color": "rgba(255, 142, 0, 0.6)"},
+        )
+        assert-css: (
+            ".docblock .example-wrap.ignore",
+            {"border-left": "2px solid rgba(255, 142, 0, 0.6)"},
+        )
+
+        move-cursor-to: ".docblock .example-wrap.ignore .tooltip"
+
+        assert-css: (
+            ".docblock .example-wrap.ignore .tooltip",
+            {"color": "rgb(255, 142, 0)"},
+        )
+        assert-css: (
+            ".docblock .example-wrap.ignore",
+            {"border-left": "2px solid rgb(255, 142, 0)"},
+        )
+        assert-css: (
+            ".docblock .example-wrap.ignore .tooltip::after",
+            {
+                "content": '"This example is not tested"',
+                "padding": "5px 3px 3px",
+                "background-color": |background|,
+                "color": |color|,
+                "border": "1px solid " + |border|,
+            },
+        )
+        assert-css: (
+            ".docblock .example-wrap.ignore .tooltip::before",
+            {
+                "border-width": "5px",
+                "border-style": "solid",
+                "border-color": "rgba(0, 0, 0, 0) " + |background| + " rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)",
+            },
+        )
+    },
+)
+
+call-function: ("check-colors", {
+    "theme": "ayu",
+    "background": "rgb(49, 69, 89)",
+    "color": "rgb(197, 197, 197)",
+    "border": "rgb(92, 103, 115)",
+})
+call-function: ("check-colors", {
+    "theme": "dark",
+    "background": "rgb(0, 0, 0)",
+    "color": "rgb(255, 255, 255)",
+    "border": "rgb(224, 224, 224)",
+})
+call-function: ("check-colors", {
+    "theme": "light",
+    "background": "rgb(0, 0, 0)",
+    "color": "rgb(255, 255, 255)",
+    "border": "rgb(224, 224, 224)",
+})
diff --git a/tests/rustdoc-gui/cursor.goml b/tests/rustdoc-gui/cursor.goml
new file mode 100644
index 00000000000..59b1397970b
--- /dev/null
+++ b/tests/rustdoc-gui/cursor.goml
@@ -0,0 +1,24 @@
+// This test ensures that several clickable items actually have the pointer cursor.
+goto: "file://" + |DOC_PATH| + "/lib2/struct.Foo.html"
+
+// the `[+]/[-]` button
+assert-css: ("#toggle-all-docs", {"cursor": "pointer"})
+
+// the button next to the path header
+assert-css: ("#copy-path", {"cursor": "pointer"})
+
+// the search tabs
+write: (".search-input", "Foo")
+// To be SURE that the search will be run.
+press-key: 'Enter'
+// Waiting for the search results to appear...
+wait-for: "#search-tabs"
+assert-css: ("#search-tabs > button", {"cursor": "pointer"})
+
+// mobile sidebar toggle button
+size: (500, 700)
+assert-css: (".sidebar-menu-toggle", {"cursor": "pointer"})
+
+// the sidebar toggle button on the source code pages
+goto: "file://" + |DOC_PATH| + "/src/lib2/lib.rs.html"
+assert-css: ("#src-sidebar-toggle > button", {"cursor": "pointer"})
diff --git a/tests/rustdoc-gui/default-settings.goml b/tests/rustdoc-gui/default-settings.goml
new file mode 100644
index 00000000000..ab27b001eb6
--- /dev/null
+++ b/tests/rustdoc-gui/default-settings.goml
@@ -0,0 +1,8 @@
+// This test ensures that the default settings are correctly applied.
+//
+// The "settings" crate uses "ayu" as default setting, which is what we will
+// check.
+goto: "file://" + |DOC_PATH| + "/settings/index.html"
+// Wait a bit to be sure the default theme is applied.
+// If the theme isn't applied, the command will time out.
+wait-for-css: ("body", {"background-color": "rgb(15, 20, 25)"})
diff --git a/tests/rustdoc-gui/docblock-big-code-mobile.goml b/tests/rustdoc-gui/docblock-big-code-mobile.goml
new file mode 100644
index 00000000000..3ce921c2c91
--- /dev/null
+++ b/tests/rustdoc-gui/docblock-big-code-mobile.goml
@@ -0,0 +1,13 @@
+// If we have a long ``, we need to ensure that it'll be fully displayed on mobile, meaning
+// that it'll be on two lines.
+emulate: "iPhone 8" // it has the following size: (375, 667)
+goto: "file://" + |DOC_PATH| + "/test_docs/long_code_block/index.html"
+// We now check that the block is on two lines:
+show-text: true // We need to enable text draw to be able to have the "real" size
+// Little explanations for this test: if the text wasn't displayed on two lines, it would take
+// around 20px (which is the font size).
+assert-property: (".docblock p > code", {"offsetHeight": "44"})
+
+// Same check, but where the long code block is also a link
+goto: "file://" + |DOC_PATH| + "/test_docs/long_code_block_link/index.html"
+assert-property: (".docblock p > a > code", {"offsetHeight": "44"})
diff --git a/tests/rustdoc-gui/docblock-code-block-line-number.goml b/tests/rustdoc-gui/docblock-code-block-line-number.goml
new file mode 100644
index 00000000000..69bcf5339ef
--- /dev/null
+++ b/tests/rustdoc-gui/docblock-code-block-line-number.goml
@@ -0,0 +1,71 @@
+// Checks that the setting "line numbers" is working as expected.
+goto: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html"
+
+// Otherwise, we can't check text color
+show-text: true
+
+// We check that without this setting, there is no line number displayed.
+assert-false: "pre.example-line-numbers"
+
+// Let's now check some CSS properties...
+define-function: (
+    "check-colors",
+    (theme, color),
+    block {
+        // We now set the setting to show the line numbers on code examples.
+        local-storage: {
+            "rustdoc-theme": |theme|,
+            "rustdoc-use-system-theme": "false",
+            "rustdoc-line-numbers": "true"
+        }
+        // We reload to make the line numbers appear and change theme.
+        reload:
+        // We wait for them to be added into the DOM by the JS...
+        wait-for: "pre.example-line-numbers"
+        // If the test didn't fail, it means that it was found!
+        assert-css: (
+            "pre.example-line-numbers",
+            {
+                "color": |color|,
+                "margin": "0px",
+                "padding": "14px 8px",
+                "text-align": "right",
+            },
+            ALL,
+        )
+    },
+)
+call-function: ("check-colors", {
+    "theme": "ayu",
+    "color": "rgb(92, 103, 115)",
+})
+call-function: ("check-colors", {
+    "theme": "dark",
+    "color": "rgb(59, 145, 226)",
+})
+call-function: ("check-colors", {
+    "theme": "light",
+    "color": "rgb(198, 126, 45)",
+})
+
+// The first code block has two lines so let's check its `
` elements lists both of them.
+assert-text: ("pre.example-line-numbers", "1\n2")
+
+// Now, try changing the setting dynamically. We'll turn it off, using the settings menu,
+// and make sure it goes away.
+
+// First, open the settings menu.
+click: "#settings-menu"
+wait-for: "#settings"
+assert-css: ("#settings", {"display": "block"})
+
+// Then, click the toggle button.
+click: "input#line-numbers"
+wait-for: 100 // wait-for-false does not exist
+assert-false: "pre.example-line-numbers"
+assert-local-storage: {"rustdoc-line-numbers": "false" }
+
+// Finally, turn it on again.
+click: "input#line-numbers"
+wait-for: "pre.example-line-numbers"
+assert-local-storage: {"rustdoc-line-numbers": "true" }
diff --git a/tests/rustdoc-gui/docblock-details.goml b/tests/rustdoc-gui/docblock-details.goml
new file mode 100644
index 00000000000..9ae571efbb5
--- /dev/null
+++ b/tests/rustdoc-gui/docblock-details.goml
@@ -0,0 +1,34 @@
+// This ensures that the `
`/`` elements are displayed as expected.
+goto: "file://" + |DOC_PATH| + "/test_docs/details/struct.Details.html"
+show-text: true
+local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
+reload:
+
+// We first check that the headers in the `.top-doc` doc block still have their
+// bottom border.
+assert-text: (".top-doc .docblock > h3", "Hello")
+assert-css: (
+    ".top-doc .docblock > h3",
+    {"border-bottom": "1px solid rgb(210, 210, 210)"},
+)
+// We now check that the `` doesn't have a bottom border and has the correct display.
+assert-css: (
+    ".top-doc .docblock summary h4",
+    {"border-bottom-width": "0px"},
+)
+// This allows to ensure that summary is on one line only!
+assert-property: (".top-doc .docblock summary h4", {"offsetHeight": "33"})
+assert-css: (".top-doc .docblock summary h4", {"margin-top": "15px", "margin-bottom": "5px"})
+// So `33 + 15 + 5` == `53`
+assert-property: (".top-doc .docblock summary", {"offsetHeight": "53"})
+
+// We now check the `` on a method.
+assert-css: (
+    ".method-toggle .docblock summary h4",
+    {"border-bottom-width": "0px"},
+)
+// This allows to ensure that summary is on one line only!
+assert-property: (".method-toggle .docblock summary h4", {"offsetHeight": "30"})
+assert-css: (".method-toggle .docblock summary h4", {"margin-top": "15px", "margin-bottom": "5px"})
+// So `30 + 15 + 5` == `50`
+assert-property: (".method-toggle .docblock summary", {"offsetHeight": "50"})
diff --git a/tests/rustdoc-gui/docblock-table-overflow.goml b/tests/rustdoc-gui/docblock-table-overflow.goml
new file mode 100644
index 00000000000..d8670089ad8
--- /dev/null
+++ b/tests/rustdoc-gui/docblock-table-overflow.goml
@@ -0,0 +1,21 @@
+// This test ensures that the type declaration content overflow is handled inside the 
 directly.
+goto: "file://" + |DOC_PATH| + "/lib2/long_table/struct.Foo.html"
+// We set a fixed size so there is no chance of "random" resize.
+size: (1100, 800)
+// Logically, the ".docblock" and the "
" should have the same scroll width.
+compare-elements-property: (".top-doc .docblock", ".top-doc .docblock > p", ["scrollWidth"])
+assert-property: (".top-doc .docblock", {"scrollWidth": "816"})
+// However, since there is overflow in the , its scroll width is bigger.
+assert-property: (".top-doc .docblock table", {"scrollWidth": "1572"})
+
+// Checking it works on other doc blocks as well...
+
+// Logically, the ".docblock" and the "
" should have the same scroll width.
+compare-elements-property: (
+    "#implementations-list > details .docblock",
+    "#implementations-list > details .docblock > p",
+    ["scrollWidth"],
+)
+assert-property: ("#implementations-list > details .docblock", {"scrollWidth": "816"})
+// However, since there is overflow in the 
, its scroll width is bigger.
+assert-property: ("#implementations-list > details .docblock table", {"scrollWidth": "1572"})
diff --git a/tests/rustdoc-gui/docblock-table.goml b/tests/rustdoc-gui/docblock-table.goml
new file mode 100644
index 00000000000..3dcb8abd415
--- /dev/null
+++ b/tests/rustdoc-gui/docblock-table.goml
@@ -0,0 +1,52 @@
+// This test checks the appearance of the tables in the doc comments.
+goto: "file://" + |DOC_PATH| + "/test_docs/doc_block_table/struct.DocBlockTable.html#method.func"
+
+compare-elements-css: (".impl-items .docblock table th", ".top-doc .docblock table th", ["border"])
+compare-elements-css: (".impl-items .docblock table td", ".top-doc .docblock table td", ["border"])
+
+define-function: (
+    "check-colors",
+    (theme, border_color, zebra_stripe_color),
+    block {
+        local-storage: {"rustdoc-use-system-theme": "false", "rustdoc-theme": |theme|}
+        reload:
+        assert-css: (".top-doc .docblock table tbody tr:nth-child(1)", {
+            "background-color": "rgba(0, 0, 0, 0)",
+        })
+        assert-css: (".top-doc .docblock table tbody tr:nth-child(2)", {
+            "background-color": |zebra_stripe_color|,
+        })
+        assert-css: (".top-doc .docblock table tbody tr:nth-child(3)", {
+            "background-color": "rgba(0, 0, 0, 0)",
+        })
+        assert-css: (".top-doc .docblock table tbody tr:nth-child(4)", {
+            "background-color": |zebra_stripe_color|,
+        })
+        assert-css: (".top-doc .docblock table td", {
+            "border-style": "solid",
+            "border-width": "1px",
+            "border-color": |border_color|,
+        })
+        assert-css: (".top-doc .docblock table th", {
+            "border-style": "solid",
+            "border-width": "1px",
+            "border-color": |border_color|,
+        })
+    }
+)
+
+call-function: ("check-colors", {
+    "theme": "dark",
+    "border_color": "rgb(224, 224, 224)",
+    "zebra_stripe_color": "rgb(42, 42, 42)",
+})
+call-function: ("check-colors", {
+    "theme": "ayu",
+    "border_color": "rgb(92, 103, 115)",
+    "zebra_stripe_color": "rgb(25, 31, 38)",
+})
+call-function: ("check-colors", {
+    "theme": "light",
+    "border_color": "rgb(224, 224, 224)",
+    "zebra_stripe_color": "rgb(245, 245, 245)",
+})
diff --git a/tests/rustdoc-gui/duplicate-macro-reexport.goml b/tests/rustdoc-gui/duplicate-macro-reexport.goml
new file mode 100644
index 00000000000..496203c128e
--- /dev/null
+++ b/tests/rustdoc-gui/duplicate-macro-reexport.goml
@@ -0,0 +1,14 @@
+// This test ensures that there is no macro duplicates in the sidebar.
+goto: "file://" + |DOC_PATH| + "/test_docs/macro.a.html"
+// Waiting for the elements in the sidebar to be rendered.
+wait-for: ".sidebar-elems .macro"
+// Check there is only one macro named "a" listed in the sidebar.
+assert-count: (
+    "//*[@class='sidebar-elems']//*[@class='block macro']//li/a[text()='a']",
+    1,
+)
+// Check there is only one macro named "b" listed in the sidebar.
+assert-count: (
+    "//*[@class='sidebar-elems']//*[@class='block macro']//li/a[text()='b']",
+    1,
+)
diff --git a/tests/rustdoc-gui/enum-variants.goml b/tests/rustdoc-gui/enum-variants.goml
new file mode 100644
index 00000000000..8dfc49285f2
--- /dev/null
+++ b/tests/rustdoc-gui/enum-variants.goml
@@ -0,0 +1,10 @@
+// Verifies that there is non-zero margin on variants and their docblocks.
+goto: "file://" + |DOC_PATH| + "/test_docs/enum.WhoLetTheDogOut.html"
+
+assert-css: (".variants > .variant", {"margin": "0px 0px 12px"})
+assert-css: (".variants > .docblock", {"margin": "0px 0px 32px 24px"})
+
+assert-css: (
+    "details.non-exhaustive > summary",
+    {"font-family": '"Fira Sans", Arial, NanumBarunGothic, sans-serif'},
+)
diff --git a/tests/rustdoc-gui/escape-key.goml b/tests/rustdoc-gui/escape-key.goml
new file mode 100644
index 00000000000..5d80d24969d
--- /dev/null
+++ b/tests/rustdoc-gui/escape-key.goml
@@ -0,0 +1,35 @@
+// This test ensures that the "Escape" shortcut is handled correctly based on the
+// current content displayed.
+goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
+// First, we check that the search results are hidden when the Escape key is pressed.
+write: (".search-input", "test")
+// To be SURE that the search will be run.
+press-key: 'Enter'
+wait-for: "#search h1" // The search element is empty before the first search
+// Check that the currently displayed element is search.
+wait-for: "#alternative-display #search"
+assert-attribute: ("#main-content", {"class": "content hidden"})
+assert-document-property: ({"URL": "index.html?search=test"}, ENDS_WITH)
+press-key: "Escape"
+// Checks that search is no longer in the displayed content.
+wait-for: "#not-displayed #search"
+assert-false: "#alternative-display #search"
+assert-attribute: ("#main-content", {"class": "content"})
+assert-document-property: ({"URL": "index.html"}, [ENDS_WITH])
+
+// Check that focusing the search input brings back the search results
+focus: ".search-input"
+wait-for: "#alternative-display #search"
+assert-attribute: ("#main-content", {"class": "content hidden"})
+assert-document-property: ({"URL": "index.html?search=test"}, ENDS_WITH)
+
+// Check that Escape hides the search results when a search result is focused.
+focus: ".search-input"
+assert: ".search-input:focus"
+press-key: "ArrowDown"
+assert-false: ".search-input:focus"
+assert: "#results a:focus"
+press-key: "Escape"
+wait-for: "#not-displayed #search"
+assert-false: "#alternative-display #search"
+assert-attribute: ("#main-content", {"class": "content"})
diff --git a/tests/rustdoc-gui/font-weight.goml b/tests/rustdoc-gui/font-weight.goml
new file mode 100644
index 00000000000..8ba005b0c35
--- /dev/null
+++ b/tests/rustdoc-gui/font-weight.goml
@@ -0,0 +1,44 @@
+// This test checks that the font weight is correctly applied.
+goto: "file://" + |DOC_PATH| + "/lib2/struct.Foo.html"
+assert-css: ("//*[@class='item-decl']//a[text()='Alias']", {"font-weight": "400"})
+assert-css: (
+    "//*[@class='structfield small-section-header']//a[text()='Alias']",
+    {"font-weight": "400"},
+)
+assert-css: ("#method\.a_method > .code-header", {"font-weight": "600"})
+assert-css: ("#associatedtype\.X > .code-header", {"font-weight": "600"})
+assert-css: ("#associatedconstant\.Y > .code-header", {"font-weight": "600"})
+
+goto: "file://" + |DOC_PATH| + "/test_docs/type.SomeType.html"
+assert-css: (".top-doc .docblock p", {"font-weight": "400"}, ALL)
+
+goto: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html"
+assert-css: (".impl-items .method > .code-header", {"font-weight": "600"}, ALL)
+
+goto: "file://" + |DOC_PATH| + "/lib2/trait.Trait.html"
+
+// This is a complex selector, so here's how it works:
+//
+// * //*[@class='item-decl'] — selects element of any tag with classes docblock and item-decl
+// * /pre[@class='rust trait'] — selects immediate child with tag pre and classes rust and trait
+// * /code — selects immediate child with tag code
+// * /a[@class='constant'] — selects immediate child with tag a and class constant
+// * //text() — selects child that is text node
+// * /parent::* — selects immediate parent of the text node (the * means it can be any tag)
+//
+// This uses '/parent::*' as a proxy for the style of the text node.
+// We can't just select the '' because intermediate tags could be added.
+assert-count: (
+    "//*[@class='item-decl']/pre[@class='rust trait']/code/a[@class='constant']//text()/parent::*",
+    1,
+)
+assert-css: (
+    "//*[@class='item-decl']/pre[@class='rust trait']/code/a[@class='constant']//text()/parent::*",
+    {"font-weight": "400"},
+)
+
+assert-count: (".methods .associatedtype", 1)
+assert-css: (".methods .associatedtype", {"font-weight": "600"})
+assert-count: (".methods .constant", 1)
+assert-css: (".methods .constant", {"font-weight": "600"})
+assert-css: (".methods .method > .code-header", {"font-weight": "600"})
diff --git a/tests/rustdoc-gui/hash-item-expansion.goml b/tests/rustdoc-gui/hash-item-expansion.goml
new file mode 100644
index 00000000000..3cf94f624fe
--- /dev/null
+++ b/tests/rustdoc-gui/hash-item-expansion.goml
@@ -0,0 +1,11 @@
+// This test ensures that the element corresponding to the hash is displayed.
+goto: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html#method.borrow"
+// In the blanket implementations list, "Borrow" is the second one, hence the ":nth(2)".
+assert-attribute: ("#blanket-implementations-list > details:nth-child(2)", {"open": ""})
+// We first check that the impl block is open by default.
+assert-attribute: ("#implementations-list details", {"open": ""})
+// To ensure that we will click on the currently hidden method.
+assert-text: (".sidebar-elems section .block li > a", "must_use")
+click: ".sidebar-elems section .block li > a"
+// We check that the impl block was opened as expected so that we can see the method.
+assert-attribute: ("#implementations-list > details", {"open": ""})
diff --git a/tests/rustdoc-gui/headers-color.goml b/tests/rustdoc-gui/headers-color.goml
new file mode 100644
index 00000000000..92cf050a514
--- /dev/null
+++ b/tests/rustdoc-gui/headers-color.goml
@@ -0,0 +1,70 @@
+// This test check for headers text and background colors for the different themes.
+
+define-function: (
+    "check-colors",
+    (theme, color, code_header_color, focus_background_color, headings_color),
+    block {
+        goto: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html"
+        // This is needed so that the text color is computed.
+        show-text: true
+        local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
+        reload:
+        assert-css: (
+            ".impl",
+            {"color": |color|, "background-color": "rgba(0, 0, 0, 0)"},
+            ALL,
+        )
+        assert-css: (
+            ".impl .code-header",
+            {"color": |code_header_color|, "background-color": "rgba(0, 0, 0, 0)"},
+            ALL,
+        )
+        goto: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html#impl-Foo"
+        assert-css: (
+            "#impl-Foo",
+            {"color": |color|, "background-color": |focus_background_color|},
+        )
+        goto: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html#method.must_use"
+        assert-css: (
+            "#method\.must_use",
+            {"color": |color|, "background-color": |focus_background_color|},
+            ALL,
+        )
+        goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
+        assert-css: (".small-section-header a", {"color": |color|}, ALL)
+        goto: "file://" + |DOC_PATH| + "/test_docs/struct.HeavilyDocumentedStruct.html"
+        // We select headings (h2, h3, h...).
+        assert-css: (".docblock > :not(p) > a", {"color": |headings_color|}, ALL)
+    },
+)
+
+call-function: (
+    "check-colors",
+    {
+        "theme": "ayu",
+        "color": "rgb(197, 197, 197)",
+        "code_header_color": "rgb(230, 225, 207)",
+        "focus_background_color": "rgba(255, 236, 164, 0.06)",
+        "headings_color": "rgb(57, 175, 215)",
+    },
+)
+call-function: (
+    "check-colors",
+    {
+        "theme": "dark",
+        "color": "rgb(221, 221, 221)",
+        "code_header_color": "rgb(221, 221, 221)",
+        "focus_background_color": "rgb(73, 74, 61)",
+        "headings_color": "rgb(210, 153, 29)",
+    },
+)
+call-function: (
+    "check-colors",
+    {
+        "theme": "light",
+        "color": "rgb(0, 0, 0)",
+        "code_header_color": "rgb(0, 0, 0)",
+        "focus_background_color": "rgb(253, 255, 211)",
+        "headings_color": "rgb(56, 115, 173)",
+    },
+)
diff --git a/tests/rustdoc-gui/headings.goml b/tests/rustdoc-gui/headings.goml
new file mode 100644
index 00000000000..45b3fee26e4
--- /dev/null
+++ b/tests/rustdoc-gui/headings.goml
@@ -0,0 +1,234 @@
+// This test checks that headers (a) have the correct heading level, (b) are the right size,
+// and (c) have the correct underlining (or absence of underlining).
+// The sizes may change as design changes, but try to make sure a lower header is never bigger than
+// its parent headers. Also make sure lower headers don't have underlines when their parents lack
+// an underline.
+// Most of these sizes are set in CSS in `em` units, so here's a conversion chart based on our
+// default 16px font size:
+// 24px    1.5em
+// 22px  1.375rem
+// 20px  1.25rem
+// 18px  1.125em
+// 16px  1rem
+// 14px  0.875rem
+goto: "file://" + |DOC_PATH| + "/test_docs/struct.HeavilyDocumentedStruct.html"
+
+assert-css: ("h1.fqn", {"font-size": "24px"})
+
+assert-css: ("h2#top-doc-prose-title", {"font-size": "22px"})
+assert-css: ("h2#top-doc-prose-title", {"border-bottom-width": "1px"})
+assert-css: ("h3#top-doc-prose-sub-heading", {"font-size": "20px"})
+assert-css: ("h3#top-doc-prose-sub-heading", {"border-bottom-width": "1px"})
+assert-css: ("h4#top-doc-prose-sub-sub-heading", {"font-size": "18px"})
+assert-css: ("h4#top-doc-prose-sub-sub-heading", {"border-bottom-width": "1px"})
+
+assert-css: ("h2#fields", {"font-size": "22px"})
+assert-css: ("h2#fields", {"border-bottom-width": "1px"})
+assert-css: ("h3#title-for-field", {"font-size": "20px"})
+assert-css: ("h3#title-for-field", {"border-bottom-width": "0px"})
+assert-css: ("h4#sub-heading-for-field", {"font-size": "16px"})
+assert-css: ("h4#sub-heading-for-field", {"border-bottom-width": "0px"})
+
+assert-css: ("h2#implementations", {"font-size": "22px"})
+assert-css: ("h2#implementations", {"border-bottom-width": "1px"})
+
+assert-css: ("#impl-HeavilyDocumentedStruct > h3.code-header", {"font-size": "18px"})
+assert-css: ("#impl-HeavilyDocumentedStruct > h3.code-header", {"border-bottom-width": "0px"})
+assert-css: ("#method\.do_nothing > h4.code-header", {"font-size": "16px"})
+assert-css: ("#method\.do_nothing > h4.code-header", {"border-bottom-width": "0px"})
+
+assert-css: ("h4#title-for-struct-impl-doc", {"font-size": "16px"})
+assert-css: ("h4#title-for-struct-impl-doc", {"border-bottom-width": "0px"})
+assert-css: ("h5#sub-heading-for-struct-impl-doc", {"font-size": "16px"})
+assert-css: ("h5#sub-heading-for-struct-impl-doc", {"border-bottom-width": "0px"})
+assert-css: ("h6#sub-sub-heading-for-struct-impl-doc", {"font-size": "14px"})
+assert-css: ("h6#sub-sub-heading-for-struct-impl-doc", {"border-bottom-width": "0px"})
+
+assert-css: ("h5#title-for-struct-impl-item-doc", {"font-size": "16px"})
+assert-css: ("h5#title-for-struct-impl-item-doc", {"border-bottom-width": "0px"})
+assert-css: ("h6#sub-heading-for-struct-impl-item-doc", {"font-size": "14px"})
+assert-css: ("h6#sub-heading-for-struct-impl-item-doc", {"border-bottom-width": "0px"})
+assert-css: ("h6#sub-sub-heading-for-struct-impl-item-doc", {"font-size": "14px"})
+
+goto: "file://" + |DOC_PATH| + "/test_docs/enum.HeavilyDocumentedEnum.html"
+
+assert-css: ("h1.fqn", {"font-size": "24px"})
+
+assert-css: ("h2#top-doc-prose-title", {"font-size": "22px"})
+assert-css: ("h2#top-doc-prose-title", {"border-bottom-width": "1px"})
+assert-css: ("h3#top-doc-prose-sub-heading", {"font-size": "20px"})
+assert-css: ("h3#top-doc-prose-sub-heading", {"border-bottom-width": "1px"})
+assert-css: ("h4#top-doc-prose-sub-sub-heading", {"font-size": "18px"})
+assert-css: ("h4#top-doc-prose-sub-sub-heading", {"border-bottom-width": "1px"})
+
+assert-css: ("h2#variants", {"font-size": "22px"})
+assert-css: ("h2#variants", {"border-bottom-width": "1px"})
+
+assert-css: ("h4#none-prose-title", {"font-size": "16px"})
+assert-css: ("h4#none-prose-title", {"border-bottom-width": "0px"})
+assert-css: ("h5#none-prose-sub-heading", {"font-size": "16px"})
+assert-css: ("h5#none-prose-sub-heading", {"border-bottom-width": "0px"})
+
+assert-css: ("h4#wrapped-prose-title", {"font-size": "16px"})
+assert-css: ("h4#wrapped-prose-title", {"border-bottom-width": "0px"})
+assert-css: ("h5#wrapped-prose-sub-heading", {"font-size": "16px"})
+assert-css: ("h5#wrapped-prose-sub-heading", {"border-bottom-width": "0px"})
+
+assert-css: ("h5#wrapped0-prose-title", {"font-size": "16px"})
+assert-css: ("h5#wrapped0-prose-title", {"border-bottom-width": "0px"})
+assert-css: ("h6#wrapped0-prose-sub-heading", {"font-size": "14px"})
+assert-css: ("h6#wrapped0-prose-sub-heading", {"border-bottom-width": "0px"})
+
+assert-css: ("h5#structy-prose-title", {"font-size": "16px"})
+assert-css: ("h5#structy-prose-title", {"border-bottom-width": "0px"})
+assert-css: ("h6#structy-prose-sub-heading", {"font-size": "14px"})
+assert-css: ("h6#structy-prose-sub-heading", {"border-bottom-width": "0px"})
+
+assert-css: ("h2#implementations", {"font-size": "22px"})
+assert-css: ("h2#implementations", {"border-bottom-width": "1px"})
+
+assert-css: ("#impl-HeavilyDocumentedEnum > h3.code-header", {"font-size": "18px"})
+assert-css: ("#impl-HeavilyDocumentedEnum > h3.code-header", {"border-bottom-width": "0px"})
+assert-css: ("#method\.do_nothing > h4.code-header", {"font-size": "16px"})
+assert-css: ("#method\.do_nothing > h4.code-header", {"border-bottom-width": "0px"})
+
+assert-css: ("h4#title-for-enum-impl-doc", {"font-size": "16px"})
+assert-css: ("h4#title-for-enum-impl-doc", {"border-bottom-width": "0px"})
+assert-css: ("h5#sub-heading-for-enum-impl-doc", {"font-size": "16px"})
+assert-css: ("h5#sub-heading-for-enum-impl-doc", {"border-bottom-width": "0px"})
+assert-css: ("h6#sub-sub-heading-for-enum-impl-doc", {"font-size": "14px"})
+assert-css: ("h6#sub-sub-heading-for-enum-impl-doc", {"border-bottom-width": "0px"})
+
+assert-css: ("h5#title-for-enum-impl-item-doc", {"font-size": "16px"})
+assert-css: ("h5#title-for-enum-impl-item-doc", {"border-bottom-width": "0px"})
+assert-css: ("h6#sub-heading-for-enum-impl-item-doc", {"font-size": "14px"})
+assert-css: ("h6#sub-heading-for-enum-impl-item-doc", {"border-bottom-width": "0px"})
+assert-css: ("h6#sub-sub-heading-for-enum-impl-item-doc", {"font-size": "14px"})
+assert-css: ("h6#sub-sub-heading-for-enum-impl-item-doc", {"border-bottom-width": "0px"})
+
+assert-text: ("//ul[@class='block mod']/preceding-sibling::h3", "Modules")
+assert-css: ("//ul[@class='block mod']/preceding-sibling::h3", {"border-bottom-width": "0px"}, ALL)
+
+goto: "file://" + |DOC_PATH| + "/test_docs/union.HeavilyDocumentedUnion.html"
+
+assert-css: ("h1.fqn", {"font-size": "24px"})
+
+assert-css: ("h2#top-doc-prose-title", {"font-size": "22px"})
+assert-css: ("h2#top-doc-prose-title", {"border-bottom-width": "1px"})
+assert-css: ("h3#top-doc-prose-sub-heading", {"font-size": "20px"})
+assert-css: ("h3#top-doc-prose-sub-heading", {"border-bottom-width": "1px"})
+
+assert-css: ("h2#fields", {"font-size": "22px"})
+assert-css: ("h2#fields", {"border-bottom-width": "1px"})
+
+assert-css: ("h3#title-for-union-variant", {"font-size": "20px"})
+assert-css: ("h3#title-for-union-variant", {"border-bottom-width": "0px"})
+assert-css: ("h4#sub-heading-for-union-variant", {"font-size": "16px"})
+assert-css: ("h4#sub-heading-for-union-variant", {"border-bottom-width": "0px"})
+
+assert-css: ("h2#implementations", {"font-size": "22px"})
+assert-css: ("h2#implementations", {"border-bottom-width": "1px"})
+
+assert-css: ("#impl-HeavilyDocumentedUnion > h3.code-header", {"font-size": "18px"})
+assert-css: ("#impl-HeavilyDocumentedUnion > h3.code-header", {"border-bottom-width": "0px"})
+assert-css: ("h4#title-for-union-impl-doc", {"font-size": "16px"})
+assert-css: ("h4#title-for-union-impl-doc", {"border-bottom-width": "0px"})
+assert-css: ("h5#sub-heading-for-union-impl-doc", {"font-size": "16px"})
+assert-css: ("h5#sub-heading-for-union-impl-doc", {"border-bottom-width": "0px"})
+
+assert-css: ("h5#title-for-union-impl-item-doc", {"font-size": "16px"})
+assert-css: ("h5#title-for-union-impl-item-doc", {"border-bottom-width": "0px"})
+assert-css: ("h6#sub-heading-for-union-impl-item-doc", {"font-size": "14px"})
+assert-css: ("h6#sub-heading-for-union-impl-item-doc", {"border-bottom-width": "0px"})
+
+goto: "file://" + |DOC_PATH| + "/test_docs/macro.heavily_documented_macro.html"
+
+assert-css: ("h1.fqn", {"font-size": "24px"})
+
+assert-css: ("h2#top-doc-prose-title", {"font-size": "22px"})
+assert-css: ("h2#top-doc-prose-title", {"border-bottom-width": "1px"})
+assert-css: ("h3#top-doc-prose-sub-heading", {"font-size": "20px"})
+assert-css: ("h3#top-doc-prose-sub-heading", {"border-bottom-width": "1px"})
+
+// Needed to check colors
+show-text: true
+goto: "file://" + |DOC_PATH| + "/test_docs/struct.HeavilyDocumentedStruct.html"
+
+define-function: (
+    "check-colors",
+    (theme, heading_color, small_heading_color, heading_border_color),
+    block {
+        local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
+        reload:
+        assert-css: (
+            ".top-doc .docblock h2",
+            {"color": |heading_color|, "border-bottom": "1px solid " + |heading_border_color|},
+        )
+        assert-css: (
+            ".top-doc .docblock h3",
+            {"color": |heading_color|, "border-bottom": "1px solid " + |heading_border_color|},
+        )
+        assert-css: (
+            ".top-doc .docblock h4",
+            {"color": |heading_color|, "border-bottom": "1px solid " + |heading_border_color|},
+        )
+        assert-css: (
+            ".top-doc .docblock h5",
+            {"color": |small_heading_color|, "border-bottom-width": "0px"},
+        )
+        assert-css: (
+            "#implementations-list .docblock h4",
+            {"color": |heading_color|, "border-bottom-width": "0px"},
+        )
+        assert-css: (
+            "#implementations-list .docblock h5",
+            {"color": |small_heading_color|, "border-bottom-width": "0px"},
+        )
+        assert-css: (
+            "#implementations-list .docblock h6",
+            {"color": |small_heading_color|, "border-bottom-width": "0px"},
+        )
+    },
+)
+call-function: (
+    "check-colors",
+    {
+        "theme": "ayu",
+        "heading_color": "rgb(255, 255, 255)",
+        "small_heading_color": "rgb(197, 197, 197)",
+        "heading_border_color": "rgb(92, 103, 115)",
+    },
+)
+call-function: (
+    "check-colors",
+    {
+        "theme": "dark",
+        "heading_color": "rgb(221, 221, 221)",
+        "small_heading_color": "rgb(221, 221, 221)",
+        "heading_border_color": "rgb(210, 210, 210)",
+    },
+)
+call-function: (
+    "check-colors",
+    {
+        "theme": "light",
+        "heading_color": "rgb(0, 0, 0)",
+        "small_heading_color": "rgb(0, 0, 0)",
+        "heading_border_color": "rgb(221, 221, 221)",
+    },
+)
+
+define-function: (
+    "check-since-color",
+    (theme),
+    block {
+        local-storage: {"rustdoc-theme": |theme|}
+        reload:
+        assert-css: (".since", {"color": "rgb(128, 128, 128)"}, ALL)
+    },
+)
+
+goto: "file://" + |DOC_PATH| + "/staged_api/struct.Foo.html"
+call-function: ("check-since-color", ("ayu"))
+call-function: ("check-since-color", ("dark"))
+call-function: ("check-since-color", ("light"))
diff --git a/tests/rustdoc-gui/help-page.goml b/tests/rustdoc-gui/help-page.goml
new file mode 100644
index 00000000000..5f4c1ba2f85
--- /dev/null
+++ b/tests/rustdoc-gui/help-page.goml
@@ -0,0 +1,72 @@
+// This test ensures that opening the help page in its own tab works.
+goto: "file://" + |DOC_PATH| + "/help.html"
+size: (1000, 1000) // Try desktop size first.
+wait-for: "#help"
+assert-css: ("#help", {"display": "block"})
+assert-css: ("#help dd", {"font-size": "16px"})
+click: "#help-button > a"
+assert-css: ("#help", {"display": "block"})
+compare-elements-property: (".sub", "#help", ["offsetWidth"])
+compare-elements-position: (".sub", "#help", ("x"))
+size: (500, 1000) // Try mobile next.
+assert-css: ("#help", {"display": "block"})
+compare-elements-property: (".sub", "#help", ["offsetWidth"])
+compare-elements-position: (".sub", "#help", ("x"))
+
+// Checking the color of the elements of the help menu.
+show-text: true
+define-function: (
+    "check-colors",
+    (theme, color, background, box_shadow),
+    block {
+        // Setting the theme.
+        local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
+        // We reload the page so the local storage settings are being used.
+        reload:
+        assert-css: ("#help kbd", {
+            "color": |color|,
+            "background-color": |background|,
+            "box-shadow": |box_shadow| + " 0px -1px 0px 0px inset",
+        }, ALL)
+    },
+)
+
+call-function: ("check-colors", {
+    "theme": "ayu",
+    "color": "rgb(197, 197, 197)",
+    "background": "rgb(49, 69, 89)",
+    "box_shadow": "rgb(92, 103, 115)",
+})
+call-function: ("check-colors", {
+    "theme": "dark",
+    "color": "rgb(0, 0, 0)",
+    "background": "rgb(250, 251, 252)",
+    "box_shadow": "rgb(198, 203, 209)",
+})
+call-function: ("check-colors", {
+    "theme": "light",
+    "color": "rgb(0, 0, 0)",
+    "background": "rgb(250, 251, 252)",
+    "box_shadow": "rgb(198, 203, 209)",
+})
+
+// This test ensures that opening the help popover without switching pages works.
+goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
+size: (1000, 1000) // Only supported on desktop.
+assert-false: "#help"
+click: "#help-button > a"
+assert-css: ("#help", {"display": "block"})
+assert-css: ("#help dd", {"font-size": "16px"})
+click: "#help-button > a"
+assert-css: ("#help", {"display": "none"})
+compare-elements-property-false: (".sub", "#help", ["offsetWidth"])
+compare-elements-position-false: (".sub", "#help", ("x"))
+
+// This test ensures that the "the rustdoc book" anchor link within the help popover works.
+goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
+size: (1000, 1000) // Popover only appears when the screen width is >700px.
+assert-false: "#help"
+click: "#help-button > a"
+click: ".popover a[href='https://doc.rust-lang.org/rustdoc/']"
+wait-for: 2000
+assert-document-property: {"URL": "https://doc.rust-lang.org/rustdoc/"}
diff --git a/tests/rustdoc-gui/highlight-colors.goml b/tests/rustdoc-gui/highlight-colors.goml
new file mode 100644
index 00000000000..b182150a577
--- /dev/null
+++ b/tests/rustdoc-gui/highlight-colors.goml
@@ -0,0 +1,94 @@
+// This test checks the highlight colors in the source code pages.
+goto: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
+show-text: true
+
+define-function: (
+    "check-colors",
+    (
+        theme,
+        kw,
+        kw2,
+        prelude_ty,
+        prelude_val,
+        lifetime,
+        number,
+        string,
+        bool_val,
+        self,
+        attr,
+        macro,
+        question_mark,
+        comment,
+        doc_comment,
+    ),
+    block {
+        local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
+        reload:
+        assert-css: ("pre.rust .kw", {"color": |kw|}, ALL)
+        assert-css: ("pre.rust .kw-2", {"color": |kw2|}, ALL)
+        assert-css: ("pre.rust .prelude-ty", {"color": |prelude_ty|}, ALL)
+        assert-css: ("pre.rust .prelude-val", {"color": |prelude_val|}, ALL)
+        assert-css: ("pre.rust .lifetime", {"color": |lifetime|}, ALL)
+        assert-css: ("pre.rust .number", {"color": |number|}, ALL)
+        assert-css: ("pre.rust .string", {"color": |string|}, ALL)
+        assert-css: ("pre.rust .bool-val", {"color": |bool_val|}, ALL)
+        assert-css: ("pre.rust .self", {"color": |self|}, ALL)
+        assert-css: ("pre.rust .attr", {"color": |attr|}, ALL)
+        assert-css: ("pre.rust .macro", {"color": |macro|}, ALL)
+        assert-css: ("pre.rust .question-mark", {"color": |question_mark|}, ALL)
+        assert-css: ("pre.rust .comment", {"color": |comment|}, ALL)
+        assert-css: ("pre.rust .doccomment", {"color": |doc_comment|}, ALL)
+    },
+)
+
+call-function: ("check-colors", {
+    "theme": "ayu",
+    "kw": "rgb(255, 119, 51)",
+    "kw2": "rgb(255, 119, 51)",
+    "prelude_ty": "rgb(105, 242, 223)",
+    "prelude_val": "rgb(255, 119, 51)",
+    "lifetime": "rgb(255, 119, 51)",
+    "number": "rgb(184, 204, 82)",
+    "string": "rgb(184, 204, 82)",
+    "bool_val": "rgb(255, 119, 51)",
+    "self": "rgb(54, 163, 217)",
+    "attr": "rgb(230, 225, 207)",
+    "macro": "rgb(163, 122, 204)",
+    "question_mark": "rgb(255, 144, 17)",
+    "comment": "rgb(120, 135, 151)",
+    "doc_comment": "rgb(161, 172, 136)",
+})
+call-function: ("check-colors", {
+    "theme": "dark",
+    "kw": "rgb(171, 138, 193)",
+    "kw2": "rgb(118, 154, 203)",
+    "prelude_ty": "rgb(118, 154, 203)",
+    "prelude_val": "rgb(238, 104, 104)",
+    "lifetime": "rgb(217, 127, 38)",
+    "number": "rgb(131, 163, 0)",
+    "string": "rgb(131, 163, 0)",
+    "bool_val": "rgb(238, 104, 104)",
+    "self": "rgb(238, 104, 104)",
+    "attr": "rgb(238, 104, 104)",
+    "macro": "rgb(62, 153, 159)",
+    "question_mark": "rgb(255, 144, 17)",
+    "comment": "rgb(141, 141, 139)",
+    "doc_comment": "rgb(140, 163, 117)",
+})
+call-function: ("check-colors", {
+    "theme": "light",
+    "kw": "rgb(137, 89, 168)",
+    "kw2": "rgb(66, 113, 174)",
+    "prelude_ty": "rgb(66, 113, 174)",
+    "prelude_val": "rgb(200, 40, 41)",
+    "lifetime": "rgb(183, 101, 20)",
+    "number": "rgb(113, 140, 0)",
+    "string": "rgb(113, 140, 0)",
+    "bool_val": "rgb(200, 40, 41)",
+    "self": "rgb(200, 40, 41)",
+    "attr": "rgb(200, 40, 41)",
+    "macro": "rgb(62, 153, 159)",
+    "question_mark": "rgb(255, 144, 17)",
+    "comment": "rgb(142, 144, 140)",
+    "doc_comment": "rgb(77, 77, 76)",
+})
diff --git a/tests/rustdoc-gui/huge-collection-of-constants.goml b/tests/rustdoc-gui/huge-collection-of-constants.goml
new file mode 100644
index 00000000000..3ccd33f1ccd
--- /dev/null
+++ b/tests/rustdoc-gui/huge-collection-of-constants.goml
@@ -0,0 +1,9 @@
+// Make sure that the last two entries are more than 12 pixels apart and not stacked on each other.
+
+goto: "file://" + |DOC_PATH| + "/test_docs/huge_amount_of_consts/index.html"
+
+compare-elements-position-near-false: (
+    "//*[@class='item-table']//div[last()-1]",
+    "//*[@class='item-table']//div[last()-3]",
+    {"y": 12},
+)
diff --git a/tests/rustdoc-gui/huge-logo.goml b/tests/rustdoc-gui/huge-logo.goml
new file mode 100644
index 00000000000..01f06771c15
--- /dev/null
+++ b/tests/rustdoc-gui/huge-logo.goml
@@ -0,0 +1,21 @@
+// huge_logo crate has a custom 712x860 logo
+// test to ensure the maximum size in the layout works correctly
+goto: "file://" + |DOC_PATH| + "/huge_logo/index.html"
+
+size: (1280, 1024)
+// offsetWidth = width of sidebar
+assert-property: (".sidebar .logo-container", {"offsetWidth": "200", "offsetHeight": 100})
+assert-property: (".sidebar .logo-container img", {"offsetWidth": "100", "offsetHeight": 100})
+
+size: (400, 600)
+// offset = size + margin
+assert-property: (".mobile-topbar .logo-container", {"offsetWidth": "55", "offsetHeight": 45})
+assert-property: (".mobile-topbar .logo-container img", {"offsetWidth": "35", "offsetHeight": 35})
+
+goto: "file://" + |DOC_PATH| + "/src/huge_logo/lib.rs.html"
+
+size: (1280, 1024)
+assert-property: (".sub-logo-container", {"offsetWidth": "60", "offsetHeight": 60})
+
+size: (400, 600)
+assert-property: (".sub-logo-container", {"offsetWidth": "35", "offsetHeight": 35})
diff --git a/tests/rustdoc-gui/impl-default-expansion.goml b/tests/rustdoc-gui/impl-default-expansion.goml
new file mode 100644
index 00000000000..c3f9240cc93
--- /dev/null
+++ b/tests/rustdoc-gui/impl-default-expansion.goml
@@ -0,0 +1,3 @@
+// This test ensures that the impl blocks are open by default.
+goto: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html"
+assert-attribute: ("#implementations-list details.implementors-toggle", {"open": ""})
diff --git a/tests/rustdoc-gui/impl-doc.goml b/tests/rustdoc-gui/impl-doc.goml
new file mode 100644
index 00000000000..6caffb9c39f
--- /dev/null
+++ b/tests/rustdoc-gui/impl-doc.goml
@@ -0,0 +1,9 @@
+// A docblock on an impl must have a margin to separate it from the contents.
+goto: "file://" + |DOC_PATH| + "/test_docs/struct.TypeWithImplDoc.html"
+
+// The text is about 24px tall, so if there's a margin, then their position will be >24px apart
+compare-elements-position-near-false: (
+    "#implementations-list > .implementors-toggle > .docblock > p",
+    "#implementations-list > .implementors-toggle > .impl-items",
+    {"y": 24}
+)
diff --git a/tests/rustdoc-gui/implementors.goml b/tests/rustdoc-gui/implementors.goml
new file mode 100644
index 00000000000..997c0ed8f01
--- /dev/null
+++ b/tests/rustdoc-gui/implementors.goml
@@ -0,0 +1,41 @@
+// The goal of this test is to check that the external trait implementors, generated with JS,
+// have the same display than the "local" ones.
+goto: "file://" + |DOC_PATH| + "/implementors/trait.Whatever.html"
+assert: "#implementors-list"
+// There are supposed to be two implementors listed.
+assert-count: ("#implementors-list .impl", 2)
+// Now we check that both implementors have an anchor, an ID and a similar DOM.
+assert: ("#implementors-list .impl:nth-child(1) > a.anchor")
+assert-attribute: ("#implementors-list .impl:nth-child(1)", {"id": "impl-Whatever-for-Struct"})
+assert-attribute: ("#implementors-list .impl:nth-child(1) > a.anchor", {"href": "#impl-Whatever-for-Struct"})
+assert: "#implementors-list .impl:nth-child(1) > .code-header"
+
+assert: ("#implementors-list .impl:nth-child(2) > a.anchor")
+assert-attribute: ("#implementors-list .impl:nth-child(2)", {"id": "impl-Whatever-1"})
+assert-attribute: ("#implementors-list .impl:nth-child(2) > a.anchor", {"href": "#impl-Whatever-1"})
+assert: "#implementors-list .impl:nth-child(2) > .code-header"
+
+goto: "file://" + |DOC_PATH| + "/test_docs/struct.HasEmptyTraits.html"
+compare-elements-position-near-false: (
+    "#impl-EmptyTrait1-for-HasEmptyTraits",
+    "#impl-EmptyTrait2-for-HasEmptyTraits",
+    {"y": 34},
+)
+compare-elements-position-near: (
+    "#impl-EmptyTrait3-for-HasEmptyTraits h3",
+    "#impl-EmptyTrait3-for-HasEmptyTraits .item-info",
+    {"y": 34},
+)
+
+// Now check that re-exports work correctly.
+// There should be exactly one impl shown on both of these pages.
+goto: "file://" + |DOC_PATH| + "/lib2/trait.TraitToReexport.html"
+assert-count: ("#implementors-list .impl", 1)
+goto: "file://" + |DOC_PATH| + "/implementors/trait.TraitToReexport.html"
+assert-count: ("#implementors-list .impl", 1)
+
+// Now check that the link is properly rewritten for a crate called `http`.
+// An older version of rustdoc had a buggy check for absolute links.
+goto: "file://" + |DOC_PATH| + "/http/trait.HttpTrait.html"
+assert-count: ("#implementors-list .impl", 1)
+assert-attribute: ("#implementors-list .impl a.trait", {"href": "../http/trait.HttpTrait.html"})
diff --git a/tests/rustdoc-gui/item-decl-colors.goml b/tests/rustdoc-gui/item-decl-colors.goml
new file mode 100644
index 00000000000..c58e3eb7c23
--- /dev/null
+++ b/tests/rustdoc-gui/item-decl-colors.goml
@@ -0,0 +1,80 @@
+// This test ensures that the color of the items in the type decl are working as expected.
+
+// We need to disable this check because `implementors/test_docs/trait.TraitWithoutGenerics.js`
+// doesn't exist.
+fail-on-request-error: false
+
+define-function: (
+    "check-colors",
+    (
+        theme,
+        attr_color,
+        trait_color,
+        struct_color,
+        enum_color,
+        primitive_color,
+        constant_color,
+        fn_color,
+        assoc_type_color,
+    ),
+    block {
+        goto: "file://" + |DOC_PATH| + "/test_docs/struct.WithGenerics.html"
+        show-text: true
+        local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
+        reload:
+        assert-css: (".item-decl .code-attribute", {"color": |attr_color|}, ALL)
+        assert-css: (".item-decl .trait", {"color": |trait_color|}, ALL)
+        // We need to add `code` here because otherwise it would select the parent too.
+        assert-css: (".item-decl code .struct", {"color": |struct_color|}, ALL)
+        assert-css: (".item-decl .enum", {"color": |enum_color|}, ALL)
+        assert-css: (".item-decl .primitive", {"color": |primitive_color|}, ALL)
+
+        goto: "file://" + |DOC_PATH| + "/test_docs/trait.TraitWithoutGenerics.html"
+        assert-css: (".item-decl .constant", {"color": |constant_color|}, ALL)
+        assert-css: (".item-decl .fn", {"color": |fn_color|}, ALL)
+        assert-css: (".item-decl .associatedtype", {"color": |assoc_type_color|}, ALL)
+    },
+)
+
+call-function: (
+    "check-colors",
+    {
+        "theme": "ayu",
+        "attr_color": "rgb(153, 153, 153)",
+        "trait_color": "rgb(57, 175, 215)",
+        "struct_color": "rgb(255, 160, 165)",
+        "enum_color": "rgb(255, 160, 165)",
+        "primitive_color": "rgb(255, 160, 165)",
+        "constant_color": "rgb(57, 175, 215)",
+        "fn_color": "rgb(253, 214, 135)",
+        "assoc_type_color": "rgb(57, 175, 215)",
+    },
+)
+call-function: (
+    "check-colors",
+    {
+        "theme": "dark",
+        "attr_color": "rgb(153, 153, 153)",
+        "trait_color": "rgb(183, 140, 242)",
+        "struct_color": "rgb(45, 191, 184)",
+        "enum_color": "rgb(45, 191, 184)",
+        "primitive_color": "rgb(45, 191, 184)",
+        "constant_color": "rgb(210, 153, 29)",
+        "fn_color": "rgb(43, 171, 99)",
+        "assoc_type_color": "rgb(210, 153, 29)",
+    },
+)
+call-function: (
+    "check-colors",
+    {
+        "theme": "light",
+        "attr_color": "rgb(153, 153, 153)",
+        "trait_color": "rgb(110, 79, 201)",
+        "struct_color": "rgb(173, 55, 138)",
+        "enum_color": "rgb(173, 55, 138)",
+        "primitive_color": "rgb(173, 55, 138)",
+        "constant_color": "rgb(56, 115, 173)",
+        "fn_color": "rgb(173, 124, 55)",
+        "assoc_type_color": "rgb(56, 115, 173)",
+    },
+)
diff --git a/tests/rustdoc-gui/item-info-alignment.goml b/tests/rustdoc-gui/item-info-alignment.goml
new file mode 100644
index 00000000000..94b52f0056b
--- /dev/null
+++ b/tests/rustdoc-gui/item-info-alignment.goml
@@ -0,0 +1,10 @@
+// This test ensures that the "item-info" looks about the same
+// whether or not it's inside a toggle.
+goto: "file://" + |DOC_PATH| + "/lib2/struct.ItemInfoAlignmentTest.html"
+
+// First, we try it in "desktop" mode.
+size: (1200, 870)
+compare-elements-position: (".impl-items > .item-info", "summary > .item-info", ("x"))
+// Next, we try it in "mobile" mode (max-width: 700px).
+size: (650, 650)
+compare-elements-position: (".impl-items > .item-info", "summary > .item-info", ("x"))
diff --git a/tests/rustdoc-gui/item-info-overflow.goml b/tests/rustdoc-gui/item-info-overflow.goml
new file mode 100644
index 00000000000..8ea14621cbf
--- /dev/null
+++ b/tests/rustdoc-gui/item-info-overflow.goml
@@ -0,0 +1,31 @@
+// This test ensures that the "item-info" elements don't overflow.
+goto: "file://" + |DOC_PATH| + "/lib2/struct.LongItemInfo.html"
+// We set a fixed size so there is no chance of "random" resize.
+size: (1200, 870)
+// Logically, the "item-decl" and the "item-info" should have the same scroll width.
+compare-elements-property: (".item-decl", ".item-info", ["scrollWidth"])
+assert-property: (".item-info", {"scrollWidth": "940"})
+// Just to be sure we're comparing the correct "item-info":
+assert-text: (
+    ".item-info",
+    "Available on Android or Linux or Emscripten or DragonFly BSD",
+    STARTS_WITH,
+)
+
+// Checking the "item-info" on an impl block as well:
+goto: "file://" + |DOC_PATH| + "/lib2/struct.LongItemInfo2.html"
+compare-elements-property: (
+    "#impl-SimpleTrait-for-LongItemInfo2 .item-info",
+    "#impl-SimpleTrait-for-LongItemInfo2 + .docblock",
+    ["scrollWidth"],
+)
+assert-property: (
+    "#impl-SimpleTrait-for-LongItemInfo2 .item-info",
+    {"scrollWidth": "916"},
+)
+// Just to be sure we're comparing the correct "item-info":
+assert-text: (
+    "#impl-SimpleTrait-for-LongItemInfo2 .item-info",
+    "Available on Android or Linux or Emscripten or DragonFly BSD",
+    STARTS_WITH,
+)
diff --git a/tests/rustdoc-gui/item-info.goml b/tests/rustdoc-gui/item-info.goml
new file mode 100644
index 00000000000..6780dfca68a
--- /dev/null
+++ b/tests/rustdoc-gui/item-info.goml
@@ -0,0 +1,32 @@
+// This test ensures a few things for item info elements.
+goto: "file://" + |DOC_PATH| + "/lib2/struct.Foo.html"
+// Ensuring that the item information don't take 100% of the width if unnecessary.
+// We set a fixed size so there is no chance of "random" resize.
+size: (1100, 800)
+// We check that ".item-info" is bigger than its content.
+assert-css: (".item-info", {"width": "840px"})
+assert-css: (".item-info .stab", {"width": "289px"})
+assert-position: (".item-info .stab", {"x": 245})
+
+// Now we ensure that they're not rendered on the same line.
+goto: "file://" + |DOC_PATH| + "/lib2/trait.Trait.html"
+// We first ensure that there are two item info on the trait.
+assert-count: ("#main-content > .item-info .stab", 2)
+// They should not have the same `y` position!
+compare-elements-position-false: (
+    "#main-content > .item-info .stab:nth-of-type(1)",
+    "#main-content > .item-info .stab:nth-of-type(2)",
+    ("y"),
+)
+// But they should have the same `x` position.
+compare-elements-position: (
+    "#main-content > .item-info .stab:nth-of-type(1)",
+    "#main-content > .item-info .stab:nth-of-type(2)",
+    ("x"),
+)
+// They are supposed to have the same height too.
+compare-elements-css: (
+    "#main-content > .item-info .stab:nth-of-type(1)",
+    "#main-content > .item-info .stab:nth-of-type(2)",
+    ["height"],
+)
diff --git a/tests/rustdoc-gui/item-summary-table.goml b/tests/rustdoc-gui/item-summary-table.goml
new file mode 100644
index 00000000000..2a92e9da52c
--- /dev/null
+++ b/tests/rustdoc-gui/item-summary-table.goml
@@ -0,0 +1,6 @@
+// This test ensures that 
 elements aren't display in items summary.
+goto: "file://" + |DOC_PATH| + "/lib2/summary_table/index.html"
+// We check that we picked the right item first.
+assert-text: (".item-table .item-left", "Foo")
+// Then we check that its summary is empty.
+assert-false: ".item-table .item-right"
diff --git a/tests/rustdoc-gui/javascript-disabled.goml b/tests/rustdoc-gui/javascript-disabled.goml
new file mode 100644
index 00000000000..edf179d0d5e
--- /dev/null
+++ b/tests/rustdoc-gui/javascript-disabled.goml
@@ -0,0 +1,6 @@
+// When JavaScript is disabled, we hide the search bar, because it
+// can't be used without JS.
+javascript: false
+
+goto: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html"
+assert-css: (".sub", {"display": "none"})
diff --git a/tests/rustdoc-gui/jump-to-def-background.goml b/tests/rustdoc-gui/jump-to-def-background.goml
new file mode 100644
index 00000000000..8ee3ccf4a21
--- /dev/null
+++ b/tests/rustdoc-gui/jump-to-def-background.goml
@@ -0,0 +1,22 @@
+// We check the background color on the jump to definition links in the source code page.
+goto: "file://" + |DOC_PATH| + "/src/link_to_definition/lib.rs.html"
+
+define-function: (
+    "check-background-color",
+    (theme, background_color),
+    block {
+        // Set the theme.
+        local-storage: { "rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false" }
+        // We reload the page so the local storage settings are being used.
+        reload:
+        assert-css: (
+            "body.source .example-wrap pre.rust a",
+            {"background-color": |background_color|},
+            ALL,
+        )
+    },
+)
+
+call-function: ("check-background-color", ("ayu", "rgb(51, 51, 51)"))
+call-function: ("check-background-color", ("dark", "rgb(51, 51, 51)"))
+call-function: ("check-background-color", ("light", "rgb(238, 238, 238)"))
diff --git a/tests/rustdoc-gui/label-next-to-symbol.goml b/tests/rustdoc-gui/label-next-to-symbol.goml
new file mode 100644
index 00000000000..05f8ddc716e
--- /dev/null
+++ b/tests/rustdoc-gui/label-next-to-symbol.goml
@@ -0,0 +1,66 @@
+// These tests verify that labels like "UNIX" and "Deprecated" stay on the same line as their symbol.
+// It also verifies the staggered layout on mobile.
+goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
+
+// Desktop view
+size: (1080, 600)
+assert: (".stab.deprecated")
+assert: (".stab.portability")
+
+// make sure that deprecated and portability have the right colors
+assert-css: (
+    ".item-table .item-left .stab.deprecated",
+    { "background-color": "rgb(255, 245, 214)" },
+)
+assert-css: (
+    ".item-table .item-left .stab.portability",
+    { "background-color": "rgb(255, 245, 214)" },
+)
+
+// table like view
+assert-css: (".item-right.docblock-short", { "padding-left": "0px" })
+compare-elements-position-near: (
+    "//*[@class='item-left module-item']//a[text()='replaced_function']",
+    ".item-left .stab.deprecated",
+    {"y": 2},
+)
+compare-elements-position: (
+    ".item-left .stab.deprecated",
+    ".item-left .stab.portability",
+    ("y"),
+)
+
+// Ensure no wrap
+compare-elements-position: (
+    "//*[@class='item-left module-item']//a[text()='replaced_function']/..",
+    "//*[@class='item-right docblock-short'][text()='a thing with a label']",
+    ("y"),
+)
+
+
+// Mobile view
+size: (600, 600)
+// staggered layout with 2em spacing
+assert-css: (".item-right.docblock-short", { "padding-left": "32px" })
+compare-elements-position-near: (
+    "//*[@class='item-left module-item']//a[text()='replaced_function']",
+    ".item-left .stab.deprecated",
+    {"y": 2},
+)
+compare-elements-position: (
+    ".item-left .stab.deprecated",
+    ".item-left .stab.portability",
+    ("y"),
+)
+
+// Ensure wrap
+compare-elements-position-false: (
+    "//*[@class='item-left module-item']//a[text()='replaced_function']/..",
+    "//*[@class='item-right docblock-short'][text()='a thing with a label']",
+    ("y"),
+)
+compare-elements-position-false: (
+    ".item-left .stab.deprecated",
+    "//*[@class='item-right docblock-short'][text()='a thing with a label']",
+    ("y"),
+)
diff --git a/tests/rustdoc-gui/links-color.goml b/tests/rustdoc-gui/links-color.goml
new file mode 100644
index 00000000000..14f7d99351a
--- /dev/null
+++ b/tests/rustdoc-gui/links-color.goml
@@ -0,0 +1,98 @@
+// This test checks links colors.
+goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
+
+// This is needed so that the text color is computed.
+show-text: true
+
+define-function: (
+    "check-colors",
+    (theme, mod, macro, struct, enum, trait, fn, type, union, keyword,
+     sidebar, sidebar_current, sidebar_current_background),
+    block {
+        local-storage: {
+            "rustdoc-theme": |theme|,
+            "rustdoc-use-system-theme": "false",
+        }
+        reload:
+        // Checking results colors.
+        assert-css: (".item-table .mod", {"color": |mod|}, ALL)
+        assert-css: (".item-table .macro", {"color": |macro|}, ALL)
+        assert-css: (".item-table .struct", {"color": |struct|}, ALL)
+        assert-css: (".item-table .enum", {"color": |enum|}, ALL)
+        assert-css: (".item-table .trait", {"color": |trait|}, ALL)
+        assert-css: (".item-table .fn", {"color": |fn|}, ALL)
+        assert-css: (".item-table .type", {"color": |type|}, ALL)
+        assert-css: (".item-table .union", {"color": |union|}, ALL)
+        assert-css: (".item-table .keyword", {"color": |keyword|}, ALL)
+        // Checking sidebar elements.
+        assert-css: (
+            ".sidebar-elems a:not(.current)",
+            {"color": |sidebar|, "background-color": "rgba(0, 0, 0, 0)", "font-weight": "400"},
+            ALL,
+        )
+        assert-css: (
+            ".sidebar-elems a.current",
+            {
+                "color": |sidebar_current|,
+                "background-color": |sidebar_current_background|,
+                "font-weight": "500",
+            },
+            ALL,
+        )
+    },
+)
+
+call-function: (
+    "check-colors",
+    {
+        "theme": "ayu",
+        "mod": "rgb(57, 175, 215)",
+        "macro": "rgb(163, 122, 204)",
+        "struct": "rgb(255, 160, 165)",
+        "enum": "rgb(255, 160, 165)",
+        "trait": "rgb(57, 175, 215)",
+        "fn": "rgb(253, 214, 135)",
+        "type": "rgb(255, 160, 165)",
+        "union": "rgb(255, 160, 165)",
+        "keyword": "rgb(57, 175, 215)",
+        "sidebar": "rgb(83, 177, 219)",
+        "sidebar_current": "rgb(255, 180, 76)",
+        "sidebar_current_background": "rgba(0, 0, 0, 0)",
+    },
+)
+call-function: (
+    "check-colors",
+    {
+        "theme": "dark",
+        "mod": "rgb(210, 153, 29)",
+        "macro": "rgb(9, 189, 0)",
+        "struct": "rgb(45, 191, 184)",
+        "enum": "rgb(45, 191, 184)",
+        "trait": "rgb(183, 140, 242)",
+        "fn": "rgb(43, 171, 99)",
+        "type": "rgb(45, 191, 184)",
+        "union": "rgb(45, 191, 184)",
+        "keyword": "rgb(210, 153, 29)",
+        "sidebar": "rgb(253, 191, 53)",
+        "sidebar_current": "rgb(253, 191, 53)",
+        "sidebar_current_background": "rgb(68, 68, 68)",
+    },
+)
+call-function: (
+    "check-colors",
+    {
+        "theme": "light",
+        "mod": "rgb(56, 115, 173)",
+        "macro": "rgb(6, 128, 0)",
+        "struct": "rgb(173, 55, 138)",
+        "enum": "rgb(173, 55, 138)",
+        "trait": "rgb(110, 79, 201)",
+        "fn": "rgb(173, 124, 55)",
+        "type": "rgb(173, 55, 138)",
+        "union": "rgb(173, 55, 138)",
+        "keyword": "rgb(56, 115, 173)",
+        "sidebar": "rgb(53, 109, 164)",
+        "sidebar_current": "rgb(53, 109, 164)",
+        "sidebar_current_background": "rgb(255, 255, 255)",
+    },
+)
diff --git a/tests/rustdoc-gui/list_code_block.goml b/tests/rustdoc-gui/list_code_block.goml
new file mode 100644
index 00000000000..3423a449de4
--- /dev/null
+++ b/tests/rustdoc-gui/list_code_block.goml
@@ -0,0 +1,4 @@
+// This test checks that code blocks in list are supported.
+goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
+goto: "./fn.check_list_code_block.html"
+assert: ("pre.rust.fn")
diff --git a/tests/rustdoc-gui/method-margins.goml b/tests/rustdoc-gui/method-margins.goml
new file mode 100644
index 00000000000..ed36bcdec17
--- /dev/null
+++ b/tests/rustdoc-gui/method-margins.goml
@@ -0,0 +1,18 @@
+// This test ensures that the margins on methods are coherent inside an impl block.
+goto: "file://" + |DOC_PATH| + "/test_docs/trait_members/struct.HasTrait.html#impl-TraitMembers-for-HasTrait"
+
+assert-count: ("#trait-implementations-list > .rustdoc-toggle", 1)
+
+compare-elements-css: (
+    // compare margin on type with margin on method
+    "#trait-implementations-list .impl-items > .rustdoc-toggle:nth-child(1) > summary",
+    "#trait-implementations-list .impl-items > .rustdoc-toggle:nth-child(2) > summary",
+    ["margin"]
+)
+
+compare-elements-css: (
+    // compare margin on type with margin on method
+    "#trait-implementations-list .impl-items > .rustdoc-toggle:nth-child(1)",
+    "#trait-implementations-list .impl-items > .rustdoc-toggle:nth-child(2)",
+    ["margin"]
+)
diff --git a/tests/rustdoc-gui/mobile.goml b/tests/rustdoc-gui/mobile.goml
new file mode 100644
index 00000000000..895864d8944
--- /dev/null
+++ b/tests/rustdoc-gui/mobile.goml
@@ -0,0 +1,34 @@
+// Test various properties of the mobile UI
+goto: "file://" + |DOC_PATH| + "/staged_api/struct.Foo.html"
+size: (400, 600)
+
+font-size: 18
+wait-for: 100 // wait a bit for the resize and the font-size change to be fully taken into account.
+
+// The out-of-band info (source, stable version, collapse) should be below the
+// h1 when the screen gets narrow enough.
+assert-css: (".main-heading", {
+  "display": "flex",
+  "flex-direction": "column"
+})
+
+assert-property: (".mobile-topbar h2", {"offsetHeight": 36})
+
+// Note: We can't use assert-text here because the 'Since' is set by CSS and
+// is therefore not part of the DOM.
+assert-css: (".content .out-of-band .since::before", { "content": "\"Since \"" })
+
+size: (1000, 1000)
+wait-for: 100 // wait a bit for the resize to be fully taken into account.
+assert-css-false: (".content .out-of-band .since::before", { "content": "\"Since \"" })
+
+// On the settings page, the theme buttons should not line-wrap. Instead, they should
+// all be placed as a group on a line below the setting name "Theme."
+goto: "file://" + |DOC_PATH| + "/settings.html"
+size: (400, 600)
+// Ignored for now https://github.com/rust-lang/rust/issues/93784.
+// compare-elements-position-near-false: (
+//     "#preferred-light-theme .setting-name",
+//     "#preferred-light-theme .choice",
+//     {"y": 16},
+// )
diff --git a/tests/rustdoc-gui/module-items-font.goml b/tests/rustdoc-gui/module-items-font.goml
new file mode 100644
index 00000000000..cd3676a9871
--- /dev/null
+++ b/tests/rustdoc-gui/module-items-font.goml
@@ -0,0 +1,67 @@
+// This test checks that the correct font is used on module items (in index.html pages).
+goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
+assert-css: (
+    ".item-table .module-item a",
+    {"font-family": '"Fira Sans", Arial, NanumBarunGothic, sans-serif'},
+    ALL,
+)
+assert-css: (
+    ".item-table .docblock-short",
+    {"font-family": '"Source Serif 4", NanumBarunGothic, serif'},
+    ALL,
+)
+
+// modules
+assert-css: (
+    "#modules + .item-table .item-left a",
+    {"font-family": '"Fira Sans", Arial, NanumBarunGothic, sans-serif'},
+)
+assert-css: (
+    "#modules + .item-table .item-right.docblock-short",
+    {"font-family": '"Source Serif 4", NanumBarunGothic, serif'},
+)
+// structs
+assert-css: (
+    "#structs + .item-table .item-left a",
+    {"font-family": '"Fira Sans", Arial, NanumBarunGothic, sans-serif'},
+)
+assert-css: (
+    "#structs + .item-table .item-right.docblock-short",
+    {"font-family": '"Source Serif 4", NanumBarunGothic, serif'},
+)
+// enums
+assert-css: (
+    "#enums + .item-table .item-left a",
+    {"font-family": '"Fira Sans", Arial, NanumBarunGothic, sans-serif'},
+)
+assert-css: (
+    "#enums + .item-table .item-right.docblock-short",
+    {"font-family": '"Source Serif 4", NanumBarunGothic, serif'},
+)
+// traits
+assert-css: (
+    "#traits + .item-table .item-left a",
+    {"font-family": '"Fira Sans", Arial, NanumBarunGothic, sans-serif'},
+)
+assert-css: (
+    "#traits + .item-table .item-right.docblock-short",
+    {"font-family": '"Source Serif 4", NanumBarunGothic, serif'},
+)
+// functions
+assert-css: (
+    "#functions + .item-table .item-left a",
+    {"font-family": '"Fira Sans", Arial, NanumBarunGothic, sans-serif'},
+)
+assert-css: (
+    "#functions + .item-table .item-right.docblock-short",
+    {"font-family": '"Source Serif 4", NanumBarunGothic, serif'},
+)
+// keywords
+assert-css: (
+    "#keywords + .item-table .item-left a",
+    {"font-family": '"Fira Sans", Arial, NanumBarunGothic, sans-serif'},
+)
+assert-css: (
+    "#keywords + .item-table .item-right.docblock-short",
+    {"font-family": '"Source Serif 4", NanumBarunGothic, serif'},
+)
diff --git a/tests/rustdoc-gui/no-docblock.goml b/tests/rustdoc-gui/no-docblock.goml
new file mode 100644
index 00000000000..17a955064d7
--- /dev/null
+++ b/tests/rustdoc-gui/no-docblock.goml
@@ -0,0 +1,13 @@
+// This test checks that there are margins applied to methods with no docblocks.
+
+// We need to disable this check because `implementors/test_docs/trait.TraitWithNoDocblock.js`
+// doesn't exist.
+fail-on-request-error: false
+
+goto: "file://" + |DOC_PATH| + "/test_docs/trait.TraitWithNoDocblocks.html"
+// Check that the two methods are more than 24px apart.
+compare-elements-position-near-false: ("//*[@id='tymethod.first_fn']", "//*[@id='tymethod.second_fn']", {"y": 24})
+
+goto: "file://" + |DOC_PATH| + "/test_docs/struct.TypeWithNoDocblocks.html"
+// Check that the two methods are more than 24px apart.
+compare-elements-position-near-false: ("//*[@id='method.first_fn']", "//*[@id='method.second_fn']", {"y": 24})
diff --git a/tests/rustdoc-gui/notable-trait.goml b/tests/rustdoc-gui/notable-trait.goml
new file mode 100644
index 00000000000..b4fa7d0dbf0
--- /dev/null
+++ b/tests/rustdoc-gui/notable-trait.goml
@@ -0,0 +1,276 @@
+// This test checks the position of the `i` for the notable traits.
+goto: "file://" + |DOC_PATH| + "/test_docs/struct.NotableStructWithLongName.html"
+show-text: true
+// We start with a wide screen.
+size: (1100, 600)
+// Checking they have the same y position.
+compare-elements-position: (
+    "//*[@id='method.create_an_iterator_from_read']//a[text()='NotableStructWithLongName']",
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    ("y"),
+)
+// Checking they don't have the same x position.
+compare-elements-position-false: (
+    "//*[@id='method.create_an_iterator_from_read']//a[text()='NotableStructWithLongName']",
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    ("x"),
+)
+// The `i` should be *after* the type.
+assert-position: (
+    "//*[@id='method.create_an_iterator_from_read']//a[text()='NotableStructWithLongName']",
+    {"x": 677},
+)
+assert-position: (
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    {"x": 955},
+)
+// The tooltip should be below the `i`
+// Also, clicking the tooltip should bring its text into the DOM
+assert-count: ("//*[@class='notable popover']", 0)
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
+assert-count: ("//*[@class='notable popover']", 1)
+compare-elements-position-near: (
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    "//*[@class='notable popover']",
+    {"y": 30}
+)
+compare-elements-position-false: (
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    "//*[@class='notable popover']",
+    ("x")
+)
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
+move-cursor-to: "//h1"
+assert-count: ("//*[@class='notable popover']", 0)
+
+// Now only the `i` should be on the next line.
+size: (1055, 600)
+compare-elements-position-false: (
+    "//*[@id='method.create_an_iterator_from_read']//a[text()='NotableStructWithLongName']",
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    ("y", "x"),
+)
+
+// Now both the `i` and the struct name should be on the next line.
+size: (980, 600)
+// Checking they have the same y position.
+compare-elements-position: (
+    "//*[@id='method.create_an_iterator_from_read']//a[text()='NotableStructWithLongName']",
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    ("y"),
+)
+// Checking they don't have the same x position.
+compare-elements-position-false: (
+    "//*[@id='method.create_an_iterator_from_read']//a[text()='NotableStructWithLongName']",
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    ("x"),
+)
+// The `i` should be *after* the type.
+assert-position: (
+    "//*[@id='method.create_an_iterator_from_read']//a[text()='NotableStructWithLongName']",
+    {"x": 245},
+)
+assert-position: (
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    {"x": 523},
+)
+
+// Checking on mobile now.
+size: (650, 600)
+// Checking they have the same y position.
+compare-elements-position: (
+    "//*[@id='method.create_an_iterator_from_read']//a[text()='NotableStructWithLongName']",
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    ("y"),
+)
+// Checking they don't have the same x position.
+compare-elements-position-false: (
+    "//*[@id='method.create_an_iterator_from_read']//a[text()='NotableStructWithLongName']",
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    ("x"),
+)
+// The `i` should be *after* the type.
+assert-position: (
+    "//*[@id='method.create_an_iterator_from_read']//a[text()='NotableStructWithLongName']",
+    {"x": 15},
+)
+assert-position: (
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    {"x": 293},
+)
+// The tooltip should STILL be below `i`
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
+assert-count: ("//*[@class='notable popover']", 1)
+compare-elements-position-near: (
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    "//*[@class='notable popover']",
+    {"y": 30}
+)
+compare-elements-position-false: (
+    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
+    "//*[@class='notable popover']",
+    ("x")
+)
+assert-position: (
+    "//*[@class='notable popover']",
+    {"x": 0}
+)
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
+move-cursor-to: "//h1"
+assert-count: ("//*[@class='notable popover']", 0)
+
+// Now check the colors.
+define-function: (
+    "check-colors",
+    (theme, header_color, content_color, type_color, trait_color),
+    block {
+        goto: "file://" + |DOC_PATH| + "/test_docs/struct.NotableStructWithLongName.html"
+        // This is needed to ensure that the text color is computed.
+        show-text: true
+
+        // Setting the theme.
+        local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
+        // We reload the page so the local storage settings are being used.
+        reload:
+
+        move-cursor-to: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
+        assert-count: (".notable.popover", 1)
+
+        assert-css: (
+             ".notable.popover h3",
+             {"color": |header_color|},
+             ALL,
+        )
+        assert-css: (
+             ".notable.popover pre",
+             {"color": |content_color|},
+             ALL,
+        )
+        assert-css: (
+             ".notable.popover pre a.struct",
+             {"color": |type_color|},
+             ALL,
+        )
+        assert-css: (
+             ".notable.popover pre a.trait",
+             {"color": |trait_color|},
+             ALL,
+        )
+    },
+)
+
+call-function: (
+    "check-colors",
+    {
+        "theme": "ayu",
+        "content_color": "rgb(230, 225, 207)",
+        "header_color": "rgb(255, 255, 255)",
+        "type_color": "rgb(255, 160, 165)",
+        "trait_color": "rgb(57, 175, 215)",
+    },
+)
+
+call-function: (
+    "check-colors",
+    {
+        "theme": "dark",
+        "content_color": "rgb(221, 221, 221)",
+        "header_color": "rgb(221, 221, 221)",
+        "type_color": "rgb(45, 191, 184)",
+        "trait_color": "rgb(183, 140, 242)",
+    },
+)
+
+call-function: (
+    "check-colors",
+    {
+        "theme": "light",
+        "content_color": "rgb(0, 0, 0)",
+        "header_color": "rgb(0, 0, 0)",
+        "type_color": "rgb(173, 55, 138)",
+        "trait_color": "rgb(110, 79, 201)",
+    },
+)
+
+reload:
+
+// Check that pressing escape works
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
+move-cursor-to: "//*[@class='notable popover']"
+assert-count: ("//*[@class='notable popover']", 1)
+press-key: "Escape"
+assert-count: ("//*[@class='notable popover']", 0)
+assert: "#method\.create_an_iterator_from_read .notable-traits:focus"
+
+// Check that clicking outside works.
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
+assert-count: ("//*[@class='notable popover']", 1)
+click: ".search-input"
+assert-count: ("//*[@class='notable popover']", 0)
+assert-false: "#method\.create_an_iterator_from_read .notable-traits:focus"
+
+// Check that pressing tab over and over works.
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
+move-cursor-to: "//*[@class='notable popover']"
+assert-count: ("//*[@class='notable popover']", 1)
+press-key: "Tab"
+press-key: "Tab"
+press-key: "Tab"
+press-key: "Tab"
+press-key: "Tab"
+press-key: "Tab"
+press-key: "Tab"
+assert-count: ("//*[@class='notable popover']", 0)
+assert: "#method\.create_an_iterator_from_read .notable-traits:focus"
+
+// Now we check that the focus isn't given back to the wrong item when opening
+// another popover.
+store-window-property: (scroll, "scrollY")
+click: "#method\.create_an_iterator_from_read .fn"
+// We ensure that the scroll position changed.
+assert-window-property-false: {"scrollY": |scroll|}
+// Store the new position.
+store-window-property: (scroll, "scrollY")
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
+wait-for: "//*[@class='notable popover']"
+click: "#settings-menu a"
+click: ".search-input"
+// We ensure we didn't come back to the previous focused item.
+assert-window-property-false: {"scrollY": |scroll|}
+
+// Same but with Escape handling.
+store-window-property: (scroll, "scrollY")
+click: "#method\.create_an_iterator_from_read .fn"
+// We ensure that the scroll position changed.
+assert-window-property-false: {"scrollY": |scroll|}
+// Store the new position.
+store-window-property: (scroll, "scrollY")
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
+wait-for: "//*[@class='notable popover']"
+click: "#settings-menu a"
+press-key: "Escape"
+// We ensure we didn't come back to the previous focused item.
+assert-window-property-false: {"scrollY": |scroll|}
+
+// Opening the mobile sidebar should close the popover.
+size: (650, 600)
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
+assert-count: ("//*[@class='notable popover']", 1)
+click: ".sidebar-menu-toggle"
+assert: "//*[@class='sidebar shown']"
+assert-count: ("//*[@class='notable popover']", 0)
+assert-false: "#method\.create_an_iterator_from_read .notable-traits:focus"
+// Clicking a notable popover should close the sidebar.
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
+assert-count: ("//*[@class='notable popover']", 1)
+assert-false: "//*[@class='sidebar shown']"
+
+// Also check the focus handling for the help button.
+size: (1100, 600)
+reload:
+assert-count: ("//*[@class='notable popover']", 0)
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
+assert-count: ("//*[@class='notable popover']", 1)
+click: "#help-button a"
+assert-count: ("//*[@class='notable popover']", 0)
+assert-false: "#method\.create_an_iterator_from_read .notable-traits:focus"
diff --git a/tests/rustdoc-gui/overflow-tooltip-information.goml b/tests/rustdoc-gui/overflow-tooltip-information.goml
new file mode 100644
index 00000000000..09ad6cdd7ac
--- /dev/null
+++ b/tests/rustdoc-gui/overflow-tooltip-information.goml
@@ -0,0 +1,8 @@
+// The goal of this test is to ensure that the tooltip `.information` class doesn't
+// have overflow and max-width CSS rules set because they create a bug in firefox on
+// mac. For more information: https://github.com/rust-lang/rust/issues/89185
+goto: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html"
+assert-css: (".docblock > .example-wrap .tooltip", {
+    "overflow-x": "visible",
+    "max-width": "none"
+}, ALL)
diff --git a/tests/rustdoc-gui/pocket-menu.goml b/tests/rustdoc-gui/pocket-menu.goml
new file mode 100644
index 00000000000..c3649dc7bda
--- /dev/null
+++ b/tests/rustdoc-gui/pocket-menu.goml
@@ -0,0 +1,98 @@
+// This test ensures that the "pocket menus" are working as expected.
+goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
+// First we check that the help menu doesn't exist yet.
+assert-false: "#help-button .popover"
+// Then we display the help menu.
+click: "#help-button"
+assert: "#help-button .popover"
+assert-css: ("#help-button .popover", {"display": "block"})
+
+// Now we click somewhere else on the page to ensure it is handling the blur event
+// correctly.
+click: ".sidebar"
+assert-css: ("#help-button .popover", {"display": "none"})
+
+// Now we will check that we cannot have two "pocket menus" displayed at the same time.
+click: "#help-button"
+assert-css: ("#help-button .popover", {"display": "block"})
+click: "#settings-menu"
+assert-css: ("#help-button .popover", {"display": "none"})
+assert-css: ("#settings-menu .popover", {"display": "block"})
+
+// Now the other way.
+click: "#help-button"
+assert-css: ("#help-button .popover", {"display": "block"})
+assert-css: ("#settings-menu .popover", {"display": "none"})
+
+// Now verify that clicking the help menu again closes it.
+click: "#help-button"
+assert-css: ("#help-button .popover", {"display": "none"})
+assert-css: ("#settings-menu .popover", {"display": "none"})
+
+// We check the borders color now:
+
+// Ayu theme
+local-storage: {
+    "rustdoc-theme": "ayu",
+    "rustdoc-use-system-theme": "false",
+}
+reload:
+
+click: "#help-button"
+assert-css: (
+    "#help-button .popover",
+    {"display": "block", "border-color": "rgb(92, 103, 115)"},
+)
+compare-elements-css: ("#help-button .popover", "#help-button .top", ["border-color"])
+compare-elements-css: ("#help-button .popover", "#help-button .bottom", ["border-color"])
+
+// Dark theme
+local-storage: {
+    "rustdoc-theme": "dark",
+    "rustdoc-use-system-theme": "false",
+}
+reload:
+
+click: "#help-button"
+assert-css: (
+    "#help-button .popover",
+    {"display": "block", "border-color": "rgb(224, 224, 224)"},
+)
+compare-elements-css: ("#help-button .popover", "#help-button .top", ["border-color"])
+compare-elements-css: ("#help-button .popover", "#help-button .bottom", ["border-color"])
+
+// Light theme
+local-storage: {
+    "rustdoc-theme": "light",
+    "rustdoc-use-system-theme": "false",
+}
+reload:
+
+click: "#help-button"
+assert-css: (
+    "#help-button .popover",
+    {"display": "block", "border-color": "rgb(224, 224, 224)"},
+)
+compare-elements-css: ("#help-button .popover", "#help-button .top", ["border-color"])
+compare-elements-css: ("#help-button .popover", "#help-button .bottom", ["border-color"])
+
+// Opening the mobile sidebar should close the settings popover.
+size: (650, 600)
+click: "#settings-menu a"
+assert-css: ("#settings-menu .popover", {"display": "block"})
+click: ".sidebar-menu-toggle"
+assert: "//*[@class='sidebar shown']"
+assert-css: ("#settings-menu .popover", {"display": "none"})
+// Opening the settings popover should close the sidebar.
+click: "#settings-menu a"
+assert-css: ("#settings-menu .popover", {"display": "block"})
+assert-false: "//*[@class='sidebar shown']"
+
+// Opening the settings popover at start (which async loads stuff) should also close.
+reload:
+click: ".sidebar-menu-toggle"
+assert: "//*[@class='sidebar shown']"
+assert-false: "#settings-menu .popover"
+click: "#settings-menu a"
+assert-false: "//*[@class='sidebar shown']"
+wait-for: "#settings-menu .popover"
diff --git a/tests/rustdoc-gui/run-on-hover.goml b/tests/rustdoc-gui/run-on-hover.goml
new file mode 100644
index 00000000000..8dcb62c10aa
--- /dev/null
+++ b/tests/rustdoc-gui/run-on-hover.goml
@@ -0,0 +1,54 @@
+// Example code blocks sometimes have a "Run" button to run them on the
+// Playground. That button is hidden until the user hovers over the code block.
+// This test checks that it is hidden, and that it shows on hover. It also
+// checks for its color.
+goto: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html"
+show-text: true
+
+define-function: (
+    "check-run-button",
+    (theme, color, background, hover_color, hover_background),
+    block {
+        local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
+        reload:
+        assert-css: (".test-arrow", {"visibility": "hidden"})
+        move-cursor-to: ".example-wrap"
+        assert-css: (".test-arrow", {
+            "visibility": "visible",
+            "color": |color|,
+            "background-color": |background|,
+            "font-size": "22px",
+            "border-radius": "5px",
+        })
+        move-cursor-to: ".test-arrow"
+        assert-css: (".test-arrow:hover", {
+            "visibility": "visible",
+            "color": |hover_color|,
+            "background-color": |hover_background|,
+            "font-size": "22px",
+            "border-radius": "5px",
+        })
+    },
+)
+
+call-function: ("check-run-button", {
+    "theme": "ayu",
+    "color": "rgb(120, 135, 151)",
+    "background": "rgba(57, 175, 215, 0.09)",
+    "hover_color": "rgb(197, 197, 197)",
+    "hover_background": "rgba(57, 175, 215, 0.37)",
+})
+call-function: ("check-run-button", {
+    "theme": "dark",
+    "color": "rgb(222, 222, 222)",
+    "background": "rgba(78, 139, 202, 0.2)",
+    "hover_color": "rgb(222, 222, 222)",
+    "hover_background": "rgb(78, 139, 202)",
+})
+call-function: ("check-run-button", {
+    "theme": "light",
+    "color": "rgb(245, 245, 245)",
+    "background": "rgba(78, 139, 202, 0.2)",
+    "hover_color": "rgb(245, 245, 245)",
+    "hover_background": "rgb(78, 139, 202)",
+})
diff --git a/tests/rustdoc-gui/rust-logo.goml b/tests/rustdoc-gui/rust-logo.goml
new file mode 100644
index 00000000000..2d15e8b9699
--- /dev/null
+++ b/tests/rustdoc-gui/rust-logo.goml
@@ -0,0 +1,58 @@
+// This test ensures that the correct style is applied to the rust logo in the sidebar.
+goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
+
+define-function: (
+    "check-logo",
+    (theme, filter),
+    block {
+        // Going to the doc page.
+        goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
+        // Changing theme.
+        local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
+        reload:
+        assert-css: (".rust-logo", {"filter": |filter|})
+        // Going to the source code page.
+        goto: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
+        // Changing theme (since it's local files, the local storage works by folder).
+        local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
+        reload:
+        assert-css: (".rust-logo", {"filter": |filter|})
+        // Now we check that the non-rust logos don't have a CSS filter set.
+        goto: "file://" + |DOC_PATH| + "/huge_logo/index.html"
+        // Changing theme on the new page (again...).
+        local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
+        reload:
+        // Check there is no rust logo
+        assert-false: ".rust-logo"
+        // Check there is no filter.
+        assert-css: (".sidebar .logo-container img", {"filter": "none"})
+    },
+)
+
+call-function: (
+    "check-logo",
+    {
+        "theme": "ayu",
+        "filter": "drop-shadow(rgb(255, 255, 255) 1px 0px 0px) " +
+            "drop-shadow(rgb(255, 255, 255) 0px 1px 0px) " +
+            "drop-shadow(rgb(255, 255, 255) -1px 0px 0px) " +
+            "drop-shadow(rgb(255, 255, 255) 0px -1px 0px)",
+    },
+)
+call-function: (
+    "check-logo",
+    {
+        "theme": "dark",
+        "filter": "drop-shadow(rgb(255, 255, 255) 1px 0px 0px) " +
+            "drop-shadow(rgb(255, 255, 255) 0px 1px 0px) " +
+            "drop-shadow(rgb(255, 255, 255) -1px 0px 0px) " +
+            "drop-shadow(rgb(255, 255, 255) 0px -1px 0px)",
+    },
+)
+call-function: (
+    "check-logo",
+    {
+        "theme": "light",
+        "filter": "none",
+    },
+)
diff --git a/tests/rustdoc-gui/scrape-examples-button-focus.goml b/tests/rustdoc-gui/scrape-examples-button-focus.goml
new file mode 100644
index 00000000000..10651a3f669
--- /dev/null
+++ b/tests/rustdoc-gui/scrape-examples-button-focus.goml
@@ -0,0 +1,29 @@
+goto: "file://" + |DOC_PATH| + "/scrape_examples/fn.test.html"
+
+// The next/prev buttons vertically scroll the code viewport between examples
+store-property: (initialScrollTop, ".scraped-example-list > .scraped-example pre", "scrollTop")
+focus: ".scraped-example-list > .scraped-example .next"
+press-key: "Enter"
+assert-property-false: (".scraped-example-list > .scraped-example pre", {
+    "scrollTop": |initialScrollTop|
+})
+focus: ".scraped-example-list > .scraped-example .prev"
+press-key: "Enter"
+assert-property: (".scraped-example-list > .scraped-example pre", {
+    "scrollTop": |initialScrollTop|
+})
+
+// The expand button increases the scrollHeight of the minimized code viewport
+store-property: (smallOffsetHeight, ".scraped-example-list > .scraped-example pre", "offsetHeight")
+assert-property-false: (".scraped-example-list > .scraped-example pre", {
+    "scrollHeight": |smallOffsetHeight|
+})
+focus: ".scraped-example-list > .scraped-example .expand"
+press-key: "Enter"
+assert-property-false: (".scraped-example-list > .scraped-example pre", {
+    "offsetHeight": |smallOffsetHeight|
+})
+store-property: (fullOffsetHeight, ".scraped-example-list > .scraped-example pre", "offsetHeight")
+assert-property: (".scraped-example-list > .scraped-example pre", {
+    "scrollHeight": |fullOffsetHeight|
+})
diff --git a/tests/rustdoc-gui/scrape-examples-color.goml b/tests/rustdoc-gui/scrape-examples-color.goml
new file mode 100644
index 00000000000..40f31b2771b
--- /dev/null
+++ b/tests/rustdoc-gui/scrape-examples-color.goml
@@ -0,0 +1,60 @@
+// Check that scrape example code blocks have the expected colors.
+goto: "file://" + |DOC_PATH| + "/scrape_examples/fn.test_many.html"
+show-text: true
+
+define-function: (
+    "check-colors",
+    (theme, highlight, highlight_focus, help_border, help_color, help_hover_border,
+     help_hover_color),
+    block {
+        local-storage: { "rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false", }
+        reload:
+        wait-for: ".more-examples-toggle"
+        assert-css: (".scraped-example .example-wrap .rust span.highlight:not(.focus)", {
+            "background-color": |highlight|,
+        }, ALL)
+        assert-css: (".scraped-example .example-wrap .rust span.highlight.focus", {
+            "background-color": |highlight_focus|,
+        }, ALL)
+
+        assert-css: (".scraped-example-list .scrape-help", {
+            "border-color": |help_border|,
+            "color": |help_color|,
+        })
+        move-cursor-to: ".scraped-example-list .scrape-help"
+        assert-css: (".scraped-example-list .scrape-help:hover", {
+            "border-color": |help_hover_border|,
+            "color": |help_hover_color|,
+        })
+        // Moving the cursor to another item to not break next runs.
+        move-cursor-to: ".search-input"
+    }
+)
+
+call-function: ("check-colors", {
+    "theme": "ayu",
+    "highlight": "rgb(91, 59, 1)",
+    "highlight_focus": "rgb(124, 75, 15)",
+    "help_border": "rgb(170, 170, 170)",
+    "help_color": "rgb(238, 238, 238)",
+    "help_hover_border": "rgb(255, 255, 255)",
+    "help_hover_color": "rgb(255, 255, 255)",
+})
+call-function: ("check-colors", {
+    "theme": "dark",
+    "highlight": "rgb(91, 59, 1)",
+    "highlight_focus": "rgb(124, 75, 15)",
+    "help_border": "rgb(170, 170, 170)",
+    "help_color": "rgb(238, 238, 238)",
+    "help_hover_border": "rgb(255, 255, 255)",
+    "help_hover_color": "rgb(255, 255, 255)",
+})
+call-function: ("check-colors", {
+    "theme": "light",
+    "highlight": "rgb(252, 255, 214)",
+    "highlight_focus": "rgb(246, 253, 176)",
+    "help_border": "rgb(85, 85, 85)",
+    "help_color": "rgb(51, 51, 51)",
+    "help_hover_border": "rgb(0, 0, 0)",
+    "help_hover_color": "rgb(0, 0, 0)",
+})
diff --git a/tests/rustdoc-gui/scrape-examples-fonts.goml b/tests/rustdoc-gui/scrape-examples-fonts.goml
new file mode 100644
index 00000000000..142f337cb74
--- /dev/null
+++ b/tests/rustdoc-gui/scrape-examples-fonts.goml
@@ -0,0 +1,9 @@
+// This test ensures that the correct font is used in scraped examples.
+goto: "file://" + |DOC_PATH| + "/scrape_examples/fn.test_many.html"
+
+store-value: (font, '"Fira Sans", Arial, NanumBarunGothic, sans-serif')
+
+wait-for-css: (".scraped-example-title", {"font-family": |font|})
+wait-for-css: (".more-examples-toggle summary", {"font-family": |font|})
+wait-for-css: (".more-examples-toggle .hide-more", {"font-family": |font|})
+wait-for-css: (".example-links a", {"font-family": |font|})
diff --git a/tests/rustdoc-gui/scrape-examples-layout.goml b/tests/rustdoc-gui/scrape-examples-layout.goml
new file mode 100644
index 00000000000..95102528ec1
--- /dev/null
+++ b/tests/rustdoc-gui/scrape-examples-layout.goml
@@ -0,0 +1,49 @@
+// Check that the line number column has the correct layout.
+goto: "file://" + |DOC_PATH| + "/scrape_examples/fn.test_many.html"
+
+// Check that it's not zero.
+assert-property-false: (
+    ".more-scraped-examples .scraped-example .code-wrapper .src-line-numbers",
+    {"clientWidth": "0"}
+)
+
+// Check that examples with very long lines have the same width as ones that don't.
+store-property: (
+    clientWidth,
+    ".more-scraped-examples .scraped-example:nth-child(2) .code-wrapper .src-line-numbers",
+    "clientWidth"
+)
+
+assert-property: (
+    ".more-scraped-examples .scraped-example:nth-child(3) .code-wrapper .src-line-numbers",
+    {"clientWidth": |clientWidth|}
+)
+
+assert-property: (
+    ".more-scraped-examples .scraped-example:nth-child(4) .code-wrapper .src-line-numbers",
+    {"clientWidth": |clientWidth|}
+)
+
+assert-property: (
+    ".more-scraped-examples .scraped-example:nth-child(5) .code-wrapper .src-line-numbers",
+    {"clientWidth": |clientWidth|}
+)
+
+assert-property: (
+    ".more-scraped-examples .scraped-example:nth-child(6) .code-wrapper .src-line-numbers",
+    {"clientWidth": |clientWidth|}
+)
+
+// Check that for both mobile and desktop sizes, the buttons in scraped examples are displayed
+// correctly.
+
+store-value: (offset_y, 4)
+
+// First with desktop
+assert-position: (".scraped-example .code-wrapper", {"y": 255})
+assert-position: (".scraped-example .code-wrapper .prev", {"y": 255 + |offset_y|})
+
+// Then with mobile
+size: (600, 600)
+assert-position: (".scraped-example .code-wrapper", {"y": 314})
+assert-position: (".scraped-example .code-wrapper .prev", {"y": 314 + |offset_y|})
diff --git a/tests/rustdoc-gui/scrape-examples-toggle.goml b/tests/rustdoc-gui/scrape-examples-toggle.goml
new file mode 100644
index 00000000000..2d5df6a5d25
--- /dev/null
+++ b/tests/rustdoc-gui/scrape-examples-toggle.goml
@@ -0,0 +1,51 @@
+// This tests checks that the "scraped examples" toggle is working as expected.
+goto: "file://" + |DOC_PATH| + "/scrape_examples/fn.test_many.html"
+
+// Checking the color of the toggle line.
+show-text: true
+define-function: (
+    "check-color",
+    (theme, toggle_line_color, toggle_line_hover_color),
+    block {
+        local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
+        reload:
+
+        // Clicking "More examples..." will open additional examples
+        assert-attribute-false: (".more-examples-toggle", {"open": ""})
+        click: ".more-examples-toggle"
+        assert-attribute: (".more-examples-toggle", {"open": ""})
+
+        assert-css: (".toggle-line-inner", {"background-color": |toggle_line_color|}, ALL)
+        move-cursor-to: ".toggle-line"
+        assert-css: (
+            ".toggle-line:hover .toggle-line-inner",
+            {"background-color": |toggle_line_hover_color|},
+        )
+        // Moving cursor away from the toggle line to prevent disrupting next test.
+        move-cursor-to: ".search-input"
+    },
+)
+
+call-function: ("check-color", {
+    "theme": "ayu",
+    "toggle_line_color": "rgb(153, 153, 153)",
+    "toggle_line_hover_color": "rgb(197, 197, 197)",
+})
+call-function: ("check-color", {
+    "theme": "dark",
+    "toggle_line_color": "rgb(153, 153, 153)",
+    "toggle_line_hover_color": "rgb(197, 197, 197)",
+})
+call-function: ("check-color", {
+    "theme": "light",
+    "toggle_line_color": "rgb(204, 204, 204)",
+    "toggle_line_hover_color": "rgb(153, 153, 153)",
+})
+
+// Toggling all docs will close additional examples
+click: "#toggle-all-docs"
+assert-attribute-false: (".more-examples-toggle", {"open": ""})
+
+// After re-opening the docs, the additional examples should stay closed
+click: "#toggle-all-docs"
+assert-attribute-false: (".more-examples-toggle", {"open": ""})
diff --git a/tests/rustdoc-gui/search-filter.goml b/tests/rustdoc-gui/search-filter.goml
new file mode 100644
index 00000000000..5bc6e87d6d2
--- /dev/null
+++ b/tests/rustdoc-gui/search-filter.goml
@@ -0,0 +1,87 @@
+// Checks that the crate search filtering is handled correctly and changes the results.
+goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
+show-text: true
+write: (".search-input", "test")
+// To be SURE that the search will be run.
+press-key: 'Enter'
+// Waiting for the search results to appear...
+wait-for: "#search-tabs"
+assert-text: ("#results .externcrate", "test_docs")
+
+wait-for: "#crate-search"
+// We now want to change the crate filter.
+click: "#crate-search"
+// We select "lib2" option then press enter to change the filter.
+press-key: "ArrowDown"
+press-key: "ArrowDown"
+press-key: "ArrowDown"
+press-key: "ArrowDown"
+press-key: "Enter"
+// Waiting for the search results to appear...
+wait-for: "#search-tabs"
+assert-document-property: ({"URL": "&filter-crate="}, CONTAINS)
+// We check that there is no more "test_docs" appearing.
+assert-false: "#results .externcrate"
+// We also check that "lib2" is the filter crate.
+assert-property: ("#crate-search", {"value": "lib2"})
+
+// Now we check that leaving the search results and putting them back keeps the
+// crate filtering.
+press-key: "Escape"
+wait-for-css: ("#main-content", {"display": "block"})
+focus: ".search-input"
+wait-for-css: ("#main-content", {"display": "none"})
+// We check that there is no more "test_docs" appearing.
+assert-false: "#results .externcrate"
+assert-property: ("#crate-search", {"value": "lib2"})
+
+// Selecting back "All crates"
+click: "#crate-search"
+press-key: "ArrowUp"
+press-key: "ArrowUp"
+press-key: "ArrowUp"
+press-key: "ArrowUp"
+press-key: "Enter"
+// Waiting for the search results to appear...
+wait-for: "#search-tabs"
+assert-property: ("#crate-search", {"value": "all crates"})
+
+// Checking that the URL parameter is taken into account for crate filtering.
+goto: "file://" + |DOC_PATH| + "/test_docs/index.html?search=test&filter-crate=lib2"
+wait-for: "#crate-search"
+assert-property: ("#crate-search", {"value": "lib2"})
+assert-false: "#results .externcrate"
+
+// Checking that the text for the "title" is correct (the "all crates" comes from the "` is correctly handled when it goes to next line.
+// To do so we need to update the length of one of its `