add lineClamp, vendor prefixes to CSSProperty.isUnitlessNumber
Jason Bonta committed
Feb 12, 2014 at 15:52 UTC
5abcce534382d85887f3d33475e8e54e3b5d8457
3 files changed
+63
-19
src/browser/dom/CSSProperty.js
+22
@@ -28,6 +28,7 @@ var isUnitlessNumber = {
28
flexGrow: true,
29
flexShrink: true,
30
fontWeight: true,
31
+ lineClamp: true,
32
lineHeight: true,
33
opacity: true,
34
order: true,
@@ -41,6 +42,27 @@ var isUnitlessNumber = {
42
zoom: true
43
};
44
45
+/**
46
+ * @param {string} prefix vendor-specific prefix, eg: Webkit
47
+ * @param {string} key style name, eg: transitionDuration
48
+ * @return {string} style name prefixed with `prefix`, properly camelCased, eg:
49
+ * WebkitTransitionDuration
50
+ */
51
+function prefixKey(prefix, key) {
52
+ return prefix + key.charAt(0).toUpperCase() + key.substring(1);
53
+}
54
+
55
+/**
56
+ * Support style names that may come passed in prefixed by adding permutations
57
+ * of vendor prefixes.
58
+ */
59
+var prefixes = ['Webkit', 'ms', 'Moz', 'O'];
60
+for (var k in isUnitlessNumber) {
61
+ prefixes.forEach(function(prefix) {
62
+ isUnitlessNumber[prefixKey(prefix, k)] = isUnitlessNumber[k];
63
+ });
64
+}
65
+
66
/**
67
* Most style properties can be unset by doing .style[prop] = '' but IE8
68
* doesn't like doing that with shorthand properties so for the properties that
src/browser/dom/__tests__/CSSProperty-test.js
new
+39
@@ -0,0 +1,39 @@
1
+/**
2
+ * Copyright 2014 Facebook, Inc.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ * http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ *
16
+ * @jsx React.DOM
17
+ * @emails react-core
18
+ */
19
+
20
+/*jslint evil: true */
21
+
22
+"use strict";
23
+
24
+describe('CSSProperty', function() {
25
+ var CSSProperty;
26
+
27
+ beforeEach(function() {
28
+ require('mock-modules').dumpCache();
29
+ CSSProperty = require('CSSProperty');
30
+ });
31
+
32
+ it('should generate browser prefixes for its `isUnitlessNumber`', function() {
33
+ expect(CSSProperty.isUnitlessNumber.lineClamp).toBeTruthy();
34
+ expect(CSSProperty.isUnitlessNumber.WebkitLineClamp).toBeTruthy();
35
+ expect(CSSProperty.isUnitlessNumber.msFlexGrow).toBeTruthy();
36
+ expect(CSSProperty.isUnitlessNumber.MozFlexGrow).toBeTruthy();
37
+ });
38
+
39
+});
src/browser/dom/__tests__/CSSPropertyOperations-test.js
+2
-19
@@ -69,25 +69,8 @@ describe('CSSPropertyOperations', function() {
69
});
70
71
it('should not append `px` to styles that might need a number', function() {
72
- var unitlessProperties = [
73
- 'columnCount',
74
- 'fillOpacity',
75
- 'flex',
76
- 'flexGrow',
77
- 'flexShrink',
78
- 'fontWeight',
79
- 'lineHeight',
80
- 'opacity',
81
- 'order',
82
- 'orphans',
83
- 'pitchRange',
84
- 'richness',
85
- 'stress',
86
- 'volume',
87
- 'widows',
88
- 'zIndex',
89
- 'zoom'
90
- ];
72
+ var CSSProperty = require('CSSProperty');
73
+ var unitlessProperties = Object.keys(CSSProperty.isUnitlessNumber);
74
unitlessProperties.forEach(function(property) {
75
var styles = {};
76
styles[property] = 1;