mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
CommitSyncScript
93fc188afb
Some improvements to how style={{x:y}} is handled in React:
* ignores null styles, rather than setting them.
Codez:
var highlighted = false;
<div style={{color: highlighted ? 'red' : null}} />
Before:
<div style="color:;"></div>
After:
<div></div>
Respects that 0 has no units.
92 lines
2.6 KiB
JavaScript
92 lines
2.6 KiB
JavaScript
/**
|
|
* Copyright 2013 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
|
|
*/
|
|
|
|
"use strict";
|
|
|
|
var React = require('React');
|
|
|
|
describe('CSSPropertyOperations', function() {
|
|
var CSSPropertyOperations;
|
|
|
|
beforeEach(function() {
|
|
require('mock-modules').dumpCache();
|
|
CSSPropertyOperations = require('CSSPropertyOperations');
|
|
});
|
|
|
|
it('should create markup for simple styles', function() {
|
|
expect(CSSPropertyOperations.createMarkupForStyles({
|
|
backgroundColor: '#3b5998',
|
|
display: 'none'
|
|
})).toBe('background-color:#3b5998;display:none;');
|
|
});
|
|
|
|
it('should ignore undefined styles', function() {
|
|
expect(CSSPropertyOperations.createMarkupForStyles({
|
|
backgroundColor: undefined,
|
|
display: 'none'
|
|
})).toBe('display:none;');
|
|
});
|
|
|
|
it('should ignore null styles', function() {
|
|
expect(CSSPropertyOperations.createMarkupForStyles({
|
|
backgroundColor: null,
|
|
display: 'none'
|
|
})).toBe('display:none;');
|
|
});
|
|
|
|
it('should return null for no styles', function() {
|
|
expect(CSSPropertyOperations.createMarkupForStyles({
|
|
backgroundColor: null,
|
|
display: null
|
|
})).toBe(null);
|
|
});
|
|
|
|
it('should automatically append `px` to relevant styles', function() {
|
|
expect(CSSPropertyOperations.createMarkupForStyles({
|
|
left: 0,
|
|
margin: 16,
|
|
opacity: 0.5,
|
|
padding: '4px'
|
|
})).toBe('left:0;margin:16px;opacity:0.5;padding:4px;');
|
|
});
|
|
|
|
it('should set style attribute when styles exist', function() {
|
|
var styles = {
|
|
backgroundColor: '#000',
|
|
display: 'none'
|
|
};
|
|
var div = <div style={styles} />;
|
|
var root = document.createElement('div');
|
|
React.renderComponent(div, root);
|
|
expect(/style=".*"/.test(root.innerHTML)).toBe(true);
|
|
});
|
|
|
|
it('should not set style attribute when no styles exist', function() {
|
|
var styles = {
|
|
backgroundColor: null,
|
|
display: null
|
|
};
|
|
var div = <div style={styles} />;
|
|
var root = document.createElement('div');
|
|
React.renderComponent(div, root);
|
|
expect(/style=".*"/.test(root.innerHTML)).toBe(false);
|
|
});
|
|
|
|
});
|