Add test

Author: tinayuangao

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

@@ -180,6 +180,47 @@ describe('MdRipple', () => {
       expect(pxStringToFloat(ripple.style.width)).toBeCloseTo(2 * expectedRadius, 1);
       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: HTMLElement = 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.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);
+
+      document.body.removeChild(veryLargeElement);
+    });
   });
 
   describe('configuring behavior', () => {

src/lib/core/ripple/ripple.ts

@@ -161,7 +161,11 @@ 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);
+      var scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
+          document.body.scrollTop || 0;
+      var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft ||
+          document.body.scrollLeft || 0;
+      this.end(event.pageX - scrollLeft, event.pageY - scrollTop, isKeyEvent);
     }
   }