@@ -56,6 +56,34 @@ describe('MdRipple', () => {
5656 rippleDirective = fixture . componentInstance . ripple ;
5757 } ) ;
5858
59+ it ( 'sizes ripple to cover element' , ( ) => {
60+ let elementRect = rippleTarget . getBoundingClientRect ( ) ;
61+
62+ // Dispatch a ripple at the following relative coordinates (X: 50| Y: 75)
63+ dispatchMouseEvent ( rippleTarget , 'mousedown' , 50 , 75 ) ;
64+ dispatchMouseEvent ( rippleTarget , 'mouseup' ) ;
65+
66+ // Calculate distance from the click to farthest edge of the ripple target.
67+ let maxDistanceX = TARGET_WIDTH - 50 ;
68+ let maxDistanceY = TARGET_HEIGHT - 75 ;
69+
70+ // At this point the foreground ripple should be created with a div centered at the click
71+ // location, and large enough to reach the furthest corner, which is 250px to the right
72+ // and 125px down relative to the click position.
73+ let expectedRadius = Math . sqrt ( maxDistanceX * maxDistanceX + maxDistanceY * maxDistanceY ) ;
74+ let expectedLeft = elementRect . left + 50 - expectedRadius ;
75+ let expectedTop = elementRect . top + 75 - expectedRadius ;
76+
77+ let ripple = rippleTarget . querySelector ( '.mat-ripple-element' ) as HTMLElement ;
78+
79+ // Note: getBoundingClientRect won't work because there's a transform applied to make the
80+ // ripple start out tiny.
81+ expect ( pxStringToFloat ( ripple . style . left ) ) . toBeCloseTo ( expectedLeft , 1 ) ;
82+ expect ( pxStringToFloat ( ripple . style . top ) ) . toBeCloseTo ( expectedTop , 1 ) ;
83+ expect ( pxStringToFloat ( ripple . style . width ) ) . toBeCloseTo ( 2 * expectedRadius , 1 ) ;
84+ expect ( pxStringToFloat ( ripple . style . height ) ) . toBeCloseTo ( 2 * expectedRadius , 1 ) ;
85+ } ) ;
86+
5987 it ( 'creates ripple on mousedown' , ( ) => {
6088 dispatchMouseEvent ( rippleTarget , 'mousedown' ) ;
6189 dispatchMouseEvent ( rippleTarget , 'mouseup' ) ;
@@ -137,35 +165,6 @@ describe('MdRipple', () => {
137165 expect ( parseFloat ( rippleElement . style . top ) ) . toBeCloseTo ( TARGET_HEIGHT / 2 - radius , 1 ) ;
138166 } ) ;
139167
140- it ( 'sizes ripple to cover element' , ( ) => {
141- let elementRect = rippleTarget . getBoundingClientRect ( ) ;
142-
143- // Dispatch a ripple at the following relative coordinates (X: 50| Y: 75)
144- dispatchMouseEvent ( rippleTarget , 'mousedown' , 50 , 75 ) ;
145- dispatchMouseEvent ( rippleTarget , 'mouseup' ) ;
146-
147- // Calculate distance from the click to farthest edge of the ripple target.
148- let maxDistanceX = TARGET_WIDTH - 50 ;
149- let maxDistanceY = TARGET_HEIGHT - 75 ;
150-
151- // At this point the foreground ripple should be created with a div centered at the click
152- // location, and large enough to reach the furthest corner, which is 250px to the right
153- // and 125px down relative to the click position.
154- let expectedRadius = Math . sqrt ( maxDistanceX * maxDistanceX + maxDistanceY * maxDistanceY ) ;
155- let expectedLeft = elementRect . left + 50 - expectedRadius ;
156- let expectedTop = elementRect . top + 75 - expectedRadius ;
157-
158- let ripple = rippleTarget . querySelector ( '.mat-ripple-element' ) as HTMLElement ;
159-
160- // Note: getBoundingClientRect won't work because there's a transform applied to make the
161- // ripple start out tiny.
162- expect ( pxStringToFloat ( ripple . style . left ) ) . toBeCloseTo ( expectedLeft , 1 ) ;
163- expect ( pxStringToFloat ( ripple . style . top ) ) . toBeCloseTo ( expectedTop , 1 ) ;
164- expect ( pxStringToFloat ( ripple . style . width ) ) . toBeCloseTo ( 2 * expectedRadius , 1 ) ;
165- expect ( pxStringToFloat ( ripple . style . height ) ) . toBeCloseTo ( 2 * expectedRadius , 1 ) ;
166- } ) ;
167-
168-
169168 it ( 'cleans up the event handlers when the container gets destroyed' , ( ) => {
170169 fixture = TestBed . createComponent ( RippleContainerWithNgIf ) ;
171170 fixture . detectChanges ( ) ;
0 commit comments