From 22da7b6fa568a905fbd3f9cb4362cffff3f37f8b Mon Sep 17 00:00:00 2001
From: Ben Alpert <ben@benalpert.com>
Date: Wed, 12 Nov 2014 01:51:46 -0800
Subject: [PATCH] Warn when casing CSS vendor prefixes incorrectly

Fixes #2487.

Test Plan: jest
---
 src/browser/ui/dom/CSSPropertyOperations.js   | 20 +++++++++++++++++++
 .../__tests__/CSSPropertyOperations-test.js   | 17 ++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/src/browser/ui/dom/CSSPropertyOperations.js b/src/browser/ui/dom/CSSPropertyOperations.js
index 3417378d564af..22f2ae0bee679 100644
--- a/src/browser/ui/dom/CSSPropertyOperations.js
+++ b/src/browser/ui/dom/CSSPropertyOperations.js
@@ -34,6 +34,9 @@ if (ExecutionEnvironment.canUseDOM) {
 }
 
 if (__DEV__) {
+  // 'msTransform' is correct, but the other prefixes should be capitalized
+  var badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/;
+
   var warnedStyleNames = {};
 
   var warnHyphenatedStyleName = function(name) {
@@ -48,6 +51,19 @@ if (__DEV__) {
       camelizeStyleName(name) + '?'
     );
   };
+
+  var warnBadVendoredStyleName = function(name) {
+    if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
+      return;
+    }
+
+    warnedStyleNames[name] = true;
+    warning(
+      false,
+      'Unsupported vendor-prefixed style property ' + name + '. Did you mean ' +
+      name.charAt(0).toUpperCase() + name.slice(1) + '?'
+    );
+  };
 }
 
 /**
@@ -76,6 +92,8 @@ var CSSPropertyOperations = {
       if (__DEV__) {
         if (styleName.indexOf('-') > -1) {
           warnHyphenatedStyleName(styleName);
+        } else if (badVendoredStyleNamePattern.test(styleName)) {
+          warnBadVendoredStyleName(styleName);
         }
       }
       var styleValue = styles[styleName];
@@ -103,6 +121,8 @@ var CSSPropertyOperations = {
       if (__DEV__) {
         if (styleName.indexOf('-') > -1) {
           warnHyphenatedStyleName(styleName);
+        } else if (badVendoredStyleNamePattern.test(styleName)) {
+          warnBadVendoredStyleName(styleName);
         }
       }
       var styleValue = dangerousStyleValue(styleName, styles[styleName]);
diff --git a/src/browser/ui/dom/__tests__/CSSPropertyOperations-test.js b/src/browser/ui/dom/__tests__/CSSPropertyOperations-test.js
index 0441ea366b0cc..a79d7732c538e 100644
--- a/src/browser/ui/dom/__tests__/CSSPropertyOperations-test.js
+++ b/src/browser/ui/dom/__tests__/CSSPropertyOperations-test.js
@@ -136,4 +136,21 @@ describe('CSSPropertyOperations', function() {
     expect(console.warn.argsForCall[1][0]).toContain('WebkitTransform');
   });
 
+  it('warns when miscapitalizing vendored style names', function() {
+    spyOn(console, 'warn');
+
+    CSSPropertyOperations.createMarkupForStyles({
+      msTransform: 'translate3d(0, 0, 0)',
+      oTransform: 'translate3d(0, 0, 0)',
+      webkitTransform: 'translate3d(0, 0, 0)'
+    });
+
+    // msTransform is correct already and shouldn't warn
+    expect(console.warn.argsForCall.length).toBe(2);
+    expect(console.warn.argsForCall[0][0]).toContain('oTransform');
+    expect(console.warn.argsForCall[0][0]).toContain('OTransform');
+    expect(console.warn.argsForCall[1][0]).toContain('webkitTransform');
+    expect(console.warn.argsForCall[1][0]).toContain('WebkitTransform');
+  });
+
 });