Perform animation using absolute positioning. (#5)

This prevents the animation from looking off if you scroll
the page while the animation is in progress.

Author: Sepand Parhami

src/positioned-container.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright 2018 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Finds the positioned container (i.e. one that has a computed position that
+ * is not static). If the element itself is positioned, then we return it,
+ * otherwise, we find the first positioned parent. If there are no positioned
+ * elements, this will return the root element.
+ * @param element The element to get the positioned container for.
+ * @return The positioned container.
+ */
+export function getPositionedContainer(element: Element): Element {
+  const { position } = getComputedStyle(element);
+  // Element is positioned, we are done.
+  if (position != 'static') {
+    return element;
+  }
+  // We can skip to the offsetParent if present, no need to check all elements
+  // in between. If we have an offsetParent, we still need to check that it is
+  // positioned, as it will return `document.body`, even if it is not
+  // positioned.
+  const parent = (<HTMLElement>element).offsetParent || element.parentElement;
+  return parent ? getPositionedContainer(parent) : element;
+}

src/test-positioned-container.ts

@@ -0,0 +1,88 @@
+/**
+ * Copyright 2018 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {getPositionedContainer} from './positioned-container.js';
+
+const {expect} = chai;
+
+describe('getPositionedParent', () => {
+  let child;
+  let grandchild;
+
+  beforeEach(() => {
+    child = document.createElement('div');
+    grandchild = document.createElement('div');
+    child.appendChild(grandchild);
+    document.body.appendChild(child);
+  });
+
+  afterEach(() => {
+    document.body.style.cssText = '';
+    document.body.removeChild(child);
+  });
+
+  describe('for a positioned body', () => {
+    beforeEach(() => {
+      document.body.style.position = 'relative';
+    });
+
+    it('should return the correct element for body', () => {
+      const container = getPositionedContainer(document.body);
+      expect(container).to.equal(document.body);
+    });
+
+    it('should return the correct element for a child', () => {
+      const container = getPositionedContainer(child);
+      expect(container).to.equal(document.body);
+    });
+
+    it('should return the correct element for a grandchild', () => {
+      const container = getPositionedContainer(grandchild);
+      expect(container).to.equal(document.body);
+    });
+
+    it('should return the correct element for a grandchild with positioned parent', () => {
+      child.style.position = 'relative';
+
+      const container = getPositionedContainer(grandchild);
+      expect(container).to.equal(child);
+    });
+  });
+
+  describe('for a non positioned body', () => {
+    it('should return the correct element for body', () => {
+      const container = getPositionedContainer(document.body);
+      expect(container).to.equal(document.documentElement);
+    });
+
+    it('should return the correct element for a child', () => {
+      const container = getPositionedContainer(child);
+      expect(container).to.equal(document.documentElement);
+    });
+
+    it('should return the correct element for a grandchild', () => {
+      const container = getPositionedContainer(grandchild);
+      expect(container).to.equal(document.documentElement);
+    });
+
+    it('should return the correct element for a grandchild with positioned parent', () => {
+      child.style.position = 'relative';
+
+      const container = getPositionedContainer(grandchild);
+      expect(container).to.equal(child);
+    });
+  });
+});

src/transform-img/test-transform-img.ts

@@ -281,4 +281,57 @@ describe('prepareImageAnimation', () => {
       expect(imgHeight).to.be.closeTo(12, COMPARISON_EPSILON);
     });
   });
+
+  describe('scrolling', () => {
+    let sizer;
+
+    beforeEach(async () => {
+      sizer = document.createElement('div');
+      sizer.style.height = `${window.innerHeight * 2}px`;
+      sizer.style.width = `${window.innerWidth * 2}px`;
+      document.body.appendChild(sizer);
+
+      await updateImg(smallerImg, 'contain', threeByFourUri);
+      smallerImg.style.width = '12px';
+      smallerImg.style.height = '12px';
+      smallerImg.style.top = '500px';
+      smallerImg.style.left = '100px';
+      await updateImg(largerImg, 'contain', threeByFourUri);
+      largerImg.style.width = '24px';
+      largerImg.style.height = '32px';
+      largerImg.style.top = '10px';
+      largerImg.style.left = '10px';
+    });
+
+    afterEach(() => {
+      document.body.removeChild(sizer);
+      window.scrollTo(0, 0);
+    });
+
+    it('should have the correct position 200ms in', async () => {
+      startAnimation(largerImg, smallerImg);
+      offset(200);
+      window.scrollTo(50, 75);
+
+      const replacement = getIntermediateImg();
+      const {top, left} = replacement.getBoundingClientRect();
+      // 20% of the animation, starting from 10, going to 500 - 75 from scroll
+      expect(top).to.be.closeTo(-51.5, COMPARISON_EPSILON);
+      // 20% of the animation, starting from 10, going to 100 - 50 from scroll
+      expect(left).to.be.closeTo(-37.5, COMPARISON_EPSILON);
+    });
+
+    it('should end with the correct position', async () => {
+      startAnimation(largerImg, smallerImg);
+      offset(1000);
+      window.scrollTo(50, 75);
+
+      const replacement = getIntermediateImg();
+      const {top, left} = replacement.getBoundingClientRect();
+      // smallerImg.style.top - 75 from scroll
+      expect(top).to.be.closeTo(425, COMPARISON_EPSILON);
+      // smallerImg.style.left - 50 from scroll
+      expect(left).to.be.closeTo(50, COMPARISON_EPSILON);
+    });
+  });
 });

src/transform-img/transform-img.ts

@@ -15,6 +15,7 @@
  */
 
 import {Curve} from '../bezier-curve-utils.js';
+import {getPositionedContainer} from '../positioned-container';
 import {getRenderedDimensions} from '../img-dimensions.js';
 import {createItermediateImg} from '../intermdediate-img.js';
 import {prepareCropAnimation} from './crop-animation.js';
@@ -86,7 +87,7 @@ export function prepareImageAnimation({
   styles,
   keyframesNamespace = 'img-transform',
 } : {
-  transitionContainer: Element|Document|DocumentFragment,
+  transitionContainer: HTMLElement,
   styleContainer: Element|Document|DocumentFragment,
   srcImg: HTMLImageElement,
   targetImg: HTMLImageElement,
@@ -117,6 +118,8 @@ export function prepareImageAnimation({
     counterScaleElement,
     img,
   } = createItermediateImg(largerImg, largerRect, largerImageDimensions);
+  const positionedParent = getPositionedContainer(transitionContainer);
+  const positionedParentRect = positionedParent.getBoundingClientRect();
 
   const cropStyleText = prepareCropAnimation({
     scaleElement,
@@ -130,6 +133,7 @@ export function prepareImageAnimation({
   });
   const translateStyleText = prepareTranslateAnimation({
     element: translateElement,
+    positionedParentRect,
     largerRect,
     smallerRect,
     curve,

src/transform-img/translate-animation.ts

@@ -24,6 +24,9 @@ import {Curve, curveToString} from '../bezier-curve-utils.js';
  * inserted for the animation to run.
  * @param options
  * @param options.element The element to apply the scaling to.
+ * @param options.positionedParentRect The rect for the positioned parent.
+ *    We need to account for the difference of the target's top/left and where
+ *    we will position absolutely to.
  * @param options.largerRect The larger of the start/end scaling rects.
  * @param options.smallerRect The smaller of the start/end scaling rects.
  * @param options.curve The timing curve for the scaling.
@@ -36,6 +39,7 @@ import {Curve, curveToString} from '../bezier-curve-utils.js';
  */
 export function prepareTranslateAnimation({
   element,
+  positionedParentRect,
   largerRect,
   smallerRect,
   curve,
@@ -44,6 +48,7 @@ export function prepareTranslateAnimation({
   toLarger,
 } : {
   element: HTMLElement,
+  positionedParentRect: ClientRect,
   largerRect: ClientRect,
   smallerRect: ClientRect,
   curve: Curve,
@@ -70,9 +75,9 @@ export function prepareTranslateAnimation({
   const deltaTop = startTop - endTop;
 
   Object.assign(element.style, styles, {
-    'position': 'fixed',
-    'top': `${endTop}px`,
-    'left': `${endLeft}px`,
+    'position': 'absolute',
+    'top': `${endTop - positionedParentRect.top}px`,
+    'left': `${endLeft - positionedParentRect.left}px`,
     'willChange': 'transform',
     'animationName': keyframesName,
     'animationTimingFunction': curveToString(curve),