fix(ripple): Always set even num when initial ripple size is ca… (#5141)

abhiomkar · web-flow · commit b26ad23e45ed · 2019-10-02T12:26:53.000-04:00
diff --git a/packages/mdc-ripple/foundation.ts b/packages/mdc-ripple/foundation.ts
@@ -502,7 +502,13 @@ export class MDCRippleFoundation extends MDCFoundation<MDCRippleAdapter> {
     this.maxRadius_ = this.adapter_.isUnbounded() ? maxDim : getBoundedRadius();
 
     // Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform
-    this.initialSize_ = Math.floor(maxDim * MDCRippleFoundation.numbers.INITIAL_ORIGIN_SCALE);
+    const initialSize = Math.floor(maxDim * MDCRippleFoundation.numbers.INITIAL_ORIGIN_SCALE);
+    // Unbounded ripple size should always be even number to equally center align.
+    if (this.adapter_.isUnbounded() && initialSize % 2 !== 0) {
+      this.initialSize_ = initialSize - 1;
+    } else {
+      this.initialSize_ = initialSize;
+    }
     this.fgScale_ = `${this.maxRadius_ / this.initialSize_}`;
 
     this.updateLayoutCssVars_();
diff --git a/test/unit/mdc-ripple/foundation.test.js b/test/unit/mdc-ripple/foundation.test.js
@@ -233,6 +233,20 @@ testFoundation(`#layout sets ${strings.VAR_FG_SIZE} to the circumscribing circle
     td.verify(adapter.updateCssVariable(strings.VAR_FG_SIZE, `${initialSize}px`));
   });
 
+testFoundation(`#layout always sets ${strings.VAR_FG_SIZE} to even number`,
+  ({foundation, adapter, clock}) => {
+    const width = 36;
+    const height = 36;
+
+    td.when(adapter.computeBoundingRect()).thenReturn({width, height});
+    td.when(adapter.isUnbounded()).thenReturn(true);
+    foundation.layout();
+    clock.runToFrame();
+
+    const isEvenNumber = (pixel) => (parseInt(pixel, 10) % 2 === 0);
+    td.verify(adapter.updateCssVariable(strings.VAR_FG_SIZE, td.matchers.argThat(isEvenNumber)));
+  });
+
 testFoundation(`#layout sets ${strings.VAR_FG_SCALE} based on the difference between the ` +
                'proportion of the max radius and the initial size', ({foundation, adapter, clock}) => {
   const width = 200;
