Do not toLowerCase lists of lowercase words (#13428)

* Do not toLowerCase lists of lowercase words

* Add notes about downcasing to DOMProperty.js

* Use consistent comment breakout

* Make toLowerCase more obvious

Author: nhunzaker

packages/react-dom/src/shared/DOMProperty.js

@@ -320,35 +320,55 @@ const properties = {};
   'multiple',
   'muted',
   'selected',
+
+  // NOTE: if you add a camelCased prop to this list,
+  // you'll need to set attributeName to name.toLowerCase()
+  // instead in the assignment below.
 ].forEach(name => {
   properties[name] = new PropertyInfoRecord(
     name,
     BOOLEAN,
     true, // mustUseProperty
-    name.toLowerCase(), // attributeName
+    name, // attributeName
     null, // attributeNamespace
   );
 });
 
 // These are HTML attributes that are "overloaded booleans": they behave like
 // booleans, but can also accept a string value.
-['capture', 'download'].forEach(name => {
+[
+  'capture',
+  'download',
+
+  // NOTE: if you add a camelCased prop to this list,
+  // you'll need to set attributeName to name.toLowerCase()
+  // instead in the assignment below.
+].forEach(name => {
   properties[name] = new PropertyInfoRecord(
     name,
     OVERLOADED_BOOLEAN,
     false, // mustUseProperty
-    name.toLowerCase(), // attributeName
+    name, // attributeName
     null, // attributeNamespace
   );
 });
 
 // These are HTML attributes that must be positive numbers.
-['cols', 'rows', 'size', 'span'].forEach(name => {
+[
+  'cols',
+  'rows',
+  'size',
+  'span',
+
+  // NOTE: if you add a camelCased prop to this list,
+  // you'll need to set attributeName to name.toLowerCase()
+  // instead in the assignment below.
+].forEach(name => {
   properties[name] = new PropertyInfoRecord(
     name,
     POSITIVE_NUMERIC,
     false, // mustUseProperty
-    name.toLowerCase(), // attributeName
+    name, // attributeName
     null, // attributeNamespace
   );
 });
@@ -446,6 +466,10 @@ const capitalize = token => token[1].toUpperCase();
   'writing-mode',
   'xmlns:xlink',
   'x-height',
+
+  // NOTE: if you add a camelCased prop to this list,
+  // you'll need to set attributeName to name.toLowerCase()
+  // instead in the assignment below.
 ].forEach(attributeName => {
   const name = attributeName.replace(CAMELIZE, capitalize);
   properties[name] = new PropertyInfoRecord(
@@ -466,6 +490,10 @@ const capitalize = token => token[1].toUpperCase();
   'xlink:show',
   'xlink:title',
   'xlink:type',
+
+  // NOTE: if you add a camelCased prop to this list,
+  // you'll need to set attributeName to name.toLowerCase()
+  // instead in the assignment below.
 ].forEach(attributeName => {
   const name = attributeName.replace(CAMELIZE, capitalize);
   properties[name] = new PropertyInfoRecord(
@@ -478,7 +506,15 @@ const capitalize = token => token[1].toUpperCase();
 });
 
 // String SVG attributes with the xml namespace.
-['xml:base', 'xml:lang', 'xml:space'].forEach(attributeName => {
+[
+  'xml:base',
+  'xml:lang',
+  'xml:space',
+
+  // NOTE: if you add a camelCased prop to this list,
+  // you'll need to set attributeName to name.toLowerCase()
+  // instead in the assignment below.
+].forEach(attributeName => {
   const name = attributeName.replace(CAMELIZE, capitalize);
   properties[name] = new PropertyInfoRecord(
     name,