mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
add lineClamp, vendor prefixes to CSSProperty.isUnitlessNumber
This commit is contained in:
committed by
Paul O’Shannessy
parent
75b58d2ad2
commit
5abcce5343
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user