diff --git a/fixtures/packaging/babel-standalone.html b/fixtures/packaging/babel-standalone.html new file mode 100644 index 0000000000..ea37f34df0 --- /dev/null +++ b/fixtures/packaging/babel-standalone.html @@ -0,0 +1,14 @@ + + + + + +
+ + + \ No newline at end of file diff --git a/scripts/fiber/tests-failing.txt b/scripts/fiber/tests-failing.txt index b99355d063..3bd47469ac 100644 --- a/scripts/fiber/tests-failing.txt +++ b/scripts/fiber/tests-failing.txt @@ -102,6 +102,42 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js * renders >,<, and & as single child with client render on top of good server markup * renders >,<, and & as multiple children with server string render * renders >,<, and & as multiple children with client render on top of good server markup +* renders an input with a value and an onChange with client render on top of good server markup +* renders an input with a value and readOnly with client render on top of good server markup +* renders an input with a value and no onChange/readOnly with client render on top of good server markup +* renders an input with a defaultValue with client render on top of good server markup +* renders an input value overriding defaultValue with client render on top of good server markup +* renders an input value overriding defaultValue no matter the prop order with client render on top of good server markup +* renders a checkbox that is checked with an onChange with client render on top of good server markup +* renders a checkbox that is checked with readOnly with client render on top of good server markup +* renders a checkbox that is checked and no onChange/readOnly with client render on top of good server markup +* renders a checkbox with defaultChecked with client render on top of good server markup +* renders a checkbox checked overriding defaultChecked with client render on top of good server markup +* renders a checkbox checked overriding defaultChecked no matter the prop order with client render on top of good server markup +* renders a textarea with a value and an onChange with client render on top of good server markup +* renders a textarea with a value and readOnly with client render on top of good server markup +* renders a textarea with a value and no onChange/readOnly with client render on top of good server markup +* renders a textarea with a defaultValue with client render on top of good server markup +* renders a textarea value overriding defaultValue with client render on top of good server markup +* renders a textarea value overriding defaultValue no matter the prop order with client render on top of good server markup +* renders a select with a value and an onChange with client render on top of good server markup +* renders a select with a value and readOnly with client render on top of good server markup +* renders a select with a multiple values and an onChange with client render on top of good server markup +* renders a select with a multiple values and readOnly with client render on top of good server markup +* renders a select with a value and no onChange/readOnly with client render on top of good server markup +* renders a select with a defaultValue with client render on top of good server markup +* renders a select value overriding defaultValue with client render on top of good server markup +* renders a select value overriding defaultValue no matter the prop order with client render on top of good server markup +* renders a controlled text input with client render on top of good server markup +* renders a controlled textarea with client render on top of good server markup +* renders a controlled checkbox with client render on top of good server markup +* renders a controlled select with client render on top of good server markup +* should not blow away user-entered text on successful reconnect to an uncontrolled input +* should not blow away user-entered text on successful reconnect to a controlled input +* should not blow away user-entered text on successful reconnect to an uncontrolled checkbox +* should not blow away user-entered text on successful reconnect to a controlled checkbox +* should not blow away user-selected value on successful reconnect to an uncontrolled select +* should not blow away user-selected value on successful reconnect to an controlled select * renders class child with context with client render on top of good server markup * renders stateless child with context with client render on top of good server markup * renders class child without context with client render on top of good server markup diff --git a/scripts/fiber/tests-passing-except-dev.txt b/scripts/fiber/tests-passing-except-dev.txt index 3ff930bd86..73964d453d 100644 --- a/scripts/fiber/tests-passing-except-dev.txt +++ b/scripts/fiber/tests-passing-except-dev.txt @@ -94,6 +94,36 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js * throws when rendering an undefined component with client render on top of bad server markup * throws when rendering a number component with clean client render * throws when rendering a number component with client render on top of bad server markup +* renders an input with a value and an onChange with client render on top of bad server markup +* renders an input with a value and readOnly with client render on top of bad server markup +* renders an input with a value and no onChange/readOnly with client render on top of bad server markup +* renders an input with a defaultValue with client render on top of bad server markup +* renders an input value overriding defaultValue with client render on top of bad server markup +* renders an input value overriding defaultValue no matter the prop order with client render on top of bad server markup +* renders a checkbox that is checked with an onChange with client render on top of bad server markup +* renders a checkbox that is checked with readOnly with client render on top of bad server markup +* renders a checkbox that is checked and no onChange/readOnly with client render on top of bad server markup +* renders a checkbox with defaultChecked with client render on top of bad server markup +* renders a checkbox checked overriding defaultChecked with client render on top of bad server markup +* renders a checkbox checked overriding defaultChecked no matter the prop order with client render on top of bad server markup +* renders a textarea with a value and an onChange with client render on top of bad server markup +* renders a textarea with a value and readOnly with client render on top of bad server markup +* renders a textarea with a value and no onChange/readOnly with client render on top of bad server markup +* renders a textarea with a defaultValue with client render on top of bad server markup +* renders a textarea value overriding defaultValue with client render on top of bad server markup +* renders a textarea value overriding defaultValue no matter the prop order with client render on top of bad server markup +* renders a select with a value and an onChange with client render on top of bad server markup +* renders a select with a value and readOnly with client render on top of bad server markup +* renders a select with a multiple values and an onChange with client render on top of bad server markup +* renders a select with a multiple values and readOnly with client render on top of bad server markup +* renders a select with a value and no onChange/readOnly with client render on top of bad server markup +* renders a select with a defaultValue with client render on top of bad server markup +* renders a select value overriding defaultValue with client render on top of bad server markup +* renders a select value overriding defaultValue no matter the prop order with client render on top of bad server markup +* renders a controlled text input with client render on top of bad server markup +* renders a controlled textarea with client render on top of bad server markup +* renders a controlled checkbox with client render on top of bad server markup +* renders a controlled select with client render on top of bad server markup * renders class child with context with client render on top of bad server markup * renders stateless child with context with client render on top of bad server markup * renders class child without context with client render on top of bad server markup diff --git a/scripts/fiber/tests-passing.txt b/scripts/fiber/tests-passing.txt index be1d9751e1..a8e34c1158 100644 --- a/scripts/fiber/tests-passing.txt +++ b/scripts/fiber/tests-passing.txt @@ -1154,6 +1154,62 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js * throws when rendering string with server string render * throws when rendering string with clean client render * throws when rendering string with client render on top of bad server markup +* renders an input with a value and an onChange with server string render +* renders an input with a value and an onChange with clean client render +* renders an input with a value and readOnly with server string render +* renders an input with a value and readOnly with clean client render +* renders an input with a value and no onChange/readOnly with server string render +* renders an input with a value and no onChange/readOnly with clean client render +* renders an input with a defaultValue with server string render +* renders an input with a defaultValue with clean client render +* renders an input value overriding defaultValue with server string render +* renders an input value overriding defaultValue with clean client render +* renders an input value overriding defaultValue no matter the prop order with server string render +* renders an input value overriding defaultValue no matter the prop order with clean client render +* renders a checkbox that is checked with an onChange with server string render +* renders a checkbox that is checked with an onChange with clean client render +* renders a checkbox that is checked with readOnly with server string render +* renders a checkbox that is checked with readOnly with clean client render +* renders a checkbox that is checked and no onChange/readOnly with server string render +* renders a checkbox that is checked and no onChange/readOnly with clean client render +* renders a checkbox with defaultChecked with server string render +* renders a checkbox with defaultChecked with clean client render +* renders a checkbox checked overriding defaultChecked with server string render +* renders a checkbox checked overriding defaultChecked with clean client render +* renders a checkbox checked overriding defaultChecked no matter the prop order with server string render +* renders a checkbox checked overriding defaultChecked no matter the prop order with clean client render +* renders a textarea with a value and an onChange with server string render +* renders a textarea with a value and an onChange with clean client render +* renders a textarea with a value and readOnly with server string render +* renders a textarea with a value and readOnly with clean client render +* renders a textarea with a value and no onChange/readOnly with server string render +* renders a textarea with a value and no onChange/readOnly with clean client render +* renders a textarea with a defaultValue with server string render +* renders a textarea with a defaultValue with clean client render +* renders a textarea value overriding defaultValue with server string render +* renders a textarea value overriding defaultValue with clean client render +* renders a textarea value overriding defaultValue no matter the prop order with server string render +* renders a textarea value overriding defaultValue no matter the prop order with clean client render +* renders a select with a value and an onChange with server string render +* renders a select with a value and an onChange with clean client render +* renders a select with a value and readOnly with server string render +* renders a select with a value and readOnly with clean client render +* renders a select with a multiple values and an onChange with server string render +* renders a select with a multiple values and an onChange with clean client render +* renders a select with a multiple values and readOnly with server string render +* renders a select with a multiple values and readOnly with clean client render +* renders a select with a value and no onChange/readOnly with server string render +* renders a select with a value and no onChange/readOnly with clean client render +* renders a select with a defaultValue with server string render +* renders a select with a defaultValue with clean client render +* renders a select value overriding defaultValue with server string render +* renders a select value overriding defaultValue with clean client render +* renders a select value overriding defaultValue no matter the prop order with server string render +* renders a select value overriding defaultValue no matter the prop order with clean client render +* renders a controlled text input with clean client render +* renders a controlled textarea with clean client render +* renders a controlled checkbox with clean client render +* renders a controlled select with clean client render * renders class child with context with server string render * renders class child with context with clean client render * renders stateless child with context with server string render @@ -1193,7 +1249,6 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js * should reconnect Pure Component to Bare Element * should reconnect Bare Element to Bare Element * should reconnect a div with a number and string version of number -* should reconnect if component trees differ but resulting markup is the same src/renderers/dom/shared/__tests__/ReactDOMTextComponent-test.js * updates a mounted text component in place diff --git a/src/renderers/dom/shared/CSSPropertyOperations.js b/src/renderers/dom/shared/CSSPropertyOperations.js index d23c5b6be4..a7a70ed895 100644 --- a/src/renderers/dom/shared/CSSPropertyOperations.js +++ b/src/renderers/dom/shared/CSSPropertyOperations.js @@ -30,7 +30,6 @@ var processStyleName = memoizeStringOnly(function(styleName) { }); var hasShorthandPropertyBug = false; -var styleFloatAccessor = 'cssFloat'; if (ExecutionEnvironment.canUseDOM) { var tempStyle = document.createElement('div').style; try { @@ -39,10 +38,6 @@ if (ExecutionEnvironment.canUseDOM) { } catch (e) { hasShorthandPropertyBug = true; } - // IE8 only supports accessing cssFloat (standard) as styleFloat - if (document.documentElement.style.cssFloat === undefined) { - styleFloatAccessor = 'styleFloat'; - } } if (__DEV__) { @@ -215,8 +210,8 @@ var CSSPropertyOperations = { styles[styleName], component, ); - if (styleName === 'float' || styleName === 'cssFloat') { - styleName = styleFloatAccessor; + if (styleName === 'float') { + styleName = 'cssFloat'; } if (styleValue) { style[styleName] = styleValue; diff --git a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js index 2eda9c38fc..af29b8d5ac 100644 --- a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js +++ b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js @@ -16,6 +16,7 @@ let React; let ReactDOM; let ReactDOMServer; let ReactDOMFeatureFlags; +let ReactTestUtils; // Helper functions for rendering tests // ==================================== @@ -209,6 +210,7 @@ function resetModules() { ReactDOM = require('ReactDOM'); ReactDOMServer = require('ReactDOMServer'); ReactDOMFeatureFlags = require('ReactDOMFeatureFlags'); + ReactTestUtils = require('ReactTestUtils'); ExecutionEnvironment = require('ExecutionEnvironment'); } @@ -1022,6 +1024,556 @@ describe('ReactDOMServerIntegration', () => { }); }); + describe('form controls', function() { + describe('inputs', function() { + itRenders('an input with a value and an onChange', async render => { + const e = await render( {}} />); + expect(e.value).toBe('foo'); + }); + + itRenders('an input with a value and readOnly', async render => { + const e = await render(); + expect(e.value).toBe('foo'); + }); + + itRenders( + 'an input with a value and no onChange/readOnly', + async render => { + // this configuration should raise a dev warning that value without + // onChange or readOnly is a mistake. + const e = await render(, 1); + expect(e.value).toBe('foo'); + expect(e.getAttribute('value')).toBe('foo'); + }, + ); + + itRenders('an input with a defaultValue', async render => { + const e = await render(); + expect(e.value).toBe('foo'); + expect(e.getAttribute('value')).toBe('foo'); + expect(e.getAttribute('defaultValue')).toBe(null); + }); + + itRenders('an input value overriding defaultValue', async render => { + const e = await render( + , + 1, + ); + expect(e.value).toBe('foo'); + expect(e.getAttribute('value')).toBe('foo'); + expect(e.getAttribute('defaultValue')).toBe(null); + }); + + itRenders( + 'an input value overriding defaultValue no matter the prop order', + async render => { + const e = await render( + , + 1, + ); + expect(e.value).toBe('foo'); + expect(e.getAttribute('value')).toBe('foo'); + expect(e.getAttribute('defaultValue')).toBe(null); + }, + ); + }); + + describe('checkboxes', function() { + itRenders('a checkbox that is checked with an onChange', async render => { + const e = await render( + {}} />, + ); + expect(e.checked).toBe(true); + }); + + itRenders('a checkbox that is checked with readOnly', async render => { + const e = await render( + , + ); + expect(e.checked).toBe(true); + }); + + itRenders( + 'a checkbox that is checked and no onChange/readOnly', + async render => { + // this configuration should raise a dev warning that checked without + // onChange or readOnly is a mistake. + const e = await render(, 1); + expect(e.checked).toBe(true); + }, + ); + + itRenders('a checkbox with defaultChecked', async render => { + const e = await render(); + expect(e.checked).toBe(true); + expect(e.getAttribute('defaultChecked')).toBe(null); + }); + + itRenders( + 'a checkbox checked overriding defaultChecked', + async render => { + const e = await render( + , + 1, + ); + expect(e.checked).toBe(true); + expect(e.getAttribute('defaultChecked')).toBe(null); + }, + ); + + itRenders( + 'a checkbox checked overriding defaultChecked no matter the prop order', + async render => { + const e = await render( + , + 1, + ); + expect(e.checked).toBe(true); + expect(e.getAttribute('defaultChecked')).toBe(null); + }, + ); + }); + + describe('textareas', function() { + // textareas + // --------- + itRenders('a textarea with a value and an onChange', async render => { + const e = await render(