From 5abcce534382d85887f3d33475e8e54e3b5d8457 Mon Sep 17 00:00:00 2001 From: Jason Bonta Date: Wed, 12 Feb 2014 15:52:29 -0800 Subject: [PATCH] add lineClamp, vendor prefixes to CSSProperty.isUnitlessNumber --- src/browser/dom/CSSProperty.js | 22 +++++++++++ src/browser/dom/__tests__/CSSProperty-test.js | 39 +++++++++++++++++++ .../__tests__/CSSPropertyOperations-test.js | 21 +--------- 3 files changed, 63 insertions(+), 19 deletions(-) create mode 100644 src/browser/dom/__tests__/CSSProperty-test.js diff --git a/src/browser/dom/CSSProperty.js b/src/browser/dom/CSSProperty.js index 29b2befd39..e503c0ec49 100644 --- a/src/browser/dom/CSSProperty.js +++ b/src/browser/dom/CSSProperty.js @@ -28,6 +28,7 @@ var isUnitlessNumber = { flexGrow: true, flexShrink: true, fontWeight: true, + lineClamp: true, lineHeight: true, opacity: true, order: true, @@ -41,6 +42,27 @@ var isUnitlessNumber = { zoom: true }; +/** + * @param {string} prefix vendor-specific prefix, eg: Webkit + * @param {string} key style name, eg: transitionDuration + * @return {string} style name prefixed with `prefix`, properly camelCased, eg: + * WebkitTransitionDuration + */ +function prefixKey(prefix, key) { + return prefix + key.charAt(0).toUpperCase() + key.substring(1); +} + +/** + * Support style names that may come passed in prefixed by adding permutations + * of vendor prefixes. + */ +var prefixes = ['Webkit', 'ms', 'Moz', 'O']; +for (var k in isUnitlessNumber) { + prefixes.forEach(function(prefix) { + isUnitlessNumber[prefixKey(prefix, k)] = isUnitlessNumber[k]; + }); +} + /** * Most style properties can be unset by doing .style[prop] = '' but IE8 * doesn't like doing that with shorthand properties so for the properties that diff --git a/src/browser/dom/__tests__/CSSProperty-test.js b/src/browser/dom/__tests__/CSSProperty-test.js new file mode 100644 index 0000000000..8234757025 --- /dev/null +++ b/src/browser/dom/__tests__/CSSProperty-test.js @@ -0,0 +1,39 @@ +/** + * Copyright 2014 Facebook, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * @jsx React.DOM + * @emails react-core + */ + +/*jslint evil: true */ + +"use strict"; + +describe('CSSProperty', function() { + var CSSProperty; + + beforeEach(function() { + require('mock-modules').dumpCache(); + CSSProperty = require('CSSProperty'); + }); + + it('should generate browser prefixes for its `isUnitlessNumber`', function() { + expect(CSSProperty.isUnitlessNumber.lineClamp).toBeTruthy(); + expect(CSSProperty.isUnitlessNumber.WebkitLineClamp).toBeTruthy(); + expect(CSSProperty.isUnitlessNumber.msFlexGrow).toBeTruthy(); + expect(CSSProperty.isUnitlessNumber.MozFlexGrow).toBeTruthy(); + }); + +}); diff --git a/src/browser/dom/__tests__/CSSPropertyOperations-test.js b/src/browser/dom/__tests__/CSSPropertyOperations-test.js index 2612c85d2f..b8caace48c 100644 --- a/src/browser/dom/__tests__/CSSPropertyOperations-test.js +++ b/src/browser/dom/__tests__/CSSPropertyOperations-test.js @@ -69,25 +69,8 @@ describe('CSSPropertyOperations', function() { }); it('should not append `px` to styles that might need a number', function() { - var unitlessProperties = [ - 'columnCount', - 'fillOpacity', - 'flex', - 'flexGrow', - 'flexShrink', - 'fontWeight', - 'lineHeight', - 'opacity', - 'order', - 'orphans', - 'pitchRange', - 'richness', - 'stress', - 'volume', - 'widows', - 'zIndex', - 'zoom' - ]; + var CSSProperty = require('CSSProperty'); + var unitlessProperties = Object.keys(CSSProperty.isUnitlessNumber); unitlessProperties.forEach(function(property) { var styles = {}; styles[property] = 1;