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 `<meta>` 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 `<html>`. `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`
Sebastian Silbermann committed
Feb 10, 2023 at 19:19 UTC
b8ae89f38288bfae37dff54fa1ec4bf3b4555ed5
3 files changed
+64
-25
fixtures/attribute-behavior/AttributeTableSnapshot.md
+44
-19
@@ -1,4 +1,4 @@
1
-## `about` (on `<div>` inside `<div>`)
1
+## `about` (on `<div>` inside `<div>`)
2
| Test Case | Flags | Result |
3
| --- | --- | --- |
4
| `about=(string)`| (changed)| `"a string"` |
@@ -1998,7 +1998,7 @@
1998
| `colSpan=(null)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
1999
| `colSpan=(undefined)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
2000
2001
-## `content` (on `<meta>` inside `<div>`)
2001
+## `content` (on `<meta>` inside `<head>`)
2002
| Test Case | Flags | Result |
2003
| --- | --- | --- |
2004
| `content=(string)`| (changed)| `"a string"` |
@@ -5123,7 +5123,7 @@
5123
| `htmlFor=(null)`| (initial)| `<empty string>` |
5124
| `htmlFor=(undefined)`| (initial)| `<empty string>` |
5125
5126
-## `http-equiv` (on `<meta>` inside `<div>`)
5126
+## `http-equiv` (on `<meta>` inside `<head>`)
5127
| Test Case | Flags | Result |
5128
| --- | --- | --- |
5129
| `http-equiv=(string)`| (changed, warning)| `"a string"` |
@@ -5148,7 +5148,7 @@
5148
| `http-equiv=(null)`| (initial, warning)| `<empty string>` |
5149
| `http-equiv=(undefined)`| (initial, warning)| `<empty string>` |
5150
5151
-## `httpEquiv` (on `<meta>` inside `<div>`)
5151
+## `httpEquiv` (on `<meta>` inside `<head>`)
5152
| Test Case | Flags | Result |
5153
| --- | --- | --- |
5154
| `httpEquiv=(string)`| (changed)| `"a string"` |
@@ -6198,6 +6198,31 @@
6198
| `lang=(null)`| (initial)| `<empty string>` |
6199
| `lang=(undefined)`| (initial)| `<empty string>` |
6200
6201
+## `lang` (on `<html>` inside `<document>`)
6202
+| Test Case | Flags | Result |
6203
+| --- | --- | --- |
6204
+| `lang=(string)`| (changed, ssr mismatch)| `"a string"` |
6205
+| `lang=(empty string)`| (initial)| `<empty string>` |
6206
+| `lang=(array with string)`| (changed, ssr mismatch)| `"string"` |
6207
+| `lang=(empty array)`| (initial)| `<empty string>` |
6208
+| `lang=(object)`| (changed, ssr mismatch)| `"result of toString()"` |
6209
+| `lang=(numeric string)`| (changed, ssr mismatch)| `"42"` |
6210
+| `lang=(-1)`| (changed, ssr mismatch)| `"-1"` |
6211
+| `lang=(0)`| (changed, ssr mismatch)| `"0"` |
6212
+| `lang=(integer)`| (changed, ssr mismatch)| `"1"` |
6213
+| `lang=(NaN)`| (changed, warning, ssr mismatch)| `"NaN"` |
6214
+| `lang=(float)`| (changed, ssr mismatch)| `"99.99"` |
6215
+| `lang=(true)`| (initial, warning)| `<empty string>` |
6216
+| `lang=(false)`| (initial, warning)| `<empty string>` |
6217
+| `lang=(string 'true')`| (changed, ssr mismatch)| `"true"` |
6218
+| `lang=(string 'false')`| (changed, ssr mismatch)| `"false"` |
6219
+| `lang=(string 'on')`| (changed, ssr mismatch)| `"on"` |
6220
+| `lang=(string 'off')`| (changed, ssr mismatch)| `"off"` |
6221
+| `lang=(symbol)`| (initial, warning)| `<empty string>` |
6222
+| `lang=(function)`| (initial, warning)| `<empty string>` |
6223
+| `lang=(null)`| (initial)| `<empty string>` |
6224
+| `lang=(undefined)`| (initial)| `<empty string>` |
6225
+
6226
## `length` (on `<div>` inside `<div>`)
6227
| Test Case | Flags | Result |
6228
| --- | --- | --- |
@@ -12526,23 +12551,23 @@
12551
## `viewTarget` (on `<view>` inside `<svg>`)
12552
| Test Case | Flags | Result |
12553
| --- | --- | --- |
12529
-| `viewTarget=(string)`| (changed, ssr mismatch)| `"a string"` |
12530
-| `viewTarget=(empty string)`| (changed, ssr mismatch)| `<empty string>` |
12531
-| `viewTarget=(array with string)`| (changed, ssr mismatch)| `"string"` |
12532
-| `viewTarget=(empty array)`| (changed, ssr mismatch)| `<empty string>` |
12533
-| `viewTarget=(object)`| (changed, ssr mismatch)| `"result of toString()"` |
12534
-| `viewTarget=(numeric string)`| (changed, ssr mismatch)| `"42"` |
12535
-| `viewTarget=(-1)`| (changed, ssr mismatch)| `"-1"` |
12536
-| `viewTarget=(0)`| (changed, ssr mismatch)| `"0"` |
12537
-| `viewTarget=(integer)`| (changed, ssr mismatch)| `"1"` |
12538
-| `viewTarget=(NaN)`| (changed, warning, ssr mismatch)| `"NaN"` |
12539
-| `viewTarget=(float)`| (changed, ssr mismatch)| `"99.99"` |
12554
+| `viewTarget=(string)`| (changed)| `"a string"` |
12555
+| `viewTarget=(empty string)`| (changed)| `<empty string>` |
12556
+| `viewTarget=(array with string)`| (changed)| `"string"` |
12557
+| `viewTarget=(empty array)`| (changed)| `<empty string>` |
12558
+| `viewTarget=(object)`| (changed)| `"result of toString()"` |
12559
+| `viewTarget=(numeric string)`| (changed)| `"42"` |
12560
+| `viewTarget=(-1)`| (changed)| `"-1"` |
12561
+| `viewTarget=(0)`| (changed)| `"0"` |
12562
+| `viewTarget=(integer)`| (changed)| `"1"` |
12563
+| `viewTarget=(NaN)`| (changed, warning)| `"NaN"` |
12564
+| `viewTarget=(float)`| (changed)| `"99.99"` |
12565
| `viewTarget=(true)`| (initial, warning)| `<null>` |
12566
| `viewTarget=(false)`| (initial, warning)| `<null>` |
12542
-| `viewTarget=(string 'true')`| (changed, ssr mismatch)| `"true"` |
12543
-| `viewTarget=(string 'false')`| (changed, ssr mismatch)| `"false"` |
12544
-| `viewTarget=(string 'on')`| (changed, ssr mismatch)| `"on"` |
12545
-| `viewTarget=(string 'off')`| (changed, ssr mismatch)| `"off"` |
12567
+| `viewTarget=(string 'true')`| (changed)| `"true"` |
12568
+| `viewTarget=(string 'false')`| (changed)| `"false"` |
12569
+| `viewTarget=(string 'on')`| (changed)| `"on"` |
12570
+| `viewTarget=(string 'off')`| (changed)| `"off"` |
12571
| `viewTarget=(symbol)`| (initial, warning)| `<null>` |
12572
| `viewTarget=(function)`| (initial, warning)| `<null>` |
12573
| `viewTarget=(null)`| (initial)| `<null>` |
fixtures/attribute-behavior/src/App.js
+11
-3
@@ -237,6 +237,8 @@ function getRenderedAttributeValue(
237
return document.createElementNS('http://www.w3.org/2000/svg', 'svg');
238
} else if (containerTagName === 'document') {
239
return document.implementation.createHTMLDocument('');
240
+ } else if (containerTagName === 'head') {
241
+ return document.implementation.createHTMLDocument('').head;
242
} else {
243
return document.createElement(containerTagName);
244
}
@@ -282,12 +284,12 @@ function getRenderedAttributeValue(
284
try {
285
let container = createContainer();
286
renderer.render(react.createElement(tagName, baseProps), container);
285
- defaultValue = read(container.firstChild);
287
+ defaultValue = read(container.lastChild);
288
canonicalDefaultValue = getCanonicalizedValue(defaultValue);
289
290
container = createContainer();
291
renderer.render(react.createElement(tagName, props), container);
290
- result = read(container.firstChild);
292
+ result = read(container.lastChild);
293
canonicalResult = getCanonicalizedValue(result);
294
didWarn = _didWarn;
295
didError = false;
@@ -308,6 +310,12 @@ function getRenderedAttributeValue(
310
);
311
container = createContainer();
312
container.innerHTML = html;
313
+ } else if (containerTagName === 'head') {
314
+ const html = serverRenderer.renderToString(
315
+ react.createElement(tagName, props)
316
+ );
317
+ container = createContainer();
318
+ container.innerHTML = html;
319
} else {
320
const html = serverRenderer.renderToString(
321
react.createElement(
@@ -764,7 +772,7 @@ class App extends React.Component {
772
ReactDOMStable:
773
'https://unpkg.com/react-dom@latest/umd/react-dom.development.js',
774
ReactDOMServerStable:
767
- 'https://unpkg.com/react-dom@latest/umd/react-dom-server.browser.development.js',
775
+ 'https://unpkg.com/react-dom@latest/umd/react-dom-server-legacy.browser.development.js',
776
ReactNext: '/react.development.js',
777
ReactDOMNext: '/react-dom.development.js',
778
ReactDOMServerNext: '/react-dom-server-legacy.browser.development.js',
fixtures/attribute-behavior/src/attributes.js
+9
-3
@@ -356,7 +356,7 @@ const attributes = [
356
},
357
{name: 'cols', tagName: 'textarea'},
358
{name: 'colSpan', containerTagName: 'tr', tagName: 'td'},
359
- {name: 'content', tagName: 'meta'},
359
+ {name: 'content', containerTagName: 'head', tagName: 'meta'},
360
{name: 'contentEditable'},
361
{
362
name: 'contentScriptType',
@@ -934,8 +934,13 @@ const attributes = [
934
{name: 'href', tagName: 'a', overrideStringValue: 'https://reactjs.com'},
935
{name: 'hrefLang', read: getAttribute('hreflang')},
936
{name: 'htmlFor', tagName: 'label'},
937
- {name: 'http-equiv', tagName: 'meta', read: getProperty('httpEquiv')},
938
- {name: 'httpEquiv', tagName: 'meta'},
937
+ {
938
+ name: 'http-equiv',
939
+ containerTagName: 'head',
940
+ tagName: 'meta',
941
+ read: getProperty('httpEquiv'),
942
+ },
943
+ {name: 'httpEquiv', containerTagName: 'head', tagName: 'meta'},
944
{name: 'icon', tagName: 'command', read: getAttribute('icon')},
945
{name: 'id'},
946
{name: 'ID', read: getProperty('id')},
@@ -1076,6 +1081,7 @@ const attributes = [
1081
{name: 'label', tagName: 'track'},
1082
{name: 'LANG', read: getProperty('lang')},
1083
{name: 'lang'},
1084
+ {name: 'lang', containerTagName: 'document', tagName: 'html'},
1085
{name: 'length', read: getAttribute('length')},
1086
{
1087
name: 'lengthAdjust',