Support iframe viewport tracking

polyfill/intersection-observer-test.js

@@ -69,12 +69,15 @@ describe('IntersectionObserver', function() {
       io = new IntersectionObserver(noop);
       expect(io.root).to.be(null);
 
+      io = new IntersectionObserver(noop, {root: document});
+      expect(io.root).to.be(document);
+
       io = new IntersectionObserver(noop, {root: rootEl});
-      expect(io.root).to.be(rootEl);
+      expect(io.root).to.be(rootEl); 
     });
 
 
-    it('throws when root is not an Element', function() {
+    it('throws when root is not a Document or Element', function() {
       expect(function() {
         io = new IntersectionObserver(noop, {root: 'foo'});
       }).to.throwException();
@@ -1398,6 +1401,31 @@ describe('IntersectionObserver', function() {
         io.observe(iframeTargetEl2);
       });
 
+      it('handles tracking iframe viewport', function(done) {
+        iframe.style.height = '100px';
+        // {root:iframeDoc} means to track the iframe viewport irrespective of toplevel viewport
+        var io = new IntersectionObserver(
+          function (records) {
+            var subviewportWidth =
+              iframeDoc.documentElement.clientWidth || iframeDoc.body.clientWidth;
+            var subviewportHeight =
+              iframeDoc.documentElement.clientHeight || iframeDoc.body.clientHeight;
+
+            expect(records.length).to.be(1);
+            expect(records[0].rootBounds.top).to.be(0);
+            expect(records[0].rootBounds.left).to.be(0);
+            expect(records[0].rootBounds.right).to.be(subviewportWidth);
+            expect(records[0].rootBounds.width).to.be(subviewportWidth);
+            expect(records[0].rootBounds.bottom).to.be(subviewportHeight);
+            expect(records[0].rootBounds.height).to.be(subviewportHeight);
+            done();
+          },
+          { root: iframeDoc }
+        );
+
+        io.observe(iframeTargetEl1);
+      });
+
       it('handles style changes', function(done) {
         var spy = sinon.spy();
 
@@ -3022,6 +3050,31 @@ describe('IntersectionObserver', function() {
           }
         ], done);
       });
+
+      it('handles tracking iframe viewport', function(done) {
+        iframe.style.height = '100px';
+        // {root:iframeDoc} means to track the iframe viewport irrespective of toplevel viewport
+        var io = new IntersectionObserver(
+          function (records) {
+            var subviewportWidth =
+              iframeDoc.documentElement.clientWidth || iframeDoc.body.clientWidth;
+            var subviewportHeight =
+              iframeDoc.documentElement.clientHeight || iframeDoc.body.clientHeight;
+
+            expect(records.length).to.be(1);
+            expect(records[0].rootBounds.top).to.be(0);
+            expect(records[0].rootBounds.left).to.be(0);
+            expect(records[0].rootBounds.right).to.be(subviewportWidth);
+            expect(records[0].rootBounds.width).to.be(subviewportWidth);
+            expect(records[0].rootBounds.bottom).to.be(subviewportHeight);
+            expect(records[0].rootBounds.height).to.be(subviewportHeight);
+            done();
+          },
+          { root: iframeDoc }
+        );
+
+        io.observe(iframeTargetEl1);
+      });
     });
   });
 });

polyfill/intersection-observer.js

@@ -131,8 +131,12 @@ function IntersectionObserver(callback, opt_options) {
     throw new Error('callback must be a function');
   }
 
-  if (options.root && options.root.nodeType != 1) {
-    throw new Error('root must be an Element');
+  if (
+    options.root &&
+    options.root.nodeType != 1 &&
+    options.root.nodeType !== 9
+  ) {
+    throw new Error("root must be a Document or Element");
   }
 
   // Binds and throttles `this._checkForIntersections`.
@@ -395,7 +399,10 @@ IntersectionObserver.prototype._monitorIntersections = function(doc) {
   });
 
   // Also monitor the parent.
-  if (doc != (this.root && this.root.ownerDocument || document)) {
+  if (
+    doc != ((this.root && this.root.ownerDocument) || document) &&
+    !isDoc(this.root)
+  ) {
     var frame = getFrameElement(doc);
     if (frame) {
       this._monitorIntersections(frame.ownerDocument);
@@ -415,7 +422,9 @@ IntersectionObserver.prototype._unmonitorIntersections = function(doc) {
     return;
   }
 
-  var rootDoc = (this.root && this.root.ownerDocument || document);
+  var rootDoc = isDoc(this.root)
+    ? this.root
+    : (this.root && this.root.ownerDocument) || document;
 
   // Check if any dependent targets are still remaining.
   var hasDependentTargets =
@@ -618,7 +627,7 @@ IntersectionObserver.prototype._computeTargetAndRootIntersection =
  */
 IntersectionObserver.prototype._getRootRect = function() {
   var rootRect;
-  if (this.root) {
+  if (this.root && !isDoc(this.root)) {
     rootRect = getBoundingClientRect(this.root);
   } else {
     // Use <html>/<body> instead of window since scroll bars affect size.
@@ -630,7 +639,7 @@ IntersectionObserver.prototype._getRootRect = function() {
       right: html.clientWidth || body.clientWidth,
       width: html.clientWidth || body.clientWidth,
       bottom: html.clientHeight || body.clientHeight,
-      height: html.clientHeight || body.clientHeight
+      height: html.clientHeight || body.clientHeight,
     };
   }
   return this._expandRectByRootMargin(rootRect);
@@ -714,8 +723,11 @@ IntersectionObserver.prototype._rootIsInDom = function() {
  * @private
  */
 IntersectionObserver.prototype._rootContainsTarget = function(target) {
-  return containsDeep(this.root || document, target) &&
-    (!this.root || this.root.ownerDocument == target.ownerDocument);
+  const rootDoc = isDoc(this.root) ? this.root : this.root.ownerDocument;
+  return (
+    containsDeep(this.root || document, target) &&
+    (!this.root || rootDoc == target.ownerDocument)
+  );
 };
 
 
@@ -978,6 +990,10 @@ function getParentNode(node) {
   return parent;
 }
 
+function isDoc(node) {
+  return node && node.nodeType === 9;
+}
+
 
 // Exposes the constructors globally.
 window.IntersectionObserver = IntersectionObserver;