From 0bb21669f75b3adc0e3345c85680d437c57f94d8 Mon Sep 17 00:00:00 2001
From: Takeshi Kurosawa <taken.spc@gmail.com>
Date: Wed, 12 Feb 2020 17:03:41 +0900
Subject: [PATCH] fix(color-contrast): parse font-weight value as number
 (#2031) (#2040)

The computed values of `font-weight` are numeric string so that we don't need to check keywords such as `bold`.

The `font-weight` values are continuous. They can be `123` or `123.4` so that we should parse them as number.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide

Co-authored-by: Takeshi Kurosawa <kurosawa-takeshi@mitsue.co.jp>
---
 lib/checks/color/color-contrast.js  |  5 ++---
 test/checks/color/color-contrast.js | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/lib/checks/color/color-contrast.js b/lib/checks/color/color-contrast.js
index 101888379c..4790056802 100644
--- a/lib/checks/color/color-contrast.js
+++ b/lib/checks/color/color-contrast.js
@@ -28,9 +28,8 @@ const fgColor = color.getForegroundColor(node, noScroll, bgColor);
 
 const nodeStyle = window.getComputedStyle(node);
 const fontSize = parseFloat(nodeStyle.getPropertyValue('font-size'));
-const fontWeight = nodeStyle.getPropertyValue('font-weight');
-const bold =
-	['bold', 'bolder', '600', '700', '800', '900'].indexOf(fontWeight) !== -1;
+const fontWeight = parseFloat(nodeStyle.getPropertyValue('font-weight'));
+const bold = !isNaN(fontWeight) && fontWeight >= 700;
 
 const cr = color.hasValidContrastRatio(bgColor, fgColor, fontSize, bold);
 
diff --git a/test/checks/color/color-contrast.js b/test/checks/color/color-contrast.js
index 4804335f64..d02ae80aa9 100644
--- a/test/checks/color/color-contrast.js
+++ b/test/checks/color/color-contrast.js
@@ -44,14 +44,24 @@ describe('color-contrast', function() {
 
 	it('should return true when there is sufficient contrast because of font weight', function() {
 		var params = checkSetup(
-			'<div style="color: gray; background-color: white; font-size: 14pt; font-weight: bold" id="target">' +
-				'My text</div>'
+			'<div style="color: gray; background-color: white; font-size: 14pt; font-weight: 900" id="target">' +
+				'<span style="font-weight:lighter">My text</span></div>'
 		);
 
 		assert.isTrue(contrastEvaluate.apply(checkContext, params));
 		assert.deepEqual(checkContext._relatedNodes, []);
 	});
 
+	it('should return false when there is not sufficient contrast because of font weight', function() {
+		var params = checkSetup(
+			'<div style="color: gray; background-color: white; font-size: 14pt; font-weight: 100" id="target">' +
+				'<span style="font-weight:bolder">My text</span></div>'
+		);
+
+		assert.isFalse(contrastEvaluate.apply(checkContext, params));
+		assert.deepEqual(checkContext._relatedNodes, [params[0]]);
+	});
+
 	it('should return true when there is sufficient contrast because of font size', function() {
 		var params = checkSetup(
 			'<div style="color: gray; background-color: white; font-size: 18pt;" id="target">' +