Support border width in relation to border style

jonathantneal · Jun 29, 2016 · 1d6908f · 1d6908f
1 parent 20b22bc
commit 1d6908f
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 9 deletions.
diff --git a/lib/read/getComputedLength.js b/lib/read/getComputedLength.js
@@ -4,10 +4,32 @@ var lengthMatch = /^([-+]?\d*\.?\d+)(%|[a-z]+)$/;
 
 var testElement = document.createElement('div');
 
-function getComputedLength(value, targetElement) {
+var borderWidths = {
+	medium: 4,
+	none:   0,
+	thick:  6,
+	thin:   2
+};
+
+var borderWidthPropMatch = /^border(Bottom|Left|Right|Top)Width$/;
+
+function getComputedLength(style, prop, element) {
+	var value = style[prop];
 	var match = String(value).match(lengthMatch);
 
 	if (!match) {
+		var borderWidthProp = prop.match(borderWidthPropMatch);
+
+		if (borderWidthProp) {
+			var borderStyleProp = style['border' + borderWidthProp[1] + 'Style'];
+
+			if (borderStyleProp === 'none') {
+				return 0;
+			} else {
+				return borderWidths[value] || 0;
+			}
+		}
+
 		return value;
 	}
 
@@ -21,17 +43,17 @@ function getComputedLength(value, targetElement) {
 	unit === 'pc'  ? size * 12 * 96 / 72 :
 	unit === 'pt'  ? size * 96 / 72 :
 	unit === 'rem' ? size * 16 :
-	getComputedValue(value, targetElement);
+	getComputedValue(value, element);
 }
 
-function getComputedValue(value, targetElement) {
+function getComputedValue(value, element) {
 	testElement.style.cssText = 'border:none!important;clip:rect(0 0 0 0)!important;display:block!important;font-size:1em!important;height:0!important;margin:0!important;padding:0!important;position:relative!important;width:' + value + '!important';
 
-	targetElement.parentNode.insertBefore(testElement, targetElement.nextSibling);
+	element.parentNode.insertBefore(testElement, element.nextSibling);
 
 	var fontSize = testElement.offsetWidth;
 
-	targetElement.parentNode.removeChild(testElement);
+	element.parentNode.removeChild(testElement);
 
 	return fontSize;
 }
diff --git a/lib/read/index.js b/lib/read/index.js
@@ -1,7 +1,8 @@
 module.exports = read;
 
-var declMatch = /([^\s:;]+)\s*:\s*([^;]+?)\s*(;|$)/g;
-var pxValueMatch = /^(0|\d*\.?\d+px)$/;
+var declMatch         = /([^\s:;]+)\s*:\s*([^;]+?)\s*(;|$)/g;
+var ignoredPropsMatch = /^(alignSelf|height|width)$/;
+var pxValueMatch      = /^(0|\d*\.?\d+px)$/;
 
 var getComputedLength = require('./getComputedLength');
 
@@ -12,9 +13,13 @@ function read(element) {
 		alignContent: 'stretch',
 		alignItems: 'stretch',
 		alignSelf: 'auto',
+		borderBottomStyle: 'none',
 		borderBottomWidth: 0,
+		borderLeftStyle: 'none',
 		borderLeftWidth: 0,
+		borderRightStyle: 'none',
 		borderRightWidth: 0,
+		borderTopStyle: 'none',
 		borderTopWidth: 0,
 		boxSizing: 'content-box',
 		display: 'inline',
@@ -72,7 +77,7 @@ function read(element) {
 
 		// for each camel-case property
 		for (var prop in style) {
-			style[prop] = getComputedLength(style[prop], element);
+			style[prop] = getComputedLength(style, prop, element);
 		}
 
 		// offset measurements
@@ -139,7 +144,7 @@ function appendComputedStyle(style, computedStyle) {
 		// whether kebab property is in current style
 		var hasProp = prop in computedStyle;
 
-		if (hasProp && !/^(alignSelf|height|width)$/.test(prop)) {
+		if (hasProp && !ignoredPropsMatch.test(prop)) {
 			style[prop] = computedStyle[prop];
 		}
 	}