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

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';
 }
 
 /**

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);

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.*\)/);
+  });
 });