1 files changed, 37 insertions, 9 deletions
diff --git a/tests/rustdoc-gui/search-result-display.goml b/tests/rustdoc-gui/search-result-display.goml
index ee5598e4b..6ce13b8c3 100644
--- a/tests/rustdoc-gui/search-result-display.goml
+++ b/tests/rustdoc-gui/search-result-display.goml
@@ -1,3 +1,4 @@
+// ignore-tidy-linelength
 // Checks that the search results have the expected width.
 go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
 set-window-size: (900, 1000)
@@ -7,14 +8,41 @@ press-key: 'Enter'
 wait-for: "#crate-search"
 // The width is returned by "getComputedStyle" which returns the exact number instead of the
 // CSS rule which is "50%"...
-assert-css: (".search-results div.desc", {"width": "310px"})
+assert-size: (".search-results div.desc", {"width": 248})
+store-size: (".search-results .result-name .typename", {"width": width})
 set-window-size: (600, 100)
 // As counter-intuitive as it may seem, in this width, the width is "100%", which is why
 // when computed it's larger.
-assert-css: (".search-results div.desc", {"width": "566px"})
+assert-size: (".search-results div.desc", {"width": 566})
 
 // The result set is all on one line.
-assert-css: (".search-results .result-name > span", {"display": "inline"})
+compare-elements-position-near: (
+    ".search-results .result-name .typename",
+    ".search-results .result-name .path",
+    {"y": 2},
+)
+compare-elements-position-near-false: (
+    ".search-results .result-name .typename",
+    ".search-results .result-name .path",
+    {"x": 5},
+)
+// The width of the "typename" isn't fixed anymore in this display mode.
+store-size: (".search-results .result-name .typename", {"width": new_width})
+assert: |new_width| < |width| - 10
+
+// Check that if the search is too long on mobile, it'll go under the "typename".
+go-to: "file://" + |DOC_PATH| + "/test_docs/index.html?search=SuperIncrediblyLongLongLongLongLongLongLongGigaGigaGigaMegaLongLongLongStructName"
+wait-for: "#crate-search"
+compare-elements-position-near: (
+    ".search-results .result-name .typename",
+    ".search-results .result-name .path",
+    {"y": 2, "x": 0},
+)
+compare-elements-size-near: (
+    ".search-results .result-name",
+    ".search-results .result-name .path",
+    {"width": 8, "height": 8},
+)
 
 // Check that the crate filter `<select>` is correctly handled when it goes to next line.
 // To do so we need to update the length of one of its `<option>`.
@@ -57,22 +85,22 @@ define-function: (
 
 call-function: ("check-filter", {
     "theme": "ayu",
-    "border": "rgb(92, 103, 115)",
+    "border": "#5c6773",
     "filter": "invert(0.41) sepia(0.12) saturate(4.87) hue-rotate(171deg) brightness(0.94) contrast(0.94)",
-    "hover_border": "rgb(224, 224, 224)",
+    "hover_border": "#e0e0e0",
     "hover_filter": "invert(0.98) sepia(0.12) saturate(0.81) hue-rotate(343deg) brightness(1.13) contrast(0.76)",
 })
 call-function: ("check-filter", {
     "theme": "dark",
-    "border": "rgb(224, 224, 224)",
+    "border": "#e0e0e0",
     "filter": "invert(0.94) sepia(0) saturate(7.21) hue-rotate(255deg) brightness(0.9) contrast(0.9)",
-    "hover_border": "rgb(33, 150, 243)",
+    "hover_border": "#2196f3",
     "hover_filter": "invert(0.69) sepia(0.6) saturate(66.13) hue-rotate(184deg) brightness(1) contrast(0.91)",
 })
 call-function: ("check-filter", {
     "theme": "light",
-    "border": "rgb(224, 224, 224)",
+    "border": "#e0e0e0",
     "filter": "invert(1) sepia(0) saturate(42.23) hue-rotate(289deg) brightness(1.14) contrast(0.76)",
-    "hover_border": "rgb(113, 113, 113)",
+    "hover_border": "#717171",
     "hover_filter": "invert(0.44) sepia(0.18) saturate(0.23) hue-rotate(317deg) brightness(0.96) contrast(0.93)",
 })