Add missing single-word attributes to property warning list (#10495)

* Add missing single-word attributes to property warning list

* Alphabetize svg and html configs in possible names

* Add basic test coverage for known single word attributes

* Add note about including whitelist properites in `possibleStandardNames

* Also add attribute sync comment to possibleStandardNames

Author: nhunzaker

src/renderers/dom/shared/HTMLDOMPropertyConfig.js

@@ -22,6 +22,9 @@ var HAS_OVERLOADED_BOOLEAN_VALUE =
   DOMProperty.injection.HAS_OVERLOADED_BOOLEAN_VALUE;
 
 var HTMLDOMPropertyConfig = {
+  // When adding attributes to this list, be sure to also add them to
+  // the `possibleStandardNames` module to ensure casing and incorrect
+  // name warnings.
   Properties: {
     allowFullScreen: HAS_BOOLEAN_VALUE,
     // specifies target context for links with `preload` type

src/renderers/dom/shared/SVGDOMPropertyConfig.js

@@ -17,8 +17,12 @@ var NS = {
 };
 
 /**
- * This is a list of all SVG attributes that need special
- * casing, namespacing, or boolean value assignment.
+ * This is a list of all SVG attributes that need special casing,
+ * namespacing, or boolean value assignment.
+ *
+ * When adding attributes to this list, be sure to also add them to
+ * the `possibleStandardNames` module to ensure casing and incorrect
+ * name warnings.
  *
  * SVG Attributes List:
  * https://www.w3.org/TR/SVG/attindex.html

src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js

@@ -2080,6 +2080,18 @@ describe('ReactDOMComponent', () => {
         'Warning: Invalid prop `whatever` on <div> tag.',
       );
     });
+
+    it('warns on bad casing of known HTML attributes', function() {
+      spyOn(console, 'error');
+
+      var el = ReactTestUtils.renderIntoDocument(<div SiZe="30" />);
+
+      expect(el.getAttribute('size')).toBe('30');
+
+      expectDev(console.error.calls.argsFor(0)[0]).toContain(
+        'Warning: Invalid DOM property `SiZe`. Did you mean `size`?',
+      );
+    });
   });
 
   describe('Object stringification', function() {