[css-color-4][meta] Per Lea's suggestion, use CSS.supports() rather than WPT-ish hacks.

Author: tabatkins

css-color-4/Overview.bs

@@ -76,24 +76,13 @@ table.deltaE td.dE5 { background: rgb(243, 103, 68); color: white}
 
 <script>
 document.addEventListener("DOMContentLoaded", ()=>{
-	const testEl = document.createElement("div");
-	document.body.appendChild(testEl);
 	[...document.querySelectorAll(".swatch")].forEach(e=>{
-		/* test that the swatch color is recognized */
-		const testColor = getComputedStyle(e).getPropertyValue("--color");
-		testEl.style.color = "#010203";
-		const controlColor = getComputedStyle(testEl).color;
-		testEl.style.color = testColor;
-		const resultColor = getComputedStyle(testEl).color;
-		if(resultColor != controlColor) {
-			/* success! */
-			return
+		const swatchColor = getComputedStyle(e).getPropertyValue("--color");
+		if(!CSS.supports('color', swatchColor)) {
+			e.style.background = "repeating-linear-gradient(135deg, red 0, red 4px, white 4px, white 8px)";
+			e.setAttribute("title", "Your browser does not recognize this color value, so we can't preview it.");
 		}
-		/* otherwise, indicate it's a failure */
-		e.style.background = "repeating-linear-gradient(135deg, red 0, red 4px, white 4px, white 8px)";
-		e.setAttribute("title", "Your browser does not recognize this color value, so we can't preview it.");
 	});
-	document.body.removeChild(testEl);
 });
 </script>