intersection-observer 0.10.0 → 0.12.1

package/README.md

@@ -61,16 +61,16 @@ There are, however, additional use cases that the default configuration will not
 
 If you need to handle any of these use-cases, you can configure the polyfill to poll the document by setting the `POLL_INTERVAL` property. This can be set either globally or on a per-instance basis.
 
-**Enabling polling for all instance:**
+**Enabling polling for all instances:**
 
-To enable polling for all instance, set a value for `POLL_INTERVAL` on the `IntersectionObserver` prototype:
+To enable polling for all instances, set a value for `POLL_INTERVAL` on the `IntersectionObserver` prototype:
 
 
 ```js
 IntersectionObserver.prototype.POLL_INTERVAL = 100; // Time in milliseconds.
 ```
 
-**Enabling polling for individual instance:**
+**Enabling polling for individual instances:**
 
 To enable polling on only specific instances, set a `POLL_INTERVAL` value on the instance itself:
 
@@ -94,7 +94,7 @@ var io = new IntersectionObserver(callback);
 io.USE_MUTATION_OBSERVER = false;
 ```
 
-This is recommended in cases where the DOM will update frequently but you know those updates will have no affect on the position or your target elements.
+This is recommended in cases where the DOM will update frequently but you know those updates will have no effect on the position or your target elements.
 
 
 ## iframe support
@@ -171,7 +171,7 @@ Legacy support is also possible in very old browsers by including a shim for ES5
 <script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
 ```
 
-With these polyfills, `IntersectionObserver` has been tested an known to work in the following browsers:
+With these polyfills, `IntersectionObserver` has been tested and known to work in the following browsers:
 
 <table>
   <tr>
@@ -210,4 +210,4 @@ With these polyfills, `IntersectionObserver` has been tested an known to work in
 
 To run the test suite for the `IntersectionObserver` polyfill, open the [`intersection-observer-test.html`](./intersection-observer-test.html) page in the browser of your choice.
 
-If you run the tests in a browser that support `IntersectionObserver` natively, the tests will be run against the native implementation. If it doesn't the tests will be run against the polyfill.
+If you run the tests in a browser that supports `IntersectionObserver` natively, the tests will be run against the native implementation. If it doesn't, the tests will be run against the polyfill.

package/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);
     });
 
 
-    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();
@@ -958,6 +961,7 @@ describe('IntersectionObserver', function() {
 
   describe('iframe', function() {
     var iframe;
+    var iframeWin, iframeDoc;
     var documentElement, body;
     var iframeTargetEl1, iframeTargetEl2;
     var bodyWidth;
@@ -1039,7 +1043,7 @@ describe('IntersectionObserver', function() {
       });
     }
 
-    describe('same-origin iframe', function() {
+    describe('same-origin iframe loaded in the mainframe', function() {
       it('iframe targets do not intersect with a top root element', function(done) {
         var io = new IntersectionObserver(function(unsortedRecords) {
           var records = sortRecords(unsortedRecords);
@@ -1397,6 +1401,89 @@ describe('IntersectionObserver', function() {
         io.observe(iframeTargetEl2);
       });
 
+      it('handles tracking iframe viewport', function(done) {
+        iframe.style.height = '100px';
+        iframe.style.top = '100px';
+        iframeWin.scrollTo(0, 110);
+        // {root:iframeDoc} means to track the iframe viewport.
+        var io = new IntersectionObserver(
+          function (records) {
+            io.unobserve(iframeTargetEl1);
+
+            var intersectionRect = rect({
+              top: 0, // if root=null, then this would be 100.
+              left: 0,
+              height: 90,
+              width: bodyWidth
+            });
+            expect(records.length).to.be(1);
+            expect(rect(records[0].rootBounds)).to.eql(getRootRect(iframeDoc));
+            expect(rect(records[0].intersectionRect)).to.eql(intersectionRect);
+            done();
+          },
+          { root: iframeDoc }
+        );
+
+        io.observe(iframeTargetEl1);
+      });
+
+      it('handles tracking iframe viewport with rootMargin', function(done) {
+        iframe.style.height = '100px';
+
+        var io =  new IntersectionObserver(
+          function (records) {
+            io.unobserve(iframeTargetEl1);
+            var intersectionRect = rect({
+              top: 0, // if root=null, then this would be 100.
+              left: 0,
+              height: 200,
+              width: bodyWidth
+            });
+
+            // rootMargin: 100% --> 3x width + 3x height.
+            var expectedRootBounds = rect({
+              top: -100,
+              left: -bodyWidth,
+              width: bodyWidth * 3,
+              height: 100 * 3
+            });
+            expect(records.length).to.be(1);
+            expect(rect(records[0].rootBounds)).to.eql(expectedRootBounds);
+            expect(rect(records[0].intersectionRect)).to.eql(intersectionRect);
+            done();
+          },
+          { root: iframeDoc, rootMargin: '100%' }
+        );
+
+        io.observe(iframeTargetEl1);
+      });
+
+      // Current spec indicates that cross-document tracking yields
+      // an essentially empty IntersectionObserverEntry.
+      // See: https://github.com/w3c/IntersectionObserver/issues/87
+      it('does not track cross-document elements', function(done) {
+        var io = new IntersectionObserver(
+          function (records) {
+            io.unobserve(iframeTargetEl1)
+
+            expect(records.length).to.be(1);
+            const zeroesRect = rect({
+              top: 0,
+              left: 0,
+              width: 0,
+              height: 0
+            });
+            expect(rect(records[0].rootBounds)).to.eql(zeroesRect);
+            expect(rect(records[0].intersectionRect)).to.eql(zeroesRect);
+            expect(records.isIntersecting).false;
+            done();
+          },
+          { root: document }
+        );
+
+        io.observe(iframeTargetEl1);
+      });
+
       it('handles style changes', function(done) {
         var spy = sinon.spy();
 
@@ -1619,13 +1706,10 @@ describe('IntersectionObserver', function() {
       });
     });
 
-    describe('cross-origin iframe', function() {
+    describe('same-origin iframe loaded in an iframe', function() {
       var ASYNC_TIMEOUT = 300;
-      var crossOriginUpdater;
 
       beforeEach(function(done) {
-        Object.defineProperty(iframeWin, 'frameElement', {value: null});
-
         /* Uncomment these lines to force polyfill inside the iframe.
         delete iframeWin.IntersectionObserver;
         delete iframeWin.IntersectionObserverEntry;
@@ -1636,9 +1720,6 @@ describe('IntersectionObserver', function() {
           var script = iframeDoc.createElement('script');
           script.src = 'intersection-observer.js';
           script.onload = function() {
-            if (iframeWin.IntersectionObserver._setupCrossOriginUpdater) {
-              crossOriginUpdater = iframeWin.IntersectionObserver._setupCrossOriginUpdater();
-            }
             done();
           };
           iframeDoc.body.appendChild(script);
@@ -1647,12 +1728,6 @@ describe('IntersectionObserver', function() {
         }
       });
 
-      afterEach(function() {
-        if (IntersectionObserver._resetCrossOriginUpdater) {
-          IntersectionObserver._resetCrossOriginUpdater();
-        }
-      });
-
       function computeRectIntersection(rect1, rect2) {
         var top = Math.max(rect1.top, rect2.top);
         var bottom = Math.min(rect1.bottom, rect2.bottom);
@@ -1678,25 +1753,19 @@ describe('IntersectionObserver', function() {
         };
       }
 
-      function checkRootBoundsAreNull(records) {
+      function checkRootBounds(records) {
         if (!supportsNativeIntersectionObserver(iframeWin)) {
           records.forEach(function(record) {
-            expect(record.rootBounds).to.be(null);
+            expect(rect(record.rootBounds)).to.eql(getRootRect(document));
           });
         }
       }
 
       function applyParentRect(parentRect) {
-        if (crossOriginUpdater) {
-          var parentIntersectionRect = computeRectIntersection(
-              parentRect, getRootRect(document));
-          crossOriginUpdater(parentRect, parentIntersectionRect);
-        } else {
-          iframe.style.top = parentRect.top + 'px';
-          iframe.style.left = parentRect.left + 'px';
-          iframe.style.height = parentRect.height + 'px';
-          iframe.style.width = parentRect.width + 'px';
-        }
+        iframe.style.top = parentRect.top + 'px';
+        iframe.style.left = parentRect.left + 'px';
+        iframe.style.height = parentRect.height + 'px';
+        iframe.style.width = parentRect.width + 'px';
       }
 
       function createObserver(callback, options, parentRect) {
@@ -1712,7 +1781,7 @@ describe('IntersectionObserver', function() {
         var io = createObserver(function(unsortedRecords) {
           var records = sortRecords(unsortedRecords);
           expect(records.length).to.be(3);
-          checkRootBoundsAreNull(records);
+          checkRootBounds(records);
 
           // The documentElement is partially visible.
           expect(rect(records[0].boundingClientRect))
@@ -1765,7 +1834,7 @@ describe('IntersectionObserver', function() {
         var io = createObserver(function(unsortedRecords) {
           var records = sortRecords(unsortedRecords);
           expect(records.length).to.be(3);
-          checkRootBoundsAreNull(records);
+          checkRootBounds(records);
 
           // The documentElement is partially visible.
           expect(rect(records[0].boundingClientRect))
@@ -1818,7 +1887,7 @@ describe('IntersectionObserver', function() {
         var io = createObserver(function(unsortedRecords) {
           var records = sortRecords(unsortedRecords);
           expect(records.length).to.be(3);
-          checkRootBoundsAreNull(records);
+          checkRootBounds(records);
 
           // The documentElement is partially visible.
           expect(rect(records[0].boundingClientRect))
@@ -1879,7 +1948,7 @@ describe('IntersectionObserver', function() {
         var io = createObserver(function(unsortedRecords) {
           var records = sortRecords(unsortedRecords);
           expect(records.length).to.be(3);
-          checkRootBoundsAreNull(records);
+          checkRootBounds(records);
 
           // The documentElement is partially visible.
           expect(rect(records[0].boundingClientRect))
@@ -1933,7 +2002,7 @@ describe('IntersectionObserver', function() {
         var io = createObserver(function(unsortedRecords) {
           var records = sortRecords(unsortedRecords);
           expect(records.length).to.be(3);
-          checkRootBoundsAreNull(records);
+          checkRootBounds(records);
 
           // The documentElement is partially visible.
           expect(rect(records[0].boundingClientRect))
@@ -1994,7 +2063,7 @@ describe('IntersectionObserver', function() {
         var io = createObserver(function(unsortedRecords) {
           var records = sortRecords(unsortedRecords);
           expect(records.length).to.be(4);
-          checkRootBoundsAreNull(records);
+          checkRootBounds(records);
 
           // The documentElement is partially visible.
           expect(rect(records[0].boundingClientRect))
@@ -2075,7 +2144,7 @@ describe('IntersectionObserver', function() {
         var io = createObserver(function(unsortedRecords) {
           var records = sortRecords(unsortedRecords);
           expect(records.length).to.be(3);
-          checkRootBoundsAreNull(records);
+          checkRootBounds(records);
 
           var emptyRect = rect({
             top: 0,
@@ -2118,72 +2187,6 @@ describe('IntersectionObserver', function() {
         io.observe(iframeTargetEl1);
       });
 
-      it('blocks until crossOriginUpdater is called first time', function(done) {
-        if (supportsNativeIntersectionObserver(iframeWin)) {
-          // Skip: not possible to emulate with the native observer.
-          done();
-          return;
-        }
-
-        var spy = sinon.spy();
-
-        var parentRect = rect({top: 0, left: 20, height: 300, width: 100});
-
-        var io = createObserver(spy, {});
-        io.observe(iframeTargetEl1);
-
-        runSequence([
-          function(done) {
-            setTimeout(function() {
-              expect(spy.callCount).to.be(0);
-
-              // Issue the first update.
-              crossOriginUpdater(parentRect, null);
-
-              done();
-            }, ASYNC_TIMEOUT);
-          },
-          function(done) {
-            setTimeout(function() {
-              expect(spy.callCount).to.be(1);
-              var records = sortRecords(spy.lastCall.args[0]);
-              expect(records.length).to.be(1);
-              expect(records[0].intersectionRatio).to.be(0);
-              expect(records[0].isIntersecting).to.be(false);
-              done();
-            }, ASYNC_TIMEOUT);
-          },
-          function(done) {
-            io.disconnect();
-            done();
-          }
-        ], done);
-      });
-
-      it('doesn\'t block with a root specified', function(done) {
-        var spy = sinon.spy();
-
-        var io = createObserver(spy, {root: body});
-        io.observe(iframeTargetEl1);
-
-        runSequence([
-          function(done) {
-            setTimeout(function() {
-              expect(spy.callCount).to.be(1);
-              var record = sortRecords(spy.lastCall.args[0])[0];
-              expect(record.intersectionRatio).to.be(1);
-              expect(record.isIntersecting).to.be(true);
-              expect(rect(record.rootBounds)).to.eql(rect(body.getBoundingClientRect()));
-              done();
-            }, ASYNC_TIMEOUT);
-          },
-          function(done) {
-            io.disconnect();
-            done();
-          }
-        ], done);
-      });
-
       it('handles style changes', function(done) {
         var spy = sinon.spy();
 
@@ -2315,7 +2318,7 @@ describe('IntersectionObserver', function() {
               expect(spy.callCount).to.be(1);
               var records = sortRecords(spy.lastCall.args[0]);
               expect(records.length).to.be(2);
-              checkRootBoundsAreNull(records);
+              checkRootBounds(records);
               expect(records[0].intersectionRatio).to.be(1);
               expect(records[0].isIntersecting).to.be(true);
               expect(records[1].intersectionRatio).to.be(0);
@@ -2332,7 +2335,7 @@ describe('IntersectionObserver', function() {
               expect(spy.callCount).to.be(2);
               var records = sortRecords(spy.lastCall.args[0]);
               expect(records.length).to.be(1);
-              checkRootBoundsAreNull(records);
+              checkRootBounds(records);
               expect(records[0].intersectionRatio).to.be(0);
               expect(records[0].isIntersecting).to.be(false);
               // Top-level bounds.
@@ -2347,7 +2350,7 @@ describe('IntersectionObserver', function() {
               expect(spy.callCount).to.be(3);
               var records = sortRecords(spy.lastCall.args[0]);
               expect(records.length).to.be(1);
-              checkRootBoundsAreNull(records);
+              checkRootBounds(records);
               expect(records[0].intersectionRatio).to.be.within(0.45, 0.55);
               expect(records[0].isIntersecting).to.be(true);
               // Top-level bounds.
@@ -2362,6 +2365,806 @@ describe('IntersectionObserver', function() {
         ], done);
       });
     });
+
+    describe('cross-origin iframe', function() {
+      var ASYNC_TIMEOUT = 300;
+      var crossOriginUpdater;
+
+      beforeEach(function(done) {
+        Object.defineProperty(iframeWin, 'frameElement', {value: null});
+
+        /* Uncomment these lines to force polyfill inside the iframe.
+        delete iframeWin.IntersectionObserver;
+        delete iframeWin.IntersectionObserverEntry;
+        */
+
+        // Install polyfill right into the iframe.
+        if (!iframeWin.IntersectionObserver) {
+          var script = iframeDoc.createElement('script');
+          script.src = 'intersection-observer.js';
+          script.onload = function() {
+            if (iframeWin.IntersectionObserver._setupCrossOriginUpdater) {
+              crossOriginUpdater = iframeWin.IntersectionObserver._setupCrossOriginUpdater();
+            }
+            done();
+          };
+          iframeDoc.body.appendChild(script);
+        } else {
+          done();
+        }
+      });
+
+      afterEach(function() {
+        if (IntersectionObserver._resetCrossOriginUpdater) {
+          IntersectionObserver._resetCrossOriginUpdater();
+        }
+      });
+
+      function computeRectIntersection(rect1, rect2) {
+        var top = Math.max(rect1.top, rect2.top);
+        var bottom = Math.min(rect1.bottom, rect2.bottom);
+        var left = Math.max(rect1.left, rect2.left);
+        var right = Math.min(rect1.right, rect2.right);
+        var width = right - left;
+        var height = bottom - top;
+
+        return (width >= 0 && height >= 0) && {
+          top: top,
+          bottom: bottom,
+          left: left,
+          right: right,
+          width: width,
+          height: height
+        } || {
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          width: 0,
+          height: 0
+        };
+      }
+
+      function checkRootBoundsAreNull(records) {
+        if (!supportsNativeIntersectionObserver(iframeWin)) {
+          records.forEach(function(record) {
+            expect(record.rootBounds).to.be(null);
+          });
+        }
+      }
+
+      function applyParentRect(parentRect) {
+        if (crossOriginUpdater) {
+          var parentIntersectionRect = computeRectIntersection(
+              parentRect, getRootRect(document));
+          crossOriginUpdater(parentRect, parentIntersectionRect);
+        } else {
+          iframe.style.top = parentRect.top + 'px';
+          iframe.style.left = parentRect.left + 'px';
+          iframe.style.height = parentRect.height + 'px';
+          iframe.style.width = parentRect.width + 'px';
+        }
+      }
+
+      function createObserver(callback, options, parentRect) {
+        var io = new iframeWin.IntersectionObserver(callback, options);
+        if (parentRect) {
+          applyParentRect(parentRect);
+        }
+        return io;
+      }
+
+      it('calculates rects for a fully visible frame', function(done) {
+        var parentRect = rect({top: 0, left: 20, height: 300, width: 100});
+        var io = createObserver(function(unsortedRecords) {
+          var records = sortRecords(unsortedRecords);
+          expect(records.length).to.be(3);
+          checkRootBoundsAreNull(records);
+
+          // The documentElement is partially visible.
+          expect(rect(records[0].boundingClientRect))
+              .to.eql(rect(documentElement.getBoundingClientRect()));
+          expect(rect(records[0].intersectionRect)).to.eql(rect({
+            top: 0,
+            left: 0,
+            width: bodyWidth,
+            height: 300
+          }));
+          expect(records[0].isIntersecting).to.be(true);
+          // 300 / 404 == ~0.743
+          expect(records[0].intersectionRatio).to.be.within(0.74, 0.75);
+
+          // The document.body is partially visible.
+          expect(rect(records[1].boundingClientRect))
+              .to.eql(rect(body.getBoundingClientRect()));
+          expect(rect(records[1].intersectionRect)).to.eql(rect({
+            top: 0,
+            left: 0,
+            width: bodyWidth,
+            height: 300
+          }));
+          expect(records[1].isIntersecting).to.be(true);
+          // 300 / 402 == ~0.746
+          expect(records[1].intersectionRatio).to.be.within(0.74, 0.75);
+
+          // The target1 is fully visible.
+          var clientRect1 = rect({
+            top: 0,
+            left: 0,
+            width: bodyWidth,
+            height: 200
+          });
+          expect(rect(records[2].boundingClientRect)).to.eql(clientRect1);
+          expect(rect(records[2].intersectionRect)).to.eql(clientRect1);
+          expect(records[2].isIntersecting).to.be(true);
+          expect(records[2].intersectionRatio).to.be(1);
+
+          done();
+          io.disconnect();
+        }, {}, parentRect);
+        io.observe(documentElement);
+        io.observe(body);
+        io.observe(iframeTargetEl1);
+      });
+
+      it('calculates rects for a fully visible and offset frame', function(done) {
+        var parentRect = rect({top: 10, left: 20, height: 300, width: 100});
+        var io = createObserver(function(unsortedRecords) {
+          var records = sortRecords(unsortedRecords);
+          expect(records.length).to.be(3);
+          checkRootBoundsAreNull(records);
+
+          // The documentElement is partially visible.
+          expect(rect(records[0].boundingClientRect))
+              .to.eql(rect(documentElement.getBoundingClientRect()));
+          expect(rect(records[0].intersectionRect)).to.eql(rect({
+            top: 0,
+            left: 0,
+            width: bodyWidth,
+            height: 300
+          }));
+          expect(records[0].isIntersecting).to.be(true);
+          // 300 / 404 == ~0.743
+          expect(records[0].intersectionRatio).to.be.within(0.74, 0.75);
+
+          // The document.body is partially visible.
+          expect(rect(records[1].boundingClientRect))
+              .to.eql(rect(body.getBoundingClientRect()));
+          expect(rect(records[1].intersectionRect)).to.eql(rect({
+            top: 0,
+            left: 0,
+            width: bodyWidth,
+            height: 300
+          }));
+          expect(records[1].isIntersecting).to.be(true);
+          // 300 / 402 == ~0.746
+          expect(records[1].intersectionRatio).to.be.within(0.74, 0.75);
+
+          // The target1 is fully visible.
+          var clientRect1 = rect({
+            top: 0,
+            left: 0,
+            width: bodyWidth,
+            height: 200
+          });
+          expect(rect(records[2].boundingClientRect)).to.eql(clientRect1);
+          expect(rect(records[2].intersectionRect)).to.eql(clientRect1);
+          expect(records[2].isIntersecting).to.be(true);
+          expect(records[2].intersectionRatio).to.be(1);
+
+          done();
+          io.disconnect();
+        }, {}, parentRect);
+        io.observe(documentElement);
+        io.observe(body);
+        io.observe(iframeTargetEl1);
+      });
+
+      it('calculates rects for a clipped frame on top', function(done) {
+        var parentRect = rect({top: -10, left: 20, height: 300, width: 100});
+        var io = createObserver(function(unsortedRecords) {
+          var records = sortRecords(unsortedRecords);
+          expect(records.length).to.be(3);
+          checkRootBoundsAreNull(records);
+
+          // The documentElement is partially visible.
+          expect(rect(records[0].boundingClientRect))
+              .to.eql(rect(documentElement.getBoundingClientRect()));
+          expect(rect(records[0].intersectionRect)).to.eql(rect({
+            top: 10,
+            left: 0,
+            width: bodyWidth,
+            height: 300 - 10
+          }));
+          expect(records[0].isIntersecting).to.be(true);
+          // (300 - 10) / 404 == ~0.717
+          expect(records[0].intersectionRatio).to.be.within(0.71, 0.72);
+
+          // The document.body is partially visible.
+          expect(rect(records[1].boundingClientRect))
+              .to.eql(rect(body.getBoundingClientRect()));
+          expect(rect(records[1].intersectionRect)).to.eql(rect({
+            top: 10,
+            left: 0,
+            width: bodyWidth,
+            height: 300 - 10
+          }));
+          expect(records[1].isIntersecting).to.be(true);
+          // (300 - 10) / 402 == ~0.721
+          expect(records[1].intersectionRatio).to.be.within(0.72, 0.73);
+
+          // The target1 is clipped at the top by the iframe's clipping.
+          var clientRect1 = rect({
+            top: 0,
+            left: 0,
+            width: bodyWidth,
+            height: 200
+          });
+          var intersectRect1 = rect({
+            left: 0,
+            width: bodyWidth,
+            // Top is clipped.
+            top: 10,
+            height: 200 - 10
+          });
+          expect(rect(records[2].boundingClientRect)).to.eql(clientRect1);
+          expect(rect(records[2].intersectionRect)).to.eql(intersectRect1);
+          expect(records[2].isIntersecting).to.be(true);
+          expect(records[2].intersectionRatio).to.within(0.94, 0.96); // ~0.95
+
+          done();
+          io.disconnect();
+        }, {}, parentRect);
+        io.observe(documentElement);
+        io.observe(body);
+        io.observe(iframeTargetEl1);
+      });
+
+      it('calculates rects for a clipped frame on bottom', function(done) {
+        var rootRect = getRootRect(document);
+        var parentRect = rect({top: rootRect.bottom - 300 + 10, left: 20, height: 300, width: 100});
+        var io = createObserver(function(unsortedRecords) {
+          var records = sortRecords(unsortedRecords);
+          expect(records.length).to.be(3);
+          checkRootBoundsAreNull(records);
+
+          // The documentElement is partially visible.
+          expect(rect(records[0].boundingClientRect))
+              .to.eql(rect(documentElement.getBoundingClientRect()));
+          expect(rect(records[0].intersectionRect)).to.eql(rect({
+            top: 0,
+            left: 0,
+            width: bodyWidth,
+            height: 300 - 10
+          }));
+          expect(records[0].isIntersecting).to.be(true);
+          // (300 - 10) / 404 == ~0.717
+          expect(records[0].intersectionRatio).to.be.within(0.71, 0.72);
+
+          // The document.body is partially visible.
+          expect(rect(records[1].boundingClientRect))
+              .to.eql(rect(body.getBoundingClientRect()));
+          expect(rect(records[1].intersectionRect)).to.eql(rect({
+            top: 0,
+            left: 0,
+            width: bodyWidth,
+            height: 300 - 10
+          }));
+          expect(records[1].isIntersecting).to.be(true);
+          // (300 - 10) / 402 == ~0.721
+          expect(records[1].intersectionRatio).to.be.within(0.72, 0.73);
+
+          // The target1 is clipped at the top by the iframe's clipping.
+          var clientRect1 = rect({
+            top: 0,
+            left: 0,
+            width: bodyWidth,
+            height: 200
+          });
+          expect(rect(records[2].boundingClientRect)).to.eql(clientRect1);
+          expect(rect(records[2].intersectionRect)).to.eql(clientRect1);
+          expect(records[2].isIntersecting).to.be(true);
+          expect(records[2].intersectionRatio).to.be(1);
+
+          done();
+          io.disconnect();
+        }, {}, parentRect);
+        io.observe(documentElement);
+        io.observe(body);
+        io.observe(iframeTargetEl1);
+      });
+
+      it('calculates rects for a fully visible and scrolled frame', function(done) {
+        iframeWin.scrollTo(0, 10);
+        var parentRect = rect({top: 0, left: 20, height: 300, width: 100});
+        var io = createObserver(function(unsortedRecords) {
+          var records = sortRecords(unsortedRecords);
+          expect(records.length).to.be(3);
+          checkRootBoundsAreNull(records);
+
+          // The documentElement is partially visible.
+          expect(rect(records[0].boundingClientRect))
+              .to.eql(rect(documentElement.getBoundingClientRect()));
+          expect(rect(records[0].intersectionRect)).to.eql(rect({
+            top: 0,
+            left: 0,
+            width: bodyWidth,
+            height: 300
+          }));
+          expect(records[0].isIntersecting).to.be(true);
+          // 300 / 404 == ~0.743
+          expect(records[0].intersectionRatio).to.be.within(0.74, 0.75);
+
+          // The document.body is partially visible.
+          expect(rect(records[1].boundingClientRect))
+              .to.eql(rect(body.getBoundingClientRect()));
+          expect(rect(records[1].intersectionRect)).to.eql(rect({
+            top: 0,
+            left: 0,
+            width: bodyWidth,
+            height: 300
+          }));
+          expect(records[1].isIntersecting).to.be(true);
+          // 300 / 402 == ~0.746
+          expect(records[1].intersectionRatio).to.be.within(0.74, 0.75);
+
+          // The target1 is fully visible.
+          var clientRect1 = rect({
+            top: -10,
+            left: 0,
+            width: bodyWidth,
+            height: 200
+          });
+          var intersectRect1 = rect({
+            top: 0,
+            left: 0,
+            width: bodyWidth,
+            // Height is only for the visible area.
+            height: 200 - 10
+          });
+          expect(rect(records[2].boundingClientRect)).to.eql(clientRect1);
+          expect(rect(records[2].intersectionRect)).to.eql(intersectRect1);
+          expect(records[2].isIntersecting).to.be(true);
+          expect(records[2].intersectionRatio).to.within(0.94, 0.96); // ~0.95
+
+          done();
+          io.disconnect();
+        }, {}, parentRect);
+        io.observe(documentElement);
+        io.observe(body);
+        io.observe(iframeTargetEl1);
+      });
+
+      it('calculates rects for a clipped frame on top and scrolled', function(done) {
+        iframeWin.scrollTo(0, 10);
+        var parentRect = rect({top: -10, left: 0, height: 300, width: 100});
+        var io = createObserver(function(unsortedRecords) {
+          var records = sortRecords(unsortedRecords);
+          expect(records.length).to.be(4);
+          checkRootBoundsAreNull(records);
+
+          // The documentElement is partially visible.
+          expect(rect(records[0].boundingClientRect))
+              .to.eql(rect(documentElement.getBoundingClientRect()));
+          expect(rect(records[0].intersectionRect)).to.eql(rect({
+            top: 10,
+            left: 0,
+            width: bodyWidth,
+            height: 300 - 10
+          }));
+          expect(records[0].isIntersecting).to.be(true);
+          // (300 - 10) / 404 == ~0.717
+          expect(records[0].intersectionRatio).to.be.within(0.71, 0.72);
+
+          // The document.body is partially visible.
+          expect(rect(records[1].boundingClientRect))
+              .to.eql(rect(body.getBoundingClientRect()));
+          expect(rect(records[1].intersectionRect)).to.eql(rect({
+            top: 10,
+            left: 0,
+            width: bodyWidth,
+            height: 300 - 10
+          }));
+          expect(records[1].isIntersecting).to.be(true);
+          // (300 - 10) / 402 == ~0.721
+          expect(records[1].intersectionRatio).to.be.within(0.72, 0.73);
+
+          // The target1 is clipped at the top by the iframe's clipping.
+          var clientRect1 = rect({
+            top: -10,
+            left: 0,
+            width: bodyWidth,
+            height: 200
+          });
+          var intersectRect1 = rect({
+            left: 0,
+            width: bodyWidth,
+            // Top is clipped.
+            top: 10,
+            // The height is less by both: offset and scroll.
+            height: 200 - 10 - 10
+          });
+          expect(rect(records[2].boundingClientRect)).to.eql(clientRect1);
+          expect(rect(records[2].intersectionRect)).to.eql(intersectRect1);
+          expect(records[2].isIntersecting).to.be(true);
+          expect(records[2].intersectionRatio).to.within(0.89, 0.91); // ~0.9
+
+          // The target2 is partially visible.
+          var clientRect2 = rect({
+            top: 202 - 10,
+            left: 0,
+            width: bodyWidth,
+            height: 200
+          });
+          var intersectRect2 = rect({
+            top: 202 - 10,
+            left: 0,
+            width: bodyWidth,
+            // The bottom is clipped off.
+            bottom: 300
+          });
+          expect(rect(records[3].boundingClientRect)).to.eql(clientRect2);
+          expect(rect(records[3].intersectionRect)).to.eql(intersectRect2);
+          expect(records[3].isIntersecting).to.be(true);
+          expect(records[3].intersectionRatio).to.be.within(0.53, 0.55); // ~0.54
+
+          done();
+          io.disconnect();
+        }, {}, parentRect);
+        io.observe(documentElement);
+        io.observe(body);
+        io.observe(iframeTargetEl1);
+        io.observe(iframeTargetEl2);
+      });
+
+      it('calculates rects for a fully clipped frame', function(done) {
+        var parentRect = rect({top: -400, left: 20, height: 300, width: 100});
+        var io = createObserver(function(unsortedRecords) {
+          var records = sortRecords(unsortedRecords);
+          expect(records.length).to.be(3);
+          checkRootBoundsAreNull(records);
+
+          var emptyRect = rect({
+            top: 0,
+            left: 0,
+            width: 0,
+            height: 0
+          });
+
+          // The documentElement is completely invisible.
+          expect(rect(records[0].boundingClientRect))
+              .to.eql(rect(documentElement.getBoundingClientRect()));
+          expect(rect(records[0].intersectionRect)).to.eql(emptyRect);
+          expect(records[0].isIntersecting).to.be(false);
+          expect(records[0].intersectionRatio).to.be(0);
+
+          // The document.body is completely invisible.
+          expect(rect(records[1].boundingClientRect))
+              .to.eql(rect(body.getBoundingClientRect()));
+          expect(rect(records[1].intersectionRect)).to.eql(emptyRect);
+          expect(records[1].isIntersecting).to.be(false);
+          expect(records[1].intersectionRatio).to.be(0);
+
+          // The target1 is completely invisible.
+          var clientRect1 = rect({
+            top: 0,
+            left: 0,
+            width: bodyWidth,
+            height: 200
+          });
+          expect(rect(records[2].boundingClientRect)).to.eql(clientRect1);
+          expect(rect(records[2].intersectionRect)).to.eql(emptyRect);
+          expect(records[2].isIntersecting).to.be(false);
+          expect(records[2].intersectionRatio).to.be(0);
+
+          done();
+          io.disconnect();
+        }, {}, parentRect);
+        io.observe(documentElement);
+        io.observe(body);
+        io.observe(iframeTargetEl1);
+      });
+
+      it('blocks until crossOriginUpdater is called first time', function(done) {
+        if (supportsNativeIntersectionObserver(iframeWin)) {
+          // Skip: not possible to emulate with the native observer.
+          done();
+          return;
+        }
+
+        var spy = sinon.spy();
+
+        var parentRect = rect({top: 0, left: 20, height: 300, width: 100});
+
+        var io = createObserver(spy, {});
+        io.observe(iframeTargetEl1);
+
+        runSequence([
+          function(done) {
+            setTimeout(function() {
+              expect(spy.callCount).to.be(0);
+
+              // Issue the first update.
+              crossOriginUpdater(parentRect, null);
+
+              done();
+            }, ASYNC_TIMEOUT);
+          },
+          function(done) {
+            setTimeout(function() {
+              expect(spy.callCount).to.be(1);
+              var records = sortRecords(spy.lastCall.args[0]);
+              expect(records.length).to.be(1);
+              expect(records[0].intersectionRatio).to.be(0);
+              expect(records[0].isIntersecting).to.be(false);
+              done();
+            }, ASYNC_TIMEOUT);
+          },
+          function(done) {
+            io.disconnect();
+            done();
+          }
+        ], done);
+      });
+
+      it('doesn\'t block with a root specified', function(done) {
+        var spy = sinon.spy();
+
+        var io = createObserver(spy, {root: body});
+        io.observe(iframeTargetEl1);
+
+        runSequence([
+          function(done) {
+            setTimeout(function() {
+              expect(spy.callCount).to.be(1);
+              var record = sortRecords(spy.lastCall.args[0])[0];
+              expect(record.intersectionRatio).to.be(1);
+              expect(record.isIntersecting).to.be(true);
+              expect(rect(record.rootBounds)).to.eql(rect(body.getBoundingClientRect()));
+              done();
+            }, ASYNC_TIMEOUT);
+          },
+          function(done) {
+            io.disconnect();
+            done();
+          }
+        ], done);
+      });
+
+      it('handles style changes', function(done) {
+        var spy = sinon.spy();
+
+        var parentRect = rect({top: 0, left: 0, height: 200, width: 100});
+
+        // When first element becomes invisible, the second element will show.
+        // And in reverse: when the first element becomes visible again, the
+        // second element will disappear.
+        var io = createObserver(spy, {}, parentRect);
+        io.observe(iframeTargetEl1);
+        io.observe(iframeTargetEl2);
+
+        runSequence([
+          function(done) {
+            setTimeout(function() {
+              expect(spy.callCount).to.be(1);
+              var records = sortRecords(spy.lastCall.args[0]);
+              expect(records.length).to.be(2);
+              expect(records[0].intersectionRatio).to.be(1);
+              expect(records[0].isIntersecting).to.be(true);
+              expect(records[1].intersectionRatio).to.be(0);
+              expect(records[1].isIntersecting).to.be(false);
+              done();
+            }, ASYNC_TIMEOUT);
+          },
+          function(done) {
+            iframeTargetEl1.style.display = 'none';
+            setTimeout(function() {
+              expect(spy.callCount).to.be(2);
+              var records = sortRecords(spy.lastCall.args[0]);
+              expect(records.length).to.be(2);
+              expect(records[0].intersectionRatio).to.be(0);
+              expect(records[0].isIntersecting).to.be(false);
+              expect(records[1].intersectionRatio).to.be(1);
+              expect(records[1].isIntersecting).to.be(true);
+              done();
+            }, ASYNC_TIMEOUT);
+          },
+          function(done) {
+            iframeTargetEl1.style.display = '';
+            setTimeout(function() {
+              expect(spy.callCount).to.be(3);
+              var records = sortRecords(spy.lastCall.args[0]);
+              expect(records.length).to.be(2);
+              expect(records[0].intersectionRatio).to.be(1);
+              expect(records[0].isIntersecting).to.be(true);
+              expect(records[1].intersectionRatio).to.be(0);
+              expect(records[1].isIntersecting).to.be(false);
+              done();
+            }, ASYNC_TIMEOUT);
+          },
+          function(done) {
+            io.disconnect();
+            done();
+          }
+        ], done);
+      });
+
+      it('handles scroll changes', function(done) {
+        var spy = sinon.spy();
+
+        var parentRect = rect({top: 0, left: 0, height: 200, width: 100});
+
+        // Scrolling to the middle of the iframe shows the second box and
+        // hides the first.
+        var io = createObserver(spy, {}, parentRect);
+        io.observe(iframeTargetEl1);
+        io.observe(iframeTargetEl2);
+
+        runSequence([
+          function(done) {
+            setTimeout(function() {
+              expect(spy.callCount).to.be(1);
+              var records = sortRecords(spy.lastCall.args[0]);
+              expect(records.length).to.be(2);
+              expect(records[0].intersectionRatio).to.be(1);
+              expect(records[0].isIntersecting).to.be(true);
+              expect(records[1].intersectionRatio).to.be(0);
+              expect(records[1].isIntersecting).to.be(false);
+              done();
+            }, ASYNC_TIMEOUT);
+          },
+          function(done) {
+            iframeWin.scrollTo(0, 202);
+            setTimeout(function() {
+              expect(spy.callCount).to.be(2);
+              var records = sortRecords(spy.lastCall.args[0]);
+              expect(records.length).to.be(2);
+              expect(records[0].intersectionRatio).to.be(0);
+              expect(records[0].isIntersecting).to.be(false);
+              expect(records[1].intersectionRatio).to.be(1);
+              expect(records[1].isIntersecting).to.be(true);
+              done();
+            }, ASYNC_TIMEOUT);
+          },
+          function(done) {
+            iframeWin.scrollTo(0, 0);
+            setTimeout(function() {
+              expect(spy.callCount).to.be(3);
+              var records = sortRecords(spy.lastCall.args[0]);
+              expect(records.length).to.be(2);
+              expect(records[0].intersectionRatio).to.be(1);
+              expect(records[0].isIntersecting).to.be(true);
+              expect(records[1].intersectionRatio).to.be(0);
+              expect(records[1].isIntersecting).to.be(false);
+              done();
+            }, ASYNC_TIMEOUT);
+          },
+          function(done) {
+            io.disconnect();
+            done();
+          }
+        ], done);
+      });
+
+      it('handles parent rect changes', function(done) {
+        var spy = sinon.spy();
+
+        var parentRect = rect({top: 0, left: 0, height: 200, width: 100});
+
+        // Iframe goes off screen and returns.
+        var io = createObserver(spy, {}, parentRect);
+        io.observe(iframeTargetEl1);
+        io.observe(iframeTargetEl2);
+
+        runSequence([
+          function(done) {
+            setTimeout(function() {
+              expect(spy.callCount).to.be(1);
+              var records = sortRecords(spy.lastCall.args[0]);
+              expect(records.length).to.be(2);
+              checkRootBoundsAreNull(records);
+              expect(records[0].intersectionRatio).to.be(1);
+              expect(records[0].isIntersecting).to.be(true);
+              expect(records[1].intersectionRatio).to.be(0);
+              expect(records[1].isIntersecting).to.be(false);
+              // Top-level bounds.
+              expect(records[0].intersectionRect.height).to.be(200);
+              done();
+            }, ASYNC_TIMEOUT);
+          },
+          function(done) {
+            // Completely off screen.
+            applyParentRect(rect({top: -202, left: 0, height: 200, width: 100}));
+            setTimeout(function() {
+              expect(spy.callCount).to.be(2);
+              var records = sortRecords(spy.lastCall.args[0]);
+              expect(records.length).to.be(1);
+              checkRootBoundsAreNull(records);
+              expect(records[0].intersectionRatio).to.be(0);
+              expect(records[0].isIntersecting).to.be(false);
+              // Top-level bounds.
+              expect(records[0].intersectionRect.height).to.be(0);
+              done();
+            }, ASYNC_TIMEOUT);
+          },
+          function(done) {
+            // Partially returns.
+            applyParentRect(rect({top: -100, left: 0, height: 200, width: 100}));
+            setTimeout(function() {
+              expect(spy.callCount).to.be(3);
+              var records = sortRecords(spy.lastCall.args[0]);
+              expect(records.length).to.be(1);
+              checkRootBoundsAreNull(records);
+              expect(records[0].intersectionRatio).to.be.within(0.45, 0.55);
+              expect(records[0].isIntersecting).to.be(true);
+              // Top-level bounds.
+              expect(records[0].intersectionRect.height / 200).to.be.within(0.45, 0.55);
+              done();
+            }, ASYNC_TIMEOUT);
+          },
+          function(done) {
+            io.disconnect();
+            done();
+          }
+        ], done);
+      });
+
+      it('handles tracking iframe viewport', function(done) {
+        iframe.style.height = '100px';
+        iframe.style.top = '100px';
+        iframeWin.scrollTo(0, 110);
+        // {root:iframeDoc} means to track the iframe viewport.
+        var io = createObserver(
+          function (records) {
+            io.unobserve(iframeTargetEl1);
+            var intersectionRect = rect({
+              top: 0, // if root=null, then this would be 100.
+              left: 0,
+              height: 90,
+              width: bodyWidth
+            });
+            expect(records.length).to.be(1);
+            expect(rect(records[0].rootBounds)).to.eql(getRootRect(iframeDoc));
+            expect(rect(records[0].intersectionRect)).to.eql(intersectionRect);
+            done();
+          },
+          { root: iframeDoc }
+        );
+
+        io.observe(iframeTargetEl1);
+      });
+
+      it('handles tracking iframe viewport with rootMargin', function(done) {
+        iframe.style.height = '100px';
+
+        var io = createObserver(
+          function (records) {
+            io.unobserve(iframeTargetEl1);
+            var intersectionRect = rect({
+              top: 0, // if root=null, then this would be 100.
+              left: 0,
+              height: 200,
+              width: bodyWidth
+            });
+
+            // rootMargin: 100% --> 3x width + 3x height.
+            var expectedRootBounds = rect({
+              top: -100,
+              left: -bodyWidth,
+              width: bodyWidth * 3,
+              height: 100 * 3
+            });
+            expect(records.length).to.be(1);
+            expect(rect(records[0].rootBounds)).to.eql(expectedRootBounds);
+            expect(rect(records[0].intersectionRect)).to.eql(intersectionRect);
+            done();
+          },
+          { root: iframeDoc, rootMargin: '100%' }
+        );
+
+        io.observe(iframeTargetEl1);
+      });
+    });
   });
 });
 

package/intersection-observer.js

@@ -33,12 +33,32 @@ if ('IntersectionObserver' in window &&
   return;
 }
 
-
 /**
- * A local reference to the document.
+ * Returns the embedding frame element, if any.
+ * @param {!Document} doc
+ * @return {!Element}
  */
-var document = window.document;
+function getFrameElement(doc) {
+  try {
+    return doc.defaultView && doc.defaultView.frameElement || null;
+  } catch (e) {
+    // Ignore the error.
+    return null;
+  }
+}
 
+/**
+ * A local reference to the root document.
+ */
+var document = (function(startDoc) {
+  var doc = startDoc;
+  var frame = getFrameElement(doc);
+  while (frame) {
+    doc = frame.ownerDocument;
+    frame = getFrameElement(doc);
+  }
+  return doc;
+})(window.document);
 
 /**
  * An IntersectionObserver registry. This registry exists to hold a strong
@@ -111,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`.
@@ -375,7 +399,9 @@ IntersectionObserver.prototype._monitorIntersections = function(doc) {
   });
 
   // Also monitor the parent.
-  if (doc != (this.root && this.root.ownerDocument || document)) {
+  var rootDoc =
+    (this.root && (this.root.ownerDocument || this.root)) || document;
+  if (doc != rootDoc) {
     var frame = getFrameElement(doc);
     if (frame) {
       this._monitorIntersections(frame.ownerDocument);
@@ -395,7 +421,8 @@ IntersectionObserver.prototype._unmonitorIntersections = function(doc) {
     return;
   }
 
-  var rootDoc = (this.root && this.root.ownerDocument || document);
+  var rootDoc =
+    (this.root && (this.root.ownerDocument || this.root)) || document;
 
   // Check if any dependent targets are still remaining.
   var hasDependentTargets =
@@ -473,11 +500,18 @@ IntersectionObserver.prototype._checkForIntersections = function() {
     var intersectionRect = rootIsInDom && rootContainsTarget &&
         this._computeTargetAndRootIntersection(target, targetRect, rootRect);
 
+    var rootBounds = null;
+    if (!this._rootContainsTarget(target)) {
+      rootBounds = getEmptyRect();
+    } else if (!crossOriginUpdater || this.root) {
+      rootBounds = rootRect;
+    }
+
     var newEntry = item.entry = new IntersectionObserverEntry({
       time: now(),
       target: target,
       boundingClientRect: targetRect,
-      rootBounds: crossOriginUpdater && !this.root ? null : rootRect,
+      rootBounds: rootBounds,
       intersectionRect: intersectionRect
     });
 
@@ -598,12 +632,13 @@ 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.
-    var html = document.documentElement;
-    var body = document.body;
+    var doc = isDoc(this.root) ? this.root : document;
+    var html = doc.documentElement;
+    var body = doc.body;
     rootRect = {
       top: 0,
       left: 0,
@@ -694,8 +729,12 @@ IntersectionObserver.prototype._rootIsInDom = function() {
  * @private
  */
 IntersectionObserver.prototype._rootContainsTarget = function(target) {
-  return containsDeep(this.root || document, target) &&
-    (!this.root || this.root.ownerDocument == target.ownerDocument);
+  var rootDoc =
+    (this.root && (this.root.ownerDocument || this.root)) || document;
+  return (
+    containsDeep(rootDoc, target) &&
+    (!this.root || rootDoc == target.ownerDocument)
+  );
 };
 
 
@@ -782,8 +821,8 @@ function removeEvent(node, event, fn, opt_useCapture) {
   if (typeof node.removeEventListener == 'function') {
     node.removeEventListener(event, fn, opt_useCapture || false);
   }
-  else if (typeof node.detatchEvent == 'function') {
-    node.detatchEvent('on' + event, fn);
+  else if (typeof node.detachEvent == 'function') {
+    node.detachEvent('on' + event, fn);
   }
 }
 
@@ -945,32 +984,26 @@ function getParentNode(node) {
     return getFrameElement(node);
   }
 
+  // If the parent has element that is assigned through shadow root slot
+  if (parent && parent.assignedSlot) {
+    parent = parent.assignedSlot.parentNode
+  }
+
   if (parent && parent.nodeType == 11 && parent.host) {
     // If the parent is a shadow root, return the host element.
     return parent.host;
   }
 
-  if (parent && parent.assignedSlot) {
-    // If the parent is distributed in a <slot>, return the parent of a slot.
-    return parent.assignedSlot.parentNode;
-  }
-
   return parent;
 }
 
-
 /**
- * Returns the embedding frame element, if any.
- * @param {!Document} doc
- * @return {!Element}
+ * Returns true if `node` is a Document.
+ * @param {!Node} node
+ * @returns {boolean}
  */
-function getFrameElement(doc) {
-  try {
-    return doc.defaultView && doc.defaultView.frameElement || null;
-  } catch (e) {
-    // Ignore the error.
-    return null;
-  }
+function isDoc(node) {
+  return node && node.nodeType === 9;
 }
 
 

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "intersection-observer",
-  "version": "0.10.0",
+  "version": "0.12.1",
   "description": "A polyfill for IntersectionObserver",
-  "main": "intersection-observer",
+  "main": "intersection-observer.js",
   "repository": {
     "type": "git",
     "url": "git@github.com:w3c/IntersectionObserver.git"