From b8ae89f38288bfae37dff54fa1ec4bf3b4555ed5 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 10 Feb 2023 19:19:26 +0100 Subject: [PATCH] Fix and update attribute-behavior fixture (#26114) ## Summary Due to https://github.com/facebook/react/issues/25928 the attribute fixture could no longer finish since it expects at least something to render. But since Fizz currently breaks down completely on malformed `` tags, the fixture could no longer handle this. The fixture now renders valid types for `meta` tags. Note that the snapshot change to `viewTarget`` is already on `main`. Review by commit helps to understand this. Added `html[lang]` so that we test at least one standard attribute on ``. `version` is obsolete so results are not that trustworthy. ## How did you test this change? With Chrome Version 109.0.5414.119 (Official Build) (64-bit) - `yarn build --type=UMD_DEV react/index,react-dom && cd fixtures/attribute-behavior && yarn install && yarn start` --- .../AttributeTableSnapshot.md | 63 +++++++++++++------ fixtures/attribute-behavior/src/App.js | 14 ++++- fixtures/attribute-behavior/src/attributes.js | 12 +++- 3 files changed, 64 insertions(+), 25 deletions(-) diff --git a/fixtures/attribute-behavior/AttributeTableSnapshot.md b/fixtures/attribute-behavior/AttributeTableSnapshot.md index 559a82fa4fa05..89e126ba234cf 100644 --- a/fixtures/attribute-behavior/AttributeTableSnapshot.md +++ b/fixtures/attribute-behavior/AttributeTableSnapshot.md @@ -1,4 +1,4 @@ -## `about` (on `
` inside `
`) +## `about` (on `
` inside `
`) | Test Case | Flags | Result | | --- | --- | --- | | `about=(string)`| (changed)| `"a string"` | @@ -1998,7 +1998,7 @@ | `colSpan=(null)`| (initial, ssr error, ssr mismatch)| `` | | `colSpan=(undefined)`| (initial, ssr error, ssr mismatch)| `` | -## `content` (on `` inside `
`) +## `content` (on `` inside ``) | Test Case | Flags | Result | | --- | --- | --- | | `content=(string)`| (changed)| `"a string"` | @@ -5123,7 +5123,7 @@ | `htmlFor=(null)`| (initial)| `` | | `htmlFor=(undefined)`| (initial)| `` | -## `http-equiv` (on `` inside `
`) +## `http-equiv` (on `` inside ``) | Test Case | Flags | Result | | --- | --- | --- | | `http-equiv=(string)`| (changed, warning)| `"a string"` | @@ -5148,7 +5148,7 @@ | `http-equiv=(null)`| (initial, warning)| `` | | `http-equiv=(undefined)`| (initial, warning)| `` | -## `httpEquiv` (on `` inside `
`) +## `httpEquiv` (on `` inside ``) | Test Case | Flags | Result | | --- | --- | --- | | `httpEquiv=(string)`| (changed)| `"a string"` | @@ -6198,6 +6198,31 @@ | `lang=(null)`| (initial)| `` | | `lang=(undefined)`| (initial)| `` | +## `lang` (on `` inside ``) +| Test Case | Flags | Result | +| --- | --- | --- | +| `lang=(string)`| (changed, ssr mismatch)| `"a string"` | +| `lang=(empty string)`| (initial)| `` | +| `lang=(array with string)`| (changed, ssr mismatch)| `"string"` | +| `lang=(empty array)`| (initial)| `` | +| `lang=(object)`| (changed, ssr mismatch)| `"result of toString()"` | +| `lang=(numeric string)`| (changed, ssr mismatch)| `"42"` | +| `lang=(-1)`| (changed, ssr mismatch)| `"-1"` | +| `lang=(0)`| (changed, ssr mismatch)| `"0"` | +| `lang=(integer)`| (changed, ssr mismatch)| `"1"` | +| `lang=(NaN)`| (changed, warning, ssr mismatch)| `"NaN"` | +| `lang=(float)`| (changed, ssr mismatch)| `"99.99"` | +| `lang=(true)`| (initial, warning)| `` | +| `lang=(false)`| (initial, warning)| `` | +| `lang=(string 'true')`| (changed, ssr mismatch)| `"true"` | +| `lang=(string 'false')`| (changed, ssr mismatch)| `"false"` | +| `lang=(string 'on')`| (changed, ssr mismatch)| `"on"` | +| `lang=(string 'off')`| (changed, ssr mismatch)| `"off"` | +| `lang=(symbol)`| (initial, warning)| `` | +| `lang=(function)`| (initial, warning)| `` | +| `lang=(null)`| (initial)| `` | +| `lang=(undefined)`| (initial)| `` | + ## `length` (on `
` inside `
`) | Test Case | Flags | Result | | --- | --- | --- | @@ -12526,23 +12551,23 @@ ## `viewTarget` (on `` inside ``) | Test Case | Flags | Result | | --- | --- | --- | -| `viewTarget=(string)`| (changed, ssr mismatch)| `"a string"` | -| `viewTarget=(empty string)`| (changed, ssr mismatch)| `` | -| `viewTarget=(array with string)`| (changed, ssr mismatch)| `"string"` | -| `viewTarget=(empty array)`| (changed, ssr mismatch)| `` | -| `viewTarget=(object)`| (changed, ssr mismatch)| `"result of toString()"` | -| `viewTarget=(numeric string)`| (changed, ssr mismatch)| `"42"` | -| `viewTarget=(-1)`| (changed, ssr mismatch)| `"-1"` | -| `viewTarget=(0)`| (changed, ssr mismatch)| `"0"` | -| `viewTarget=(integer)`| (changed, ssr mismatch)| `"1"` | -| `viewTarget=(NaN)`| (changed, warning, ssr mismatch)| `"NaN"` | -| `viewTarget=(float)`| (changed, ssr mismatch)| `"99.99"` | +| `viewTarget=(string)`| (changed)| `"a string"` | +| `viewTarget=(empty string)`| (changed)| `` | +| `viewTarget=(array with string)`| (changed)| `"string"` | +| `viewTarget=(empty array)`| (changed)| `` | +| `viewTarget=(object)`| (changed)| `"result of toString()"` | +| `viewTarget=(numeric string)`| (changed)| `"42"` | +| `viewTarget=(-1)`| (changed)| `"-1"` | +| `viewTarget=(0)`| (changed)| `"0"` | +| `viewTarget=(integer)`| (changed)| `"1"` | +| `viewTarget=(NaN)`| (changed, warning)| `"NaN"` | +| `viewTarget=(float)`| (changed)| `"99.99"` | | `viewTarget=(true)`| (initial, warning)| `` | | `viewTarget=(false)`| (initial, warning)| `` | -| `viewTarget=(string 'true')`| (changed, ssr mismatch)| `"true"` | -| `viewTarget=(string 'false')`| (changed, ssr mismatch)| `"false"` | -| `viewTarget=(string 'on')`| (changed, ssr mismatch)| `"on"` | -| `viewTarget=(string 'off')`| (changed, ssr mismatch)| `"off"` | +| `viewTarget=(string 'true')`| (changed)| `"true"` | +| `viewTarget=(string 'false')`| (changed)| `"false"` | +| `viewTarget=(string 'on')`| (changed)| `"on"` | +| `viewTarget=(string 'off')`| (changed)| `"off"` | | `viewTarget=(symbol)`| (initial, warning)| `` | | `viewTarget=(function)`| (initial, warning)| `` | | `viewTarget=(null)`| (initial)| `` | diff --git a/fixtures/attribute-behavior/src/App.js b/fixtures/attribute-behavior/src/App.js index 9307d6a2c81de..db77eba907c5a 100644 --- a/fixtures/attribute-behavior/src/App.js +++ b/fixtures/attribute-behavior/src/App.js @@ -237,6 +237,8 @@ function getRenderedAttributeValue( return document.createElementNS('http://www.w3.org/2000/svg', 'svg'); } else if (containerTagName === 'document') { return document.implementation.createHTMLDocument(''); + } else if (containerTagName === 'head') { + return document.implementation.createHTMLDocument('').head; } else { return document.createElement(containerTagName); } @@ -282,12 +284,12 @@ function getRenderedAttributeValue( try { let container = createContainer(); renderer.render(react.createElement(tagName, baseProps), container); - defaultValue = read(container.firstChild); + defaultValue = read(container.lastChild); canonicalDefaultValue = getCanonicalizedValue(defaultValue); container = createContainer(); renderer.render(react.createElement(tagName, props), container); - result = read(container.firstChild); + result = read(container.lastChild); canonicalResult = getCanonicalizedValue(result); didWarn = _didWarn; didError = false; @@ -308,6 +310,12 @@ function getRenderedAttributeValue( ); container = createContainer(); container.innerHTML = html; + } else if (containerTagName === 'head') { + const html = serverRenderer.renderToString( + react.createElement(tagName, props) + ); + container = createContainer(); + container.innerHTML = html; } else { const html = serverRenderer.renderToString( react.createElement( @@ -764,7 +772,7 @@ class App extends React.Component { ReactDOMStable: 'https://unpkg.com/react-dom@latest/umd/react-dom.development.js', ReactDOMServerStable: - 'https://unpkg.com/react-dom@latest/umd/react-dom-server.browser.development.js', + 'https://unpkg.com/react-dom@latest/umd/react-dom-server-legacy.browser.development.js', ReactNext: '/react.development.js', ReactDOMNext: '/react-dom.development.js', ReactDOMServerNext: '/react-dom-server-legacy.browser.development.js', diff --git a/fixtures/attribute-behavior/src/attributes.js b/fixtures/attribute-behavior/src/attributes.js index c0e5a133f1dce..afd902d61d4c3 100644 --- a/fixtures/attribute-behavior/src/attributes.js +++ b/fixtures/attribute-behavior/src/attributes.js @@ -356,7 +356,7 @@ const attributes = [ }, {name: 'cols', tagName: 'textarea'}, {name: 'colSpan', containerTagName: 'tr', tagName: 'td'}, - {name: 'content', tagName: 'meta'}, + {name: 'content', containerTagName: 'head', tagName: 'meta'}, {name: 'contentEditable'}, { name: 'contentScriptType', @@ -934,8 +934,13 @@ const attributes = [ {name: 'href', tagName: 'a', overrideStringValue: 'https://reactjs.com'}, {name: 'hrefLang', read: getAttribute('hreflang')}, {name: 'htmlFor', tagName: 'label'}, - {name: 'http-equiv', tagName: 'meta', read: getProperty('httpEquiv')}, - {name: 'httpEquiv', tagName: 'meta'}, + { + name: 'http-equiv', + containerTagName: 'head', + tagName: 'meta', + read: getProperty('httpEquiv'), + }, + {name: 'httpEquiv', containerTagName: 'head', tagName: 'meta'}, {name: 'icon', tagName: 'command', read: getAttribute('icon')}, {name: 'id'}, {name: 'ID', read: getProperty('id')}, @@ -1076,6 +1081,7 @@ const attributes = [ {name: 'label', tagName: 'track'}, {name: 'LANG', read: getProperty('lang')}, {name: 'lang'}, + {name: 'lang', containerTagName: 'document', tagName: 'html'}, {name: 'length', read: getAttribute('length')}, { name: 'lengthAdjust',