add lineClamp, vendor prefixes to CSSProperty.isUnitlessNumber

This commit is contained in:
Jason Bonta
2014-02-12 16:35:09 -08:00
committed by Paul O’Shannessy
parent 75b58d2ad2
commit 5abcce5343
3 changed files with 63 additions and 19 deletions
+22
View File
@@ -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
@@ -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();
});
});
@@ -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;