fix(progress-bar): query animation not working on safari (#12014)

Fixes the query animation not working on Safari. The issue comes from the fact that Safari won't resolve references correctly when the page has a `base` tag (which is required by `@angular/router`).

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(#' + progressbarId + ')'" width="100%" height="100%"/>
+  <rect [attr.fill]="'url(' + _currentPath + '#' + progressbarId + ')'" 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

@@ -1,10 +1,12 @@
 import {TestBed, async, ComponentFixture} from '@angular/core/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
+import {Location} from '@angular/common';
 import {MatProgressBarModule} from './index';
 
 
 describe('MatProgressBar', () => {
+  let fakePath = '/fake-path';
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -13,6 +15,10 @@ describe('MatProgressBar', () => {
         BasicProgressBar,
         BufferProgressBar,
       ],
+      providers: [{
+        provide: Location,
+        useValue: {path: () => fakePath}
+      }]
     });
 
     TestBed.compileComponents();
@@ -88,6 +94,11 @@ describe('MatProgressBar', () => {
       expect(progressComponent._bufferTransform()).toEqual({transform: 'scaleX(0.6)'});
     });
 
+    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#.*\)$/);
+    });
+
     it('should not be able to tab into the underlying SVG element', () => {
       const svg = fixture.debugElement.query(By.css('svg')).nativeElement;
       expect(svg.getAttribute('focusable')).toBe('false');

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

@@ -14,6 +14,7 @@ import {
   Optional,
   ViewEncapsulation
 } from '@angular/core';
+import {Location} from '@angular/common';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {CanColor, mixinColor} from '@angular/material/core';
 
@@ -54,11 +55,21 @@ 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) {
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
+              /**
+               * @deprecated `location` parameter to be made required.
+               * @deletion-target 8.0.0
+               */
+              @Optional() location?: Location) {
     super(_elementRef);
+    this._currentPath = location ? location.path() : '';
   }
 
   /** Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow. */