add getPrefixedStyleProperty to browser utilities

jlmakes · jlmakes · commit abaa8d143ca1 · 2017-01-07T01:12:29.000+01:00
diff --git a/src/utils/browser.js b/src/utils/browser.js
@@ -1,3 +1,29 @@
+export const getPrefixedStyleProperty = (() => {
+	let properties = {}
+	const style = document.documentElement.style
+
+	function getPrefixedStyleProperty (name, source = style) {
+		if (name && typeof name === 'string') {
+			if (properties[name]) {
+				return properties[name]
+			}
+			if (typeof source[name] === 'string') {
+				return properties[name] = name
+			}
+			if (typeof source[`-webkit-${name}`] === 'string') {
+				return properties[name] = `-webkit-${name}`
+			}
+			throw new RangeError(`Unable to find "${name}" style property.`)
+		}
+		throw new TypeError('Expected a string.')
+	}
+
+	getPrefixedStyleProperty.clearCache = () => properties = {}
+
+	return getPrefixedStyleProperty
+})()
+
+
 export function isMobile (agent = navigator.userAgent) {
 	return /Android|iPhone|iPad|iPod/i.test(agent)
 }
@@ -26,27 +52,6 @@ export function isNodeList (target) {
 }
 
 
-// export const getComputedProperty = (name => {
-// 	const properties = {}
-//
-// 	return () => {
-// 		if (properties[name]) return properties[name]
-//
-// 		if (typeof name === 'string') {
-// 			const computed = window.getComputedStyle()
-// 			if (typeof computed[name] === 'string') {
-// 				return properties[name] = name
-// 			}
-// 			if (typeof computed[`-webkit-${name}`] === 'string') {
-// 				return properties[name] = `-webkit-${name}`
-// 			}
-// 			throw new RangeError(`Unable to find "${name}" in computed style properties.`)
-// 		}
-// 		throw new Error('Expected a string.')
-// 	}
-// })()
-
-
 export function transformSupported () {
 	const style = document.documentElement.style
 	return 'transform' in style || 'WebkitTransform' in style
diff --git a/test/utils/browser.spec.js b/test/utils/browser.spec.js
@@ -3,6 +3,57 @@ import * as browser from '../../src/utils/browser'
 
 describe('Browser Utilities', () => {
 
+	describe('getPrefixedStyleProperty()', () => {
+
+		beforeEach('clear cache', () => {
+			browser.getPrefixedStyleProperty.clearCache()
+		})
+
+		it('should return unprefixed properties before prefixed', () => {
+			const source = {
+				transform: '',
+				'-webkit-transform': '',
+			}
+			const result = browser.getPrefixedStyleProperty('transform', source)
+			expect(result).to.equal('transform')
+		})
+
+		it('should return prefixed property names', () => {
+			const source = { '-webkit-transform': '' }
+			const result = browser.getPrefixedStyleProperty('transform', source)
+			expect(result).to.equal('-webkit-transform')
+		})
+
+		it('should return property names from cache when available', () => {
+			const source = { '-webkit-transform': '' }
+			browser.getPrefixedStyleProperty('transform', source)
+			const result = browser.getPrefixedStyleProperty('transform', {})
+			expect(result).to.equal('-webkit-transform')
+		})
+
+		it('should throw a range error when no property is found', () => {
+			let caught
+			try {
+				browser.getPrefixedStyleProperty('transform', {})
+			} catch (error) {
+				caught = error
+			}
+			expect(caught).to.exist
+			expect(caught).to.be.an.instanceof(RangeError)
+		})
+
+		it('should throw a type error if not passed a string', () => {
+			let caught
+			try {
+				browser.getPrefixedStyleProperty(null)
+			} catch (error) {
+				caught = error
+			}
+			expect(caught).to.exist
+			expect(caught).to.be.an.instanceof(TypeError)
+		})
+	})
+
 	describe('isMobile()', () => {
 
 		it('should return true when passed a mobile user agent', () => {
