measureIntersection: use root=document (#32402)

* measureIntersection: track document in iframe * test + lint * fix threshold usage * make closure types happier * wip -- come back and fix * Caculate expected rootBounds differently
ampproject · Feb 10, 2021 · 0ab0609 · 0ab0609
1 parent daa95ee
commit 0ab0609
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 22 deletions.
diff --git a/src/service/video-manager-impl.js b/src/service/video-manager-impl.js
@@ -206,7 +206,7 @@ export class VideoManager {
       this.viewportObserver_ = createViewportObserver(
         viewportCallback,
         this.ampdoc.win,
-        /* threshold */ MIN_VISIBILITY_RATIO_FOR_AUTOPLAY
+        {threshold: MIN_VISIBILITY_RATIO_FOR_AUTOPLAY}
       );
     }
     this.viewportObserver_.observe(videoBE.element);

diff --git a/src/utils/intersection.js b/src/utils/intersection.js
@@ -35,20 +35,24 @@ function getInOb(win) {
   }
 
   if (!intersectionObservers.has(win)) {
-    const observer = createViewportObserver((entries) => {
-      const seen = new Set();
-      for (let i = entries.length - 1; i >= 0; i--) {
-        const {target} = entries[i];
-        if (seen.has(target)) {
-          continue;
-        }
-        seen.add(target);
+    const observer = createViewportObserver(
+      (entries) => {
+        const seen = new Set();
+        for (let i = entries.length - 1; i >= 0; i--) {
+          const {target} = entries[i];
+          if (seen.has(target)) {
+            continue;
+          }
+          seen.add(target);
 
-        observer.unobserve(target);
-        intersectionDeferreds.get(target).resolve(entries[i]);
-        intersectionDeferreds.delete(target);
-      }
-    }, win);
+          observer.unobserve(target);
+          intersectionDeferreds.get(target).resolve(entries[i]);
+          intersectionDeferreds.delete(target);
+        }
+      },
+      win,
+      {needsRootBounds: true}
+    );
     intersectionObservers.set(win, observer);
     return observer;
   }

diff --git a/src/viewport-observer.js b/src/viewport-observer.js
@@ -15,19 +15,24 @@
  */
 import {devAssert} from '../src/log';
 import {getMode} from './mode';
+import {isIframed} from './dom';
 import {toWin} from './types';
 
 /**
  * Returns an IntersectionObserver tracking the Viewport.
  *
  * @param {function(!Array<!IntersectionObserverEntry>)} ioCallback
  * @param {!Window} win
- * @param {(number|!Array<number>)=} threshold
+ * @param {{threshold: (number|!Array<number>)=, needsRootBounds: boolean=}=} opts
  *
  * @return {!IntersectionObserver}
  */
-export function createViewportObserver(ioCallback, win, threshold) {
-  return new win.IntersectionObserver(ioCallback, {threshold});
+export function createViewportObserver(ioCallback, win, opts = {}) {
+  const {threshold, needsRootBounds} = opts;
+  return new win.IntersectionObserver(ioCallback, {
+    threshold,
+    root: isIframed(win) && needsRootBounds ? win.document : undefined,
+  });
 }
 
 /** @type {!WeakMap<!Window, !IntersectionObserver>} */

diff --git a/test/integration/test-amp-ad-3p.js b/test/integration/test-amp-ad-3p.js
@@ -21,8 +21,13 @@ import {installPlatformService} from '../../src/service/platform-impl';
 import {layoutRectLtwh} from '../../src/layout-rect';
 import {toggleExperiment} from '../../src/experiments';
 
+const IFRAME_HEIGHT = 3000;
 function createFixture() {
-  return createFixtureIframe('test/fixtures/3p-ad.html', 3000, () => {});
+  return createFixtureIframe(
+    'test/fixtures/3p-ad.html',
+    IFRAME_HEIGHT,
+    () => {}
+  );
 }
 
 describe('amp-ad 3P', () => {
@@ -97,7 +102,18 @@ describe('amp-ad 3P', () => {
         });
         const {initialIntersection} = context;
         expect(initialIntersection.rootBounds).to.deep.equal(
-          layoutRectLtwh(0, 0, window.innerWidth, window.innerHeight)
+          layoutRectLtwh(
+            0,
+            0,
+            Math.min(
+              iframe.ownerDocument.body.clientWidth,
+              iframe.ownerDocument.defaultView.innerWidth
+            ),
+            Math.min(
+              iframe.ownerDocument.body.clientHeight,
+              iframe.ownerDocument.defaultView.innerHeight
+            )
+          )
         );
 
         expect(initialIntersection.boundingClientRect).to.deep.equal(

diff --git a/test/unit/test-viewport-observer.js b/test/unit/test-viewport-observer.js
@@ -37,12 +37,26 @@ describes.sandboxed('Viewport Observer', {}, (env) => {
 
     it('Uses implicit root.', () => {
       createViewportObserver(noop, win);
-      expect(ctorSpy).calledWith(noop, {threshold: undefined});
+      expect(ctorSpy).calledWith(noop, {threshold: undefined, root: undefined});
     });
 
     it('Pass along threshold argument', () => {
-      createViewportObserver(noop, win, 0.5);
-      expect(ctorSpy).calledWith(noop, {threshold: 0.5});
+      createViewportObserver(noop, win, {threshold: 0.5});
+      expect(ctorSpy).calledWith(noop, {threshold: 0.5, root: undefined});
+    });
+
+    it('Sets document root appropriately', () => {
+      // Implicit root when not iframed.
+      createViewportObserver(noop, win, {needsRootBounds: true});
+      expect(ctorSpy).calledWith(noop, {threshold: undefined, root: undefined});
+
+      // Document root when iframed.
+      win.parent = {};
+      createViewportObserver(noop, win, {needsRootBounds: true});
+      expect(ctorSpy).calledWith(noop, {
+        threshold: undefined,
+        root: win.document,
+      });
     });
   });