fix(progress-bar): query animation not working inside routes with nam…

…ed outlets (#12350)

This is something that was introduced by #12014. Because we didn't have quotes around the URL in the `fill` value, the reference could become invalid if the user is on a route with a named outlet, which contains parentheses in its URL.

Fixes #12338.

src/lib/progress-bar/progress-bar.html

@@ -8,7 +8,7 @@
       <circle cx="2.5" cy="2.5" r="2.5"/>
     </pattern>
   </defs>
-  <rect [attr.fill]="'url(' + _currentPath + '#' + progressbarId + ')'" width="100%" height="100%"/>
+  <rect [attr.fill]="_rectangleFillValue" width="100%" height="100%"/>
 </svg>
 <div class="mat-progress-bar-buffer mat-progress-bar-element" [ngStyle]="_bufferTransform()"></div>
 <div class="mat-progress-bar-primary mat-progress-bar-fill mat-progress-bar-element" [ngStyle]="_primaryTransform()"></div>

src/lib/progress-bar/progress-bar.spec.ts

@@ -96,7 +96,7 @@ describe('MatProgressBar', () => {
 
     it('should prefix SVG references with the current path', () => {
       const rect = fixture.debugElement.query(By.css('rect')).nativeElement;
-      expect(rect.getAttribute('fill')).toMatch(/^url\(\/fake-path#.*\)$/);
+      expect(rect.getAttribute('fill')).toMatch(/^url\(['"]?\/fake-path#.*['"]?\)$/);
     });
 
     it('should not be able to tab into the underlying SVG element', () => {

src/lib/progress-bar/progress-bar.ts

@@ -55,12 +55,6 @@ let progressbarId = 0;
   encapsulation: ViewEncapsulation.None,
 })
 export class MatProgressBar extends _MatProgressBarMixinBase implements CanColor {
-  /**
-   * Current page path. Used to prefix SVG references which
-   * won't work on Safari unless they're prefixed with the path.
-   */
-  _currentPath: string;
-
   constructor(public _elementRef: ElementRef,
               @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
               /**
@@ -69,7 +63,11 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements CanColor
                */
               @Optional() location?: Location) {
     super(_elementRef);
-    this._currentPath = location ? location.path() : '';
+
+    // We need to prefix the SVG reference with the current path, otherwise they won't work
+    // in Safari if the page has a `<base>` tag. Note that we need quotes inside the `url()`,
+    // because named route URLs can contain parentheses (see #12338).
+    this._rectangleFillValue = `url('${location ? location.path() : ''}#${this.progressbarId}')`;
   }
 
   /** Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow. */
@@ -93,9 +91,12 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements CanColor
    */
   @Input() mode: 'determinate' | 'indeterminate' | 'buffer' | 'query' = 'determinate';
 
-  /** The id of the progress bar. */
+  /** ID of the progress bar. */
   progressbarId = `mat-progress-bar-${progressbarId++}`;
 
+  /** Attribute to be used for the `fill` attribute on the internal `rect` element. */
+  _rectangleFillValue: string;
+
   /** Gets the current transform value for the progress bar's primary indicator. */
   _primaryTransform() {
     const scale = this.value / 100;