[css-color-4] Add a script that verifies swatches can actually render.

Author: tabatkins

css-color-4/Overview.bs

@@ -74,6 +74,29 @@ table.deltaE td.dE4 { background: rgb(243, 202, 68)}
 table.deltaE td.dE5 { background: rgb(243, 103, 68); color: white}
 </style>
 
+<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
+		}
+		/* 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>
+
 <h2 id="introduction">
 Introduction</h2>