From 1f6fcb6cd316dc2820f91993dfaa3076f35071dd Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Wed, 15 May 2019 20:24:55 +0200
Subject: [PATCH] fix(ivy): unable to bind SafeValue to clip-path (#30491)

Fixes not being able to pass in a `SafeValue` to a `clip-path` binding, because `clip-path` wasn't in the list of exceptions.

PR Close #30491
---
 .../src/render3/view/styling_builder.ts       |  2 +-
 .../core/src/sanitization/sanitization.ts     |  3 ++-
 packages/core/test/acceptance/styling_spec.ts | 20 +++++++++++++++++++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/compiler/src/render3/view/styling_builder.ts b/packages/compiler/src/render3/view/styling_builder.ts
index 3bbaf8640e..0260b29f1f 100644
--- a/packages/compiler/src/render3/view/styling_builder.ts
+++ b/packages/compiler/src/render3/view/styling_builder.ts
@@ -477,7 +477,7 @@ function isStyleSanitizable(prop: string): boolean {
   return prop === 'background-image' || prop === 'backgroundImage' || prop === 'background' ||
       prop === 'border-image' || prop === 'borderImage' || prop === 'filter' ||
       prop === 'list-style' || prop === 'listStyle' || prop === 'list-style-image' ||
-      prop === 'listStyleImage';
+      prop === 'listStyleImage' || prop === 'clip-path' || prop === 'clipPath';
 }
 
 /**
diff --git a/packages/core/src/sanitization/sanitization.ts b/packages/core/src/sanitization/sanitization.ts
index 5d5b4a3a5c..85150b3af1 100644
--- a/packages/core/src/sanitization/sanitization.ts
+++ b/packages/core/src/sanitization/sanitization.ts
@@ -186,7 +186,8 @@ export function ΔsanitizeUrlOrResourceUrl(unsafeUrl: any, tag: string, prop: st
 export const ΔdefaultStyleSanitizer = (function(prop: string, value?: string): string | boolean {
   if (value === undefined) {
     return prop === 'background-image' || prop === 'background' || prop === 'border-image' ||
-        prop === 'filter' || prop === 'list-style' || prop === 'list-style-image';
+        prop === 'filter' || prop === 'list-style' || prop === 'list-style-image' ||
+        prop === 'clip-path';
   }
 
   return ΔsanitizeStyle(value);
diff --git a/packages/core/test/acceptance/styling_spec.ts b/packages/core/test/acceptance/styling_spec.ts
index 66a53b619d..4b66286004 100644
--- a/packages/core/test/acceptance/styling_spec.ts
+++ b/packages/core/test/acceptance/styling_spec.ts
@@ -180,4 +180,24 @@ describe('styling', () => {
       fixture.detectChanges();
     }).not.toThrow();
   });
+
+  it('should be able to bind a SafeValue to clip-path', () => {
+    @Component({template: '<div [style.clip-path]="path"></div>'})
+    class Cmp {
+      path !: SafeStyle;
+    }
+
+    TestBed.configureTestingModule({declarations: [Cmp]});
+    const fixture = TestBed.createComponent(Cmp);
+    const sanitizer: DomSanitizer = TestBed.get(DomSanitizer);
+
+    fixture.componentInstance.path = sanitizer.bypassSecurityTrustStyle('url("#test")');
+    fixture.detectChanges();
+
+    const html = fixture.nativeElement.innerHTML;
+
+    // Note that check the raw HTML, because (at the time of writing) the Node-based renderer
+    // that we use to run tests doesn't support `clip-path` in `CSSStyleDeclaration`.
+    expect(html).toMatch(/style=["|']clip-path:\s*url\(.*#test.*\)/);
+  });
 });