Extend GUI test to check hover and focus on search results

1 files changed, 597 insertions, 44 deletions

diff --git a/src/test/rustdoc-gui/search-result-color.goml b/src/test/rustdoc-gui/search-result-color.goml
index c4b5fdf53dd..807646cce37 100644
--- a/src/test/rustdoc-gui/search-result-color.goml
+++ b/src/test/rustdoc-gui/search-result-color.goml
@@ -30,54 +30,243 @@ assert-css: (
 
 // Checking the color of "keyword".
 assert-css: (
-    ".result-name .keyword",
+    ".result-keyword .keyword",
     {"color": "rgb(57, 175, 215)"},
     ALL,
 )
+assert-css: (
+    ".result-keyword",
+    {"color": "rgb(0, 150, 207)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".result-keyword"
+assert-css: (
+    ".result-keyword:hover",
+    {"color": "rgb(255, 255, 255)", "background-color": "rgb(60, 60, 60)"},
+)
+assert-css: (
+    ".result-keyword:hover .keyword",
+    {"color": "rgb(57, 175, 215)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-keyword"
+assert-css: (
+    ".result-keyword:focus",
+    {"color": "rgb(255, 255, 255)", "background-color": "rgb(60, 60, 60)"},
+)
+assert-css: (
+    ".result-keyword:focus .keyword",
+    {"color": "rgb(57, 175, 215)"},
+)
+
 // Check the color of "struct".
 assert-css: (
-    ".result-name .struct",
+    ".result-struct .struct",
     {"color": "rgb(255, 160, 165)"},
     ALL,
 )
+assert-css: (
+    ".result-struct",
+    {"color": "rgb(0, 150, 207)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".result-struct"
+assert-css: (
+    ".result-struct:hover",
+    {"color": "rgb(255, 255, 255)", "background-color": "rgb(60, 60, 60)"},
+)
+assert-css: (
+    ".result-struct:hover .struct",
+    {"color": "rgb(255, 160, 165)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-struct"
+assert-css: (
+    ".result-struct:focus",
+    {"color": "rgb(255, 255, 255)", "background-color": "rgb(60, 60, 60)"},
+)
+assert-css: (
+    ".result-struct:focus .struct",
+    {"color": "rgb(255, 160, 165)"},
+)
+
 // Check the color of "associated type".
 assert-css: (
-    ".result-name .associatedtype",
+    ".result-associatedtype .associatedtype",
     {"color": "rgb(57, 175, 215)"},
     ALL,
 )
+assert-css: (
+    ".result-associatedtype",
+    {"color": "rgb(0, 150, 207)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".result-associatedtype"
+assert-css: (
+    ".result-associatedtype:hover",
+    {"color": "rgb(255, 255, 255)", "background-color": "rgb(60, 60, 60)"},
+)
+assert-css: (
+    ".result-associatedtype:hover .associatedtype",
+    {"color": "rgb(57, 175, 215)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-associatedtype"
+assert-css: (
+    ".result-associatedtype:focus",
+    {"color": "rgb(255, 255, 255)", "background-color": "rgb(60, 60, 60)"},
+)
+assert-css: (
+    ".result-associatedtype:focus .associatedtype",
+    {"color": "rgb(57, 175, 215)"},
+)
+
 // Check the color of "type method".
 assert-css: (
-    ".result-name .tymethod",
+    ".result-tymethod .tymethod",
     {"color": "rgb(253, 214, 135)"},
     ALL,
 )
+assert-css: (
+    ".result-tymethod",
+    {"color": "rgb(0, 150, 207)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+assert-css: (
+    ".result-tymethod .tymethod",
+    {"color": "rgb(253, 214, 135)"},
+)
+move-cursor-to: ".result-tymethod"
+assert-css: (
+    ".result-tymethod:hover",
+    {"color": "rgb(255, 255, 255)", "background-color": "rgb(60, 60, 60)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-tymethod"
+assert-css: (
+    ".result-tymethod:focus",
+    {"color": "rgb(255, 255, 255)", "background-color": "rgb(60, 60, 60)"},
+)
+
 // Check the color of "method".
 assert-css: (
-    ".result-name .method",
+    ".result-method .method",
     {"color": "rgb(253, 214, 135)"},
     ALL,
 )
+assert-css: (
+    ".result-method",
+    {"color": "rgb(0, 150, 207)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".result-method"
+assert-css: (
+    ".result-method:hover",
+    {"color": "rgb(255, 255, 255)", "background-color": "rgb(60, 60, 60)"},
+)
+assert-css: (
+    ".result-method:hover .method",
+    {"color": "rgb(253, 214, 135)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-method"
+assert-css: (
+    ".result-method:focus",
+    {"color": "rgb(255, 255, 255)", "background-color": "rgb(60, 60, 60)"},
+)
+assert-css: (
+    ".result-method:focus .method",
+    {"color": "rgb(253, 214, 135)"},
+)
+
 // Check the color of "struct field".
 assert-css: (
-    ".result-name .structfield",
+    ".result-structfield .structfield",
     {"color": "rgb(0, 150, 207)"},
     ALL,
 )
+assert-css: (
+    ".result-structfield",
+    {"color": "rgb(0, 150, 207)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".result-structfield"
+assert-css: (
+    ".result-structfield:hover",
+    {"color": "rgb(255, 255, 255)", "background-color": "rgb(60, 60, 60)"},
+)
+assert-css: (
+    ".result-structfield:hover .structfield",
+    {"color": "rgb(255, 255, 255)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-structfield"
+assert-css: (
+    ".result-structfield:focus",
+    {"color": "rgb(255, 255, 255)", "background-color": "rgb(60, 60, 60)"},
+)
+assert-css: (
+    ".result-structfield:focus .structfield",
+    {"color": "rgb(255, 255, 255)"},
+)
+
 // Check the color of "macro".
 assert-css: (
-    ".result-name .macro",
+    ".result-macro .macro",
     {"color": "rgb(163, 122, 204)"},
     ALL,
 )
+assert-css: (
+    ".result-macro",
+    {"color": "rgb(0, 150, 207)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".result-macro"
+assert-css: (
+    ".result-macro:hover",
+    {"color": "rgb(255, 255, 255)", "background-color": "rgb(60, 60, 60)"},
+)
+assert-css: (
+    ".result-macro:hover .macro",
+    {"color": "rgb(163, 122, 204)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-macro"
+assert-css: (
+    ".result-macro:focus",
+    {"color": "rgb(255, 255, 255)", "background-color": "rgb(60, 60, 60)"},
+)
+assert-css: (
+    ".result-macro:focus .macro",
+    {"color": "rgb(163, 122, 204)"},
+)
+
 // Check the color of "fn".
 assert-css: (
-    ".result-name .fn",
+    ".result-fn .fn",
     {"color": "rgb(253, 214, 135)"},
     ALL,
 )
+assert-css: (
+    ".result-fn",
+    {"color": "rgb(0, 150, 207)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".result-fn"
+assert-css: (
+    ".result-fn:hover",
+    {"color": "rgb(255, 255, 255)", "background-color": "rgb(60, 60, 60)"},
+)
+assert-css: (
+    ".result-fn:hover .fn",
+    {"color": "rgb(253, 214, 135)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-fn"
+assert-css: (
+    ".result-fn:focus",
+    {"color": "rgb(255, 255, 255)", "background-color": "rgb(60, 60, 60)"},
+)
+assert-css: (
+    ".result-fn:focus .fn",
+    {"color": "rgb(253, 214, 135)"},
+)
 
 // Checking the `<a>` container.
+move-cursor-to: ".search-input"
+focus: ".search-input" // To ensure the `<a>` container isnt focus or hover.
 assert-css: (
     "//*[@class='result-name']/*[text()='test_docs::']/ancestor::a",
     {"color": "rgb(0, 150, 207)", "background-color": "rgba(0, 0, 0, 0)"},
@@ -113,7 +302,7 @@ assert-css: (
     {"color": "rgb(221, 221, 221)"},
 )
 
-// Checking the color for "keyword".
+// Checking the color for "keyword" text.
 assert-css: (
     "//*[@class='result-name']//*[text()='(keyword)']",
     {"color": "rgb(221, 221, 221)"},
@@ -121,68 +310,250 @@ assert-css: (
 
 // Checking the color of "keyword".
 assert-css: (
-    ".result-name .keyword",
+    ".result-keyword .keyword",
     {"color": "rgb(210, 153, 29)"},
     ALL,
 )
+assert-css: (
+    ".result-keyword",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".result-keyword"
+assert-css: (
+    ".result-keyword:hover",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgb(97, 97, 97)"},
+)
+assert-css: (
+    ".result-keyword:hover .keyword",
+    {"color": "rgb(210, 153, 29)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-keyword"
+assert-css: (
+    ".result-keyword:focus",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgb(97, 97, 97)"},
+)
+assert-css: (
+    ".result-keyword:focus .keyword",
+    {"color": "rgb(210, 153, 29)"},
+)
+
 // Check the color of "struct".
 assert-css: (
-    ".result-name .struct",
+    ".result-struct .struct",
     {"color": "rgb(45, 191, 184)"},
     ALL,
 )
+assert-css: (
+    ".result-struct",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".result-struct"
+assert-css: (
+    ".result-struct:hover",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgb(97, 97, 97)"},
+)
+assert-css: (
+    ".result-struct:hover .struct",
+    {"color": "rgb(45, 191, 184)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-struct"
+assert-css: (
+    ".result-struct:focus",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgb(97, 97, 97)"},
+)
+assert-css: (
+    ".result-struct:focus .struct",
+    {"color": "rgb(45, 191, 184)"},
+)
+
 // Check the color of "associated type".
 assert-css: (
-    ".result-name .associatedtype",
+    ".result-associatedtype .associatedtype",
     {"color": "rgb(210, 153, 29)"},
     ALL,
 )
+assert-css: (
+    ".result-associatedtype",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".result-associatedtype"
+assert-css: (
+    ".result-associatedtype:hover",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgb(97, 97, 97)"},
+)
+assert-css: (
+    ".result-associatedtype:hover .associatedtype",
+    {"color": "rgb(210, 153, 29)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-associatedtype"
+assert-css: (
+    ".result-associatedtype:focus",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgb(97, 97, 97)"},
+)
+assert-css: (
+    ".result-associatedtype:focus .associatedtype",
+    {"color": "rgb(210, 153, 29)"},
+)
+
 // Check the color of "type method".
 assert-css: (
-    ".result-name .tymethod",
+    ".result-tymethod .tymethod",
     {"color": "rgb(43, 171, 99)"},
     ALL,
 )
+assert-css: (
+    ".result-tymethod",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".result-tymethod"
+assert-css: (
+    ".result-tymethod:hover",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgb(97, 97, 97)"},
+)
+assert-css: (
+    ".result-tymethod:hover .tymethod",
+    {"color": "rgb(43, 171, 99)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-tymethod"
+assert-css: (
+    ".result-tymethod:focus",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgb(97, 97, 97)"},
+)
+assert-css: (
+    ".result-tymethod:focus .tymethod",
+    {"color": "rgb(43, 171, 99)"},
+)
+
 // Check the color of "method".
 assert-css: (
-    ".result-name .method",
+    ".result-method .method",
     {"color": "rgb(43, 171, 99)"},
     ALL,
 )
+assert-css: (
+    ".result-method",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".result-method"
+assert-css: (
+    ".result-method:hover",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgb(97, 97, 97)"},
+)
+assert-css: (
+    ".result-method:hover .method",
+    {"color": "rgb(43, 171, 99)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-method"
+assert-css: (
+    ".result-method:focus",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgb(97, 97, 97)"},
+)
+assert-css: (
+    ".result-method:focus .method",
+    {"color": "rgb(43, 171, 99)"},
+)
+
 // Check the color of "struct field".
 assert-css: (
-    ".result-name .structfield",
+    ".result-structfield .structfield",
     {"color": "rgb(221, 221, 221)"},
     ALL,
 )
+assert-css: (
+    ".result-structfield",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".result-structfield"
+assert-css: (
+    ".result-structfield:hover",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgb(97, 97, 97)"},
+)
+assert-css: (
+    ".result-structfield:hover .structfield",
+    {"color": "rgb(221, 221, 221)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-structfield"
+assert-css: (
+    ".result-structfield:focus",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgb(97, 97, 97)"},
+)
+assert-css: (
+    ".result-structfield:focus .structfield",
+    {"color": "rgb(221, 221, 221)"},
+)
+
 // Check the color of "macro".
 assert-css: (
-    ".result-name .macro",
+    ".result-macro .macro",
     {"color": "rgb(9, 189, 0)"},
     ALL,
 )
+assert-css: (
+    ".result-macro",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".result-macro"
+assert-css: (
+    ".result-macro:hover",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgb(97, 97, 97)"},
+)
+assert-css: (
+    ".result-macro:hover .macro",
+    {"color": "rgb(9, 189, 0)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-macro"
+assert-css: (
+    ".result-macro:focus",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgb(97, 97, 97)"},
+)
+assert-css: (
+    ".result-macro:focus .macro",
+    {"color": "rgb(9, 189, 0)"},
+)
+
 // Check the color of "fn".
 assert-css: (
-    ".result-name .fn",
+    ".result-fn .fn",
     {"color": "rgb(43, 171, 99)"},
     ALL,
 )
-
-// Checking the `<a>` container.
 assert-css: (
-    "//*[@class='result-name']/*[text()='test_docs::']/ancestor::a",
+    ".result-fn",
     {"color": "rgb(221, 221, 221)", "background-color": "rgba(0, 0, 0, 0)"},
 )
-
-// Checking color and background on hover.
-move-cursor-to: "//*[@class='desc']//*[text()='Just a normal struct.']"
+move-cursor-to: ".result-fn"
 assert-css: (
-    "//*[@class='result-name']/*[text()='test_docs::']",
-    {"color": "rgb(221, 221, 221)"},
+    ".result-fn:hover",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgb(97, 97, 97)"},
 )
 assert-css: (
+    ".result-fn:hover .fn",
+    {"color": "rgb(43, 171, 99)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-fn"
+assert-css: (
+    ".result-fn:focus",
+    {"color": "rgb(221, 221, 221)", "background-color": "rgb(97, 97, 97)"},
+)
+assert-css: (
+    ".result-fn:focus .fn",
+    {"color": "rgb(43, 171, 99)"},
+)
+
+// Checking the `<a>` container.
+move-cursor-to: ".search-input"
+focus: ".search-input" // To ensure the `<a>` container isnt focus or hover.
+assert-css: (
     "//*[@class='result-name']/*[text()='test_docs::']/ancestor::a",
-    {"color": "rgb(221, 221, 221)", "background-color": "rgb(119, 119, 119)"},
+    {"color": "rgb(221, 221, 221)", "background-color": "rgba(0, 0, 0, 0)"},
 )
 
 // Light theme
@@ -200,7 +571,7 @@ assert-css: (
     {"color": "rgb(0, 0, 0)"},
 )
 
-// Checking the color for "keyword".
+// Checking the color for "keyword" text.
 assert-css: (
     "//*[@class='result-name']//*[text()='(keyword)']",
     {"color": "rgb(0, 0, 0)"},
@@ -208,68 +579,250 @@ assert-css: (
 
 // Checking the color of "keyword".
 assert-css: (
-    ".result-name .keyword",
+    ".result-keyword .keyword",
     {"color": "rgb(56, 115, 173)"},
     ALL,
 )
+assert-css: (
+    ".result-keyword",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".result-keyword"
+assert-css: (
+    ".result-keyword:hover",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgb(204, 204, 204)"},
+)
+assert-css: (
+    ".result-keyword:hover .keyword",
+    {"color": "rgb(56, 115, 173)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-keyword"
+assert-css: (
+    ".result-keyword:focus",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgb(204, 204, 204)"},
+)
+assert-css: (
+    ".result-keyword:focus .keyword",
+    {"color": "rgb(56, 115, 173)"},
+)
+
 // Check the color of "struct".
 assert-css: (
-    ".result-name .struct",
+    ".result-struct .struct",
     {"color": "rgb(173, 55, 138)"},
     ALL,
 )
+assert-css: (
+    ".result-struct",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".result-struct"
+assert-css: (
+    ".result-struct:hover",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgb(204, 204, 204)"},
+)
+assert-css: (
+    ".result-struct:hover .struct",
+    {"color": "rgb(173, 55, 138)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-struct"
+assert-css: (
+    ".result-struct:focus",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgb(204, 204, 204)"},
+)
+assert-css: (
+    ".result-struct:focus .struct",
+    {"color": "rgb(173, 55, 138)"},
+)
+
 // Check the color of "associated type".
 assert-css: (
-    ".result-name .associatedtype",
+    ".result-associatedtype .associatedtype",
     {"color": "rgb(56, 115, 173)"},
     ALL,
 )
+assert-css: (
+    ".result-associatedtype",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".result-associatedtype"
+assert-css: (
+    ".result-associatedtype:hover",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgb(204, 204, 204)"},
+)
+assert-css: (
+    ".result-associatedtype:hover .associatedtype",
+    {"color": "rgb(56, 115, 173)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-associatedtype"
+assert-css: (
+    ".result-associatedtype:focus",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgb(204, 204, 204)"},
+)
+assert-css: (
+    ".result-associatedtype:focus .associatedtype",
+    {"color": "rgb(56, 115, 173)"},
+)
+
 // Check the color of "type method".
 assert-css: (
-    ".result-name .tymethod",
+    ".result-tymethod .tymethod",
     {"color": "rgb(173, 124, 55)"},
     ALL,
 )
+assert-css: (
+    ".result-tymethod",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".result-tymethod"
+assert-css: (
+    ".result-tymethod:hover",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgb(204, 204, 204)"},
+)
+assert-css: (
+    ".result-tymethod:hover .tymethod",
+    {"color": "rgb(173, 124, 55)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-tymethod"
+assert-css: (
+    ".result-tymethod:focus",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgb(204, 204, 204)"},
+)
+assert-css: (
+    ".result-tymethod:focus .tymethod",
+    {"color": "rgb(173, 124, 55)"},
+)
+
 // Check the color of "method".
 assert-css: (
-    ".result-name .method",
+    ".result-method .method",
     {"color": "rgb(173, 124, 55)"},
     ALL,
 )
+assert-css: (
+    ".result-method",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".result-method"
+assert-css: (
+    ".result-method:hover",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgb(204, 204, 204)"},
+)
+assert-css: (
+    ".result-method:hover .method",
+    {"color": "rgb(173, 124, 55)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-method"
+assert-css: (
+    ".result-method:focus",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgb(204, 204, 204)"},
+)
+assert-css: (
+    ".result-method:focus .method",
+    {"color": "rgb(173, 124, 55)"},
+)
+
 // Check the color of "struct field".
 assert-css: (
-    ".result-name .structfield",
+    ".result-structfield .structfield",
     {"color": "rgb(0, 0, 0)"},
     ALL,
 )
+assert-css: (
+    ".result-structfield",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".result-structfield"
+assert-css: (
+    ".result-structfield:hover",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgb(204, 204, 204)"},
+)
+assert-css: (
+    ".result-structfield:hover .structfield",
+    {"color": "rgb(0, 0, 0)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-structfield"
+assert-css: (
+    ".result-structfield:focus",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgb(204, 204, 204)"},
+)
+assert-css: (
+    ".result-structfield:focus .structfield",
+    {"color": "rgb(0, 0, 0)"},
+)
+
 // Check the color of "macro".
 assert-css: (
-    ".result-name .macro",
+    ".result-macro .macro",
     {"color": "rgb(6, 128, 0)"},
     ALL,
 )
+assert-css: (
+    ".result-macro",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)"},
+)
+move-cursor-to: ".result-macro"
+assert-css: (
+    ".result-macro:hover",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgb(204, 204, 204)"},
+)
+assert-css: (
+    ".result-macro:hover .macro",
+    {"color": "rgb(6, 128, 0)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-macro"
+assert-css: (
+    ".result-macro:focus",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgb(204, 204, 204)"},
+)
+assert-css: (
+    ".result-macro:focus .macro",
+    {"color": "rgb(6, 128, 0)"},
+)
+
 // Check the color of "fn".
 assert-css: (
-    ".result-name .fn",
+    ".result-fn .fn",
     {"color": "rgb(173, 124, 55)"},
     ALL,
 )
-
-// Checking the `<a>` container.
 assert-css: (
-    "//*[@class='result-name']/*[text()='test_docs::']/ancestor::a",
+    ".result-fn",
     {"color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)"},
 )
-
-// Checking color and background on hover.
-move-cursor-to: "//*[@class='desc']//*[text()='Just a normal struct.']"
+move-cursor-to: ".result-fn"
 assert-css: (
-    "//*[@class='result-name']/*[text()='test_docs::']",
-    {"color": "rgb(0, 0, 0)"},
+    ".result-fn:hover",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgb(204, 204, 204)"},
 )
 assert-css: (
+    ".result-fn:hover .fn",
+    {"color": "rgb(173, 124, 55)"},
+)
+move-cursor-to: ".search-input"
+focus: ".result-fn"
+assert-css: (
+    ".result-fn:focus",
+    {"color": "rgb(0, 0, 0)", "background-color": "rgb(204, 204, 204)"},
+)
+assert-css: (
+    ".result-fn:focus .fn",
+    {"color": "rgb(173, 124, 55)"},
+)
+
+// Checking the `<a>` container.
+move-cursor-to: ".search-input"
+focus: ".search-input" // To ensure the `<a>` container isnt focus or hover.
+assert-css: (
     "//*[@class='result-name']/*[text()='test_docs::']/ancestor::a",
-    {"color": "rgb(0, 0, 0)", "background-color": "rgb(221, 221, 221)"},
+    {"color": "rgb(0, 0, 0)", "background-color": "rgba(0, 0, 0, 0)"},
 )
 
 // Check the alias more specifically in the dark theme.