rustdoc: add test cases for checkbox toggles

src/test/rustdoc-gui/settings.goml

@@ -48,7 +48,8 @@ assert: ".setting-line.hidden #preferred-light-theme"
 assert-property: ("#theme .choices #theme-dark", {"checked": "true"})
 
 // Some style checks...
-// First we check the "default" display.
+move-cursor-to: "#settings-menu > a"
+// First we check the "default" display for radio buttons.
 assert-css: (
     "#theme-dark",
     {
@@ -57,7 +58,7 @@ assert-css: (
     },
 )
 assert-css: ("#theme-light", {"border-color": "rgb(221, 221, 221)", "box-shadow": "none"})
-// Let's start with the hover.
+// Let's start with the hover for radio buttons.
 move-cursor-to: "#theme-dark"
 assert-css: (
     "#theme-dark",
@@ -69,7 +70,7 @@ assert-css: (
 move-cursor-to: "#theme-light"
 assert-css: ("#theme-light", {"border-color": "rgb(33, 150, 243)", "box-shadow": "none"})
 move-cursor-to: "#theme-ayu"
-// Let's now check with the focus.
+// Let's now check with the focus for radio buttons.
 focus: "#theme-dark"
 assert-css: (
     "#theme-dark",
@@ -86,7 +87,7 @@ assert-css: (
         "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
     },
 )
-// Now we check we both focus and hover.
+// Now we check we both focus and hover for radio buttons.
 move-cursor-to: "#theme-dark"
 focus: "#theme-dark"
 assert-css: (
@@ -106,6 +107,80 @@ assert-css: (
     },
 )
 
+// First we check the "default" display for toggles.
+assert-css: (
+    "#auto-hide-large-items",
+    {
+        "background-color": "rgb(33, 150, 243)",
+        "border-color": "rgb(221, 221, 221)",
+    },
+)
+assert-css: (
+    "#use-system-theme",
+    {
+        "background-color": "rgba(0, 0, 0, 0)",
+        "border-color": "rgb(221, 221, 221)",
+    }
+)
+// Let's start with the hover for toggles.
+move-cursor-to: "#auto-hide-large-items"
+assert-css: (
+    "#auto-hide-large-items",
+    {
+        "background-color": "rgb(33, 150, 243)",
+        "border-color": "rgb(33, 150, 243)",
+    },
+)
+move-cursor-to: "#use-system-theme"
+assert-css: (
+    "#use-system-theme",
+    {
+        "background-color": "rgba(0, 0, 0, 0)",
+        "border-color": "rgb(33, 150, 243)",
+    }
+)
+move-cursor-to: "#settings-menu > a"
+// Let's now check with the focus for toggles.
+focus: "#auto-hide-large-items"
+assert-css: (
+    "#auto-hide-large-items",
+    {
+        "background-color": "rgb(33, 150, 243)",
+        "border-color": "rgb(221, 221, 221)",
+        "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
+    },
+)
+focus: "#use-system-theme"
+assert-css: (
+    "#use-system-theme",
+    {
+        "background-color": "rgba(0, 0, 0, 0)",
+        "border-color": "rgb(221, 221, 221)",
+        "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
+    },
+)
+// Now we check we both focus and hover for toggles.
+move-cursor-to: "#auto-hide-large-items"
+focus: "#auto-hide-large-items"
+assert-css: (
+    "#auto-hide-large-items",
+    {
+        "background-color": "rgb(33, 150, 243)",
+        "border-color": "rgb(33, 150, 243)",
+        "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
+    },
+)
+move-cursor-to: "#use-system-theme"
+focus: "#use-system-theme"
+assert-css: (
+    "#use-system-theme",
+    {
+        "background-color": "rgba(0, 0, 0, 0)",
+        "border-color": "rgb(33, 150, 243)",
+        "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
+    },
+)
+
 // We now switch the display.
 click: "#use-system-theme"
 // Wait for the hidden element to show up.