Add test. Use viewport ruler

Author: tinayuangao

src/lib/button/button.spec.ts

@@ -2,6 +2,7 @@ import {async, TestBed, ComponentFixture} from '@angular/core/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MdButtonModule} from './button';
+import {ViewportRuler} from '../core/overlay/position/viewport-ruler';
 
 
 describe('MdButton', () => {
@@ -10,6 +11,9 @@ describe('MdButton', () => {
     TestBed.configureTestingModule({
       imports: [MdButtonModule.forRoot()],
       declarations: [TestApp],
+      providers: [
+        {provide: ViewportRuler, useClass: FakeViewportRuler},
+      ]
     });
 
     TestBed.compileComponents();
@@ -210,3 +214,15 @@ class TestApp {
     this.clickCount++;
   }
 }
+
+class FakeViewportRuler {
+  getViewportRect() {
+    return {
+      left: 0, top: 0, width: 1014, height: 686, bottom: 686, right: 1014
+    };
+  }
+
+  getViewportScrollPosition() {
+    return {top: 0, left: 0};
+  }
+}

src/lib/checkbox/checkbox.spec.ts

@@ -12,6 +12,7 @@ import {
 import {Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MdCheckbox, MdCheckboxChange, MdCheckboxModule} from './checkbox';
+import {ViewportRuler} from '../core/overlay/position/viewport-ruler';
 
 
 // TODO: Implement E2E tests for spacebar/click behavior for checking/unchecking
@@ -32,6 +33,9 @@ describe('MdCheckbox', () => {
         CheckboxWithNameAttribute,
         CheckboxWithChangeEvent,
       ],
+      providers: [
+        {provide: ViewportRuler, useClass: FakeViewportRuler},
+      ]
     });
 
     TestBed.compileComponents();
@@ -660,3 +664,15 @@ class CheckboxWithNameAttribute {}
 class CheckboxWithChangeEvent {
   lastEvent: MdCheckboxChange;
 }
+
+class FakeViewportRuler {
+  getViewportRect() {
+    return {
+      left: 0, top: 0, width: 1014, height: 686, bottom: 686, right: 1014
+    };
+  }
+
+  getViewportScrollPosition() {
+    return {top: 0, left: 0};
+  }
+}

src/lib/core/overlay/position/viewport-ruler.ts

@@ -50,12 +50,8 @@ export class ViewportRuler {
     // `scrollTop` and `scrollLeft` is inconsistent. However, using the bounding rect of
     // `document.documentElement` works consistently, where the `top` and `left` values will
     // equal negative the scroll position.
-    const top =  documentRect.top < 0 && document.body.scrollTop == 0 ?
-        -documentRect.top :
-        document.body.scrollTop;
-    const left = documentRect.left < 0 && document.body.scrollLeft == 0 ?
-        -documentRect.left :
-        document.body.scrollLeft;
+    const top = -documentRect.top || document.body.scrollTop || window.scrollY || 0;
+    const left = -documentRect.left || document.body.scrollLeft || window.scrollX || 0;
 
     return {top, left};
   }

src/lib/core/ripple/ripple.spec.ts

@@ -185,6 +185,7 @@ describe('MdRipple', () => {
       expect(pxStringToFloat(ripple.style.height)).toBeCloseTo(2 * expectedRadius, 1);
     });
 
+
     it('cleans up the event handlers when the container gets destroyed', () => {
       fixture = TestBed.createComponent(RippleContainerWithNgIf);
       fixture.detectChanges();
@@ -197,7 +198,97 @@ describe('MdRipple', () => {
 
       rippleElement.dispatchEvent(createMouseEvent('mousedown'));
       expect(rippleBackground.classList).not.toContain('md-ripple-active');
+
+    it('create ripple with correct position when page is scrolled', () => {
+      let elementTop = 600;
+      let elementLeft = 750;
+      let pageScrollTop = 500;
+      let pageScrollLeft = 500;
+      let left = 50;
+      let top = 75;
+
+      // Add a very large element to make the page scroll
+      let veryLargeElement = document.createElement('div');
+      veryLargeElement.style.width = '4000px';
+      veryLargeElement.style.height = '4000px';
+      document.body.appendChild(veryLargeElement);
+      document.body.scrollTop = pageScrollTop;
+      document.body.scrollLeft = pageScrollLeft;
+
+      rippleElement.style.position = 'absolute';
+      rippleElement.style.left = `${elementLeft}px`;
+      rippleElement.style.top = `${elementTop}px`;
+
+      // Simulate a keyboard-triggered click by setting event coordinates to 0.
+      const clickEvent = createMouseEvent('click', {
+        clientX: left + elementLeft - pageScrollLeft,
+        clientY: top + elementTop - pageScrollTop,
+        screenX: left + elementLeft,
+        screenY: top + elementTop
+      });
     });
+
+    describe('when page is scrolled', () => {
+      var veryLargeElement: HTMLDivElement = document.createElement('div');
+      var pageScrollTop = 500;
+      var pageScrollLeft = 500;
+
+      beforeEach(() => {
+        // Add a very large element to make the page scroll
+        veryLargeElement.style.width = '4000px';
+        veryLargeElement.style.height = '4000px';
+        document.body.appendChild(veryLargeElement);
+        document.body.scrollTop = pageScrollTop;
+        document.body.scrollLeft = pageScrollLeft;
+        // Firefox
+        document.documentElement.scrollLeft = pageScrollLeft;
+        document.documentElement.scrollTop = pageScrollTop;
+        // Mobile safari
+        window.scrollTo(pageScrollLeft, pageScrollTop);
+      });
+
+      afterEach(() => {
+        document.body.removeChild(veryLargeElement);
+        document.body.scrollTop = 0;
+        document.body.scrollLeft = 0;
+        // Firefox
+        document.documentElement.scrollLeft = 0;
+        document.documentElement.scrollTop = 0;
+        // Mobile safari
+        window.scrollTo(0, 0);
+      });
+
+      it('create ripple with correct position', () => {
+        let elementTop = 600;
+        let elementLeft = 750;
+        let left = 50;
+        let top = 75;
+
+        rippleElement.style.position = 'absolute';
+        rippleElement.style.left = `${elementLeft}px`;
+        rippleElement.style.top = `${elementTop}px`;
+
+        // Simulate a keyboard-triggered click by setting event coordinates to 0.
+        const clickEvent = createMouseEvent('click', {
+          clientX: left + elementLeft - pageScrollLeft,
+          clientY: top + elementTop - pageScrollTop,
+          screenX: left + elementLeft,
+          screenY: top + elementTop
+        });
+        rippleElement.dispatchEvent(clickEvent);
+
+        const expectedRadius = Math.sqrt(250 * 250 + 125 * 125);
+        const expectedLeft = left - expectedRadius;
+        const expectedTop = top - expectedRadius;
+
+        const ripple = <HTMLElement>rippleElement.querySelector('.md-ripple-foreground');
+        expect(pxStringToFloat(ripple.style.left)).toBeCloseTo(expectedLeft, 1);
+        expect(pxStringToFloat(ripple.style.top)).toBeCloseTo(expectedTop, 1);
+        expect(pxStringToFloat(ripple.style.width)).toBeCloseTo(2 * expectedRadius, 1);
+        expect(pxStringToFloat(ripple.style.height)).toBeCloseTo(2 * expectedRadius, 1);
+      });
+    });
+
   });
 
   describe('configuring behavior', () => {

src/lib/core/ripple/ripple.ts

@@ -15,6 +15,7 @@ import {
   ForegroundRipple,
   ForegroundRippleState,
 } from './ripple-renderer';
+import {ViewportRuler} from '../overlay/position/viewport-ruler';
 
 
 @Directive({
@@ -60,14 +61,16 @@ export class MdRipple implements OnInit, OnDestroy, OnChanges {
   @HostBinding('class.md-ripple-unbounded') @Input('md-ripple-unbounded') unbounded: boolean;
 
   private _rippleRenderer: RippleRenderer;
+  _ruler: ViewportRuler;
 
-  constructor(_elementRef: ElementRef) {
+  constructor(_elementRef: ElementRef, _ruler: ViewportRuler) {
     // These event handlers are attached to the element that triggers the ripple animations.
     const eventHandlers = new Map<string, (e: Event) => void>();
     eventHandlers.set('mousedown', (event: MouseEvent) => this._mouseDown(event));
     eventHandlers.set('click', (event: MouseEvent) => this._click(event));
     eventHandlers.set('mouseleave', (event: MouseEvent) => this._mouseLeave(event));
     this._rippleRenderer = new RippleRenderer(_elementRef, eventHandlers);
+    this._ruler = _ruler;
   }
 
   /** TODO: internal */
@@ -161,7 +164,10 @@ export class MdRipple implements OnInit, OnDestroy, OnChanges {
       // FIXME: This fails on IE11, which still sets pageX/Y and screenX/Y on keyboard clicks.
       const isKeyEvent =
           (event.screenX === 0 && event.screenY === 0 && event.pageX === 0 && event.pageY === 0);
-      this.end(event.pageX, event.pageY, isKeyEvent);
+
+      this.end(event.pageX - this._ruler.getViewportScrollPosition().left,
+        event.pageY - this._ruler.getViewportScrollPosition().top,
+        isKeyEvent);
     }
   }
 
@@ -185,7 +191,7 @@ export class MdRippleModule {
   static forRoot(): ModuleWithProviders {
     return {
       ngModule: MdRippleModule,
-      providers: []
+      providers: [ViewportRuler]
     };
   }
 }

src/lib/radio/radio.spec.ts

@@ -3,6 +3,7 @@ import {NgControl, FormsModule} from '@angular/forms';
 import {Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MdRadioGroup, MdRadioButton, MdRadioChange, MdRadioModule} from './radio';
+import {ViewportRuler} from '../core/overlay/position/viewport-ruler';
 
 
 describe('MdRadio', () => {
@@ -15,6 +16,9 @@ describe('MdRadio', () => {
         RadioGroupWithNgModel,
         StandaloneRadioButtons,
       ],
+      providers: [
+        {provide: ViewportRuler, useClass: FakeViewportRuler},
+      ]
     });
 
     TestBed.compileComponents();
@@ -593,3 +597,15 @@ function dispatchEvent(eventName: string, element: HTMLElement): void {
   event.initEvent(eventName, true, true);
   element.dispatchEvent(event);
 }
+
+class FakeViewportRuler {
+  getViewportRect() {
+    return {
+      left: 0, top: 0, width: 1014, height: 686, bottom: 686, right: 1014
+    };
+  }
+
+  getViewportScrollPosition() {
+    return {top: 0, left: 0};
+  }
+}

src/lib/tabs/tab-group.spec.ts

@@ -7,6 +7,7 @@ import {Component, ViewChild} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {Observable} from 'rxjs/Observable';
 import {LayoutDirection, Dir} from '../core/rtl/dir';
+import {ViewportRuler} from '../core/overlay/position/viewport-ruler';
 
 
 describe('MdTabGroup', () => {
@@ -24,7 +25,8 @@ describe('MdTabGroup', () => {
       providers: [
         {provide: Dir, useFactory: () => {
           return {value: dir};
-        }}
+        }},
+        {provide: ViewportRuler, useClass: FakeViewportRuler},
       ]
     });
 
@@ -493,3 +495,15 @@ class TabGroupWithSimpleApi {
   otherContent = 'Apples, grapes';
   @ViewChild('legumes') legumes: any;
 }
+
+class FakeViewportRuler {
+  getViewportRect() {
+    return {
+      left: 0, top: 0, width: 1014, height: 686, bottom: 686, right: 1014
+    };
+  }
+
+  getViewportScrollPosition() {
+    return {top: 0, left: 0};
+  }
+}

src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts

@@ -2,6 +2,7 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {MdTabsModule} from '../tabs';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
+import {ViewportRuler} from '../../core/overlay/position/viewport-ruler';
 
 
 describe('MdTabNavBar', () => {
@@ -13,6 +14,9 @@ describe('MdTabNavBar', () => {
         SimpleTabNavBarTestApp,
         TabLinkWithNgIf,
       ],
+      providers: [
+        {provide: ViewportRuler, useClass: FakeViewportRuler},
+      ]
     });
 
     TestBed.compileComponents();
@@ -84,3 +88,15 @@ class SimpleTabNavBarTestApp {
 class TabLinkWithNgIf {
   isDestroyed = false;
 }
+
+class FakeViewportRuler {
+  getViewportRect() {
+    return {
+      left: 0, top: 0, width: 1014, height: 686, bottom: 686, right: 1014
+    };
+  }
+
+  getViewportScrollPosition() {
+    return {top: 0, left: 0};
+  }
+}

src/lib/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -10,6 +10,7 @@ import {
 
 import {MdInkBar} from '../ink-bar';
 import {MdRipple} from '../../core/ripple/ripple';
+import {ViewportRuler} from '../../core/overlay/position/viewport-ruler';
 
 /**
  * Navigation component matching the styles of the tab group header.
@@ -60,8 +61,8 @@ export class MdTabLink {
   selector: '[md-tab-link]',
 })
 export class MdTabLinkRipple extends MdRipple implements OnDestroy {
-  constructor(private _element: ElementRef) {
-    super(_element);
+  constructor(private _element: ElementRef, _ruler: ViewportRuler) {
+    super(_element, _ruler);
   }
 
   // In certain cases the parent destroy handler