Ensure animation auto-starts no matter where amp-animation tag is def…

…ined (ampproject#8911)
mrjoro · Apr 28, 2017 · 0024f41 · 0024f41
1 parent e2f189f
commit 0024f41
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/extensions/amp-animation/0.1/amp-animation.js b/extensions/amp-animation/0.1/amp-animation.js
@@ -90,12 +90,16 @@ export class AmpAnimation extends AMP.BaseElement {
     if (this.triggerOnVisibility_) {
       // Make the element minimally displayed to make sure that `layoutCallback`
       // is called.
-      setStyles(this.element, {
-        visibility: 'hidden',
-        width: '1px',
-        height: '1px',
-        display: 'block',
-        position: 'fixed',
+      this.mutateElement(() => {
+        setStyles(this.element, {
+          visibility: 'hidden',
+          top: '0px',
+          left: '0px',
+          width: '1px',
+          height: '1px',
+          display: 'block',
+          position: 'fixed',
+        });
       });
     }
 

diff --git a/extensions/amp-animation/0.1/test/test-amp-animation.js b/extensions/amp-animation/0.1/test/test-amp-animation.js
@@ -110,12 +110,17 @@ describes.sandboxed('AmpAnimation', {}, () => {
       const anim = createAnim({trigger: 'visibility'}, {duration: 1001});
       expect(anim.triggerOnVisibility_).to.be.true;
 
-      // Animation is made to be always in viewport.
-      expect(anim.element.style['visibility']).to.equal('hidden');
-      expect(anim.element.style['width']).to.equal('1px');
-      expect(anim.element.style['height']).to.equal('1px');
-      expect(anim.element.style['display']).to.equal('block');
-      expect(anim.element.style['position']).to.equal('fixed');
+      // Animation is made to be always in viewport via mutateElement.
+      expect(anim.element.style['position']).to.not.equal('fixed');
+      return anim.mutateElement(() => {}).then(() => {
+        expect(anim.element.style['position']).to.equal('fixed');
+        expect(anim.element.style['visibility']).to.equal('hidden');
+        expect(anim.element.style['top']).to.equal('0px');
+        expect(anim.element.style['left']).to.equal('0px');
+        expect(anim.element.style['width']).to.equal('1px');
+        expect(anim.element.style['height']).to.equal('1px');
+        expect(anim.element.style['display']).to.equal('block');
+      });
     });
 
     it('should fail on invalid trigger', () => {