Fix tslint and mobile safari and firefox

angular · Nov 18, 2016 · 5419d13 · 5419d13
1 parent a2869df
commit 5419d13
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 45 deletions.
diff --git a/src/lib/core/overlay/position/viewport-ruler.ts b/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};
   }

diff --git a/src/lib/core/ripple/ripple.spec.ts b/src/lib/core/ripple/ripple.spec.ts
@@ -181,47 +181,67 @@ describe('MdRipple', () => {
       expect(pxStringToFloat(ripple.style.height)).toBeCloseTo(2 * expectedRadius, 1);
     });
 
-    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);
       });
-      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);
+      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);
+      });
 
-      document.body.removeChild(veryLargeElement);
+      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', () => {

diff --git a/src/lib/core/ripple/ripple.ts b/src/lib/core/ripple/ripple.ts
@@ -15,7 +15,7 @@ import {
   ForegroundRipple,
   ForegroundRippleState,
 } from './ripple-renderer';
-import {ViewportRuler} from "../overlay/position/viewport-ruler";
+import {ViewportRuler} from '../overlay/position/viewport-ruler';
 
 
 @Directive({

diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -1,7 +1,7 @@
 import {Component, Input, ViewChild, ElementRef, ViewEncapsulation, Directive} from '@angular/core';
 import {MdInkBar} from '../ink-bar';
 import {MdRipple} from '../../core/ripple/ripple';
-import {ViewportRuler} from "../../core/overlay/position/viewport-ruler";
+import {ViewportRuler} from '../../core/overlay/position/viewport-ruler';
 
 /**
  * Navigation component matching the styles of the tab group header.