Tests for *-{state} psuedo-classes (eg. child-hover)

Sam Goody · Sam Goody · commit fb1b468782af · 2022-02-10T16:20:22.000+02:00
diff --git a/tests/test.css b/tests/test.css
@@ -1,3 +1,6 @@
+.border {
+    border-width: 1px
+}
 .bg-red-200 {
     --tw-bg-opacity: 1;
     background-color: rgb(254 202 202 / var(--tw-bg-opacity))
@@ -9,10 +12,8 @@
 .p-2 {
     padding: 0.5rem
 }
-.ring {
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
+.hover\:border:hover {
+    border-width: 1px
 }
 .child\:bg-teal-200 > .child {
     --tw-bg-opacity: 1;
@@ -25,4 +26,13 @@
 .sibling\:bg-teal-200 ~ .sibling {
     --tw-bg-opacity: 1;
     background-color: rgb(153 246 228 / var(--tw-bg-opacity))
+}
+.child-hover\:border > .child:hover {
+    border-width: 1px
+}
+.heir-hover\:border .heir:hover {
+    border-width: 1px
+}
+.sibling-hover\:border ~ .sibling:hover {
+    border-width: 1px
 }
diff --git a/tests/test.html b/tests/test.html
@@ -9,23 +9,27 @@
 
 <body>
 	<div class="bg-red-200 p-2
-		child:bg-teal-200">
+		child:bg-teal-200 child-hover:border">
 
 		<p class="child">I have a teal background...</p>
+		<p class="child">And a border on hover!</p>
 	</div>
 
 	<div class="bg-red-200 p-2
-		heir:bg-teal-200">
+		heir:bg-teal-200 heir-hover:border">
 
 		<div>
-			<p class="heir">I have a red ring...</p>
+			<p class="heir">I have a teal background...</p>
+		</div>
+		<div>
+			<p class="heir">And a border on hover!</p>
 		</div>
 	</div>
 
 	<div class="bg-red-200 p-2">
-		<p class="bg-teal-200
-			sibling:bg-teal-200">The source...</p>
-		<p class="sibling">I have a teal background...</p>
+		<p class="bg-teal-200 hover:border
+			sibling:bg-teal-200 sibling-hover:border">I have a teal background...</p>
+		<p class="sibling">And a border on hover!</p>
 	</div>
 </body>
 
