From ea1b5c100f777c6107baa3380cfd3126c63552a8 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Tue, 22 Jan 2019 20:48:21 +0100
Subject: [PATCH] fix(ivy): not applying camelCased style properties (#28276)

Fixes Ivy not applying properties that are set in camelCase, because it goes through the `CSSStyleDeclaration` API via `setProperty` and `removeProperty` which requires for [the values to be in dash-case](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty).

**Note:** I opted to let the browser normalize the value, rather than convert it to dash-case during compile time, because there are some special cases like browser-prefixed properties where we might not normalize it in-line with the browser.

This PR fixes FW-579.

PR Close #28276
---
 .../styling/class_and_style_bindings.ts       |  4 +--
 .../styling/class_and_style_bindings_spec.ts  | 35 +++++++++++++++++++
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/render3/styling/class_and_style_bindings.ts b/packages/core/src/render3/styling/class_and_style_bindings.ts
index 0bcee71d94..a22b096772 100644
--- a/packages/core/src/render3/styling/class_and_style_bindings.ts
+++ b/packages/core/src/render3/styling/class_and_style_bindings.ts
@@ -951,12 +951,12 @@ export function setStyle(
     ngDevMode && ngDevMode.rendererSetStyle++;
     isProceduralRenderer(renderer) ?
         renderer.setStyle(native, prop, value, RendererStyleFlags3.DashCase) :
-        native['style'].setProperty(prop, value);
+        native.style[prop] = value;
   } else {
     ngDevMode && ngDevMode.rendererRemoveStyle++;
     isProceduralRenderer(renderer) ?
         renderer.removeStyle(native, prop, RendererStyleFlags3.DashCase) :
-        native['style'].removeProperty(prop);
+        native.style[prop] = '';
   }
 }
 
diff --git a/packages/core/test/render3/styling/class_and_style_bindings_spec.ts b/packages/core/test/render3/styling/class_and_style_bindings_spec.ts
index 05f4fc0a85..690e104c87 100644
--- a/packages/core/test/render3/styling/class_and_style_bindings_spec.ts
+++ b/packages/core/test/render3/styling/class_and_style_bindings_spec.ts
@@ -380,6 +380,41 @@ describe('style and class based bindings', () => {
             .toEqual(
                 '<svg style="height: 100px; width: 100px;"><circle fill="yellow" stroke="green"></circle></svg>');
       });
+
+      it('should support binding to camelCased style properties', () => {
+        // <div [style.borderWidth]="borderWidth"></div>
+        class Comp {
+          borderWidth: string = '3px';
+
+          static ngComponentDef = defineComponent({
+            type: Comp,
+            selectors: [['comp']],
+            factory: () => new Comp(),
+            consts: 1,
+            vars: 0,
+            template: (rf: RenderFlags, ctx: Comp) => {
+              if (rf & RenderFlags.Create) {
+                elementStart(0, 'div');
+                elementStyling(null, ['borderWidth']);
+                elementEnd();
+              }
+              if (rf & RenderFlags.Update) {
+                elementStyleProp(0, 0, ctx.borderWidth);
+                elementStylingApply(0);
+              }
+            }
+          });
+        }
+
+        const fixture = new ComponentFixture(Comp);
+        fixture.update();
+
+        const target = fixture.hostElement.querySelector('div') !as any;
+
+        expect(target.style.borderWidth).toEqual('3px');
+        expect(fixture.html).toEqual('<div style="border-width: 3px;"></div>');
+      });
+
     });
 
     describe('dynamic styling properties within a styling context', () => {