Merge branch 'master' of https://github.com/w3c/csswg-drafts

Adam Argyle · Adam Argyle · commit 810ea3454b1a · 2019-11-20T08:16:41.000-08:00
diff --git a/css-color-4/contrast.html b/css-color-4/contrast.html
@@ -1,44 +1,62 @@
-﻿<html>
-	<script src="math.js"></script>
-    <script src="conversions.js"></script>
-    <script src="utilities.js"></script>
-	<script>
-	// read the foreground abd background colors
-	// then use the contrast() utility function
-	// to compute WCAG contrast.
-
-		var back, fore, bgcol, fgcol;
-		window.addEventListener("load", startup, false);
-
-		function startup() {
-			back=document.querySelector(#fg);
-			fore=document.querySelector(#bg);
-			back.addEventListener("input", watchpickers, false);
-			fore.addEventListener("input", watchpickers, false);
-		}
-
-		function watchpickers(event) {
-			// if either picker changes, update the two colors
-			// and output the contrast ratio
-
-			var contrast = document.querySelector("result>span");
-			bgcol = event.target.value;
-			fgcol =
-		}
-	</script>
-	<style>
-		body {background-color: rgb(46.6346021727084%, 46.6346021727084%, 46.6346021727084%);  padding: 20px;}
-		h2 {color: rgb(243, 235, 166);}
-	</style>
-	<h2>Contrast ratio of two colors</h2>
-	<p>Pick a foreground and background color</p>
-	<input type="color" id="fg" value="#B7C9A3">
-	<label for="fg">Foreground</label>
-	<input type="color" id="fg" value="#104425">
-	<label for="fg">Background</label>
-
-	<div id="result">
-		Contrast ratio <span></span>.
-	</div>
+﻿<!DOCTYPE html>
+<html>
+<head>
+
+<script src="math.js"></script>
+<script src="conversions.js"></script>
+<script src="utilities.js"></script>
+
+<style>
+	body {background-color: rgb(46.6346021727084%, 46.6346021727084%, 46.6346021727084%);  padding: 20px;}
+	h2 {color: rgb(243, 235, 166);}
+</style>
+
+</head>
+<body>
+
+<h2>Contrast ratio of two colors</h2>
+<p>Pick a foreground and background color</p>
+
+<input type="color" id="fg" value="#B7C9A3">
+<label for="fg">Foreground</label>
+<input type="color" id="bg" value="#104425">
+<label for="bg">Background</label>
+
+<div id="result">
+	Contrast ratio <output id="contrastResult"></output>.
+</div>
+
+
+<script>
+// read the foreground and background colors
+// then use the contrast() utility function
+// to compute WCAG contrast.
+
+var fgInput = document.querySelector("#fg");
+var bgInput = document.querySelector("#bg");
+var contrastOutput = document.querySelector("#contrastResult");
+var bgColor, fgColor;
+
+// if any picker changes, update the color
+// and output the contrast ratio
+(fgInput.oninput = bgInput.oninput = function (event) {
+	bgColor = hexToArray(bgInput.value);
+	fgColor = hexToArray(fgInput.value);
+	console.log("watch", bgColor, fgColor);
+	contrastOutput.value = contrast(bgColor, fgColor);
+	// convert from string to array of number
+	// compute contrast
+	// update span
+})();
+
+
+
+function hexToArray(hex) {
+	return hex.match(/[\dA-F]{2}/ig).map(x => parseInt(x, 16) / 255);
+}
+
+</script>
+
+</body>
 
 </html>
diff --git a/css-color-4/utilities.js b/css-color-4/utilities.js
@@ -1,5 +1,5 @@
 // utility functions for color conversions
-// needs conversions.js nd math.js (not Math)
+// needs conversions.js and math.js (not Math)
 
 function sRGB_to_luminance(RGB) {
     // convert an array of gamma-corrected sRGB values
@@ -46,5 +46,5 @@ function LCH_to_sRGB(LCH) {
     // or components greater than 1.0
     // so check for that :)
 
-    return gam(sRGB(XYZ_to_lin_sRGB(Lab_to_XYZ(D50_to_D65(LCH_to_Lab(LCH))))));
+    return gam_sRGB(XYZ_to_lin_sRGB(Lab_to_XYZ(D50_to_D65(LCH_to_Lab(LCH)))));
 }
