Warn about Infinity in style value (#9360)
* warn about Infinity in style value * prettier
Vitaliy Potapov committed
Apr 21, 2017 at 17:41 UTC
895dca587b88029f545475514e02c6d9bd611894
3 files changed
+42
-2
scripts/fiber/tests-passing.txt
+1
@@ -777,6 +777,7 @@ src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
777
* should warn about style having a trailing semicolon
778
* should warn about style containing a NaN value
779
* should not warn when setting CSS variables
780
+* should warn about style containing a Infinity value
781
782
src/renderers/dom/shared/__tests__/DOMPropertyOperations-test.js
783
* should create markup for simple properties
src/renderers/dom/shared/CSSPropertyOperations.js
+21
-2
@@ -50,6 +50,7 @@ if (__DEV__) {
50
var warnedStyleNames = {};
51
var warnedStyleValues = {};
52
var warnedForNaNValue = false;
53
+ var warnedForInfinityValue = false;
54
55
var warnHyphenatedStyleName = function(name, owner) {
56
if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
@@ -111,6 +112,20 @@ if (__DEV__) {
112
);
113
};
114
115
+ var warnStyleValueIsInfinity = function(name, value, owner) {
116
+ if (warnedForInfinityValue) {
117
+ return;
118
+ }
119
+
120
+ warnedForInfinityValue = true;
121
+ warning(
122
+ false,
123
+ '`Infinity` is an invalid value for the `%s` css style property.%s',
124
+ name,
125
+ checkRenderMessage(owner),
126
+ );
127
+ };
128
+
129
var checkRenderMessage = function(owner) {
130
var ownerName;
131
if (owner != null) {
@@ -150,8 +165,12 @@ if (__DEV__) {
165
warnStyleValueWithSemicolon(name, value, owner);
166
}
167
153
- if (typeof value === 'number' && isNaN(value)) {
154
- warnStyleValueIsNaN(name, value, owner);
168
+ if (typeof value === 'number') {
169
+ if (isNaN(value)) {
170
+ warnStyleValueIsNaN(name, value, owner);
171
+ } else if (!isFinite(value)) {
172
+ warnStyleValueIsInfinity(name, value, owner);
173
+ }
174
}
175
};
176
}
src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js
+20
@@ -267,4 +267,24 @@ describe('CSSPropertyOperations', () => {
267
268
expectDev(console.error.calls.count()).toBe(0);
269
});
270
+
271
+ it('should warn about style containing a Infinity value', () => {
272
+ class Comp extends React.Component {
273
+ static displayName = 'Comp';
274
+
275
+ render() {
276
+ return <div style={{fontSize: 1 / 0}} />;
277
+ }
278
+ }
279
+
280
+ spyOn(console, 'error');
281
+ var root = document.createElement('div');
282
+ ReactDOM.render(<Comp />, root);
283
+
284
+ expectDev(console.error.calls.count()).toBe(1);
285
+ expectDev(console.error.calls.argsFor(0)[0]).toEqual(
286
+ 'Warning: `Infinity` is an invalid value for the `fontSize` css style property.' +
287
+ '\n\nCheck the render method of `Comp`.',
288
+ );
289
+ });
290
});