IntersectionObserver

• constructor

  • throws when callback is not a function2ms ‣

    expect(function() {
      io = new IntersectionObserver(null);
    }).to.throwException();

  • instantiates root correctly1ms ‣

    io = new IntersectionObserver(noop);
    expect(io.root).to.be(null);
    io = new IntersectionObserver(noop, {root: rootEl});
    expect(io.root).to.be(rootEl);

  • throws when root is not an Element1ms ‣

    expect(function() {
      io = new IntersectionObserver(noop, {root: 'foo'});
    }).to.throwException();

  • instantiates rootMargin correctly2ms ‣

    io = new IntersectionObserver(noop, {rootMargin: '10px'});
    expect(io.rootMargin).to.be('10px 10px 10px 10px');
    io = new IntersectionObserver(noop, {rootMargin: '10px -5%'});
    expect(io.rootMargin).to.be('10px -5% 10px -5%');
    io = new IntersectionObserver(noop, {rootMargin: '10px 20% 0px'});
    expect(io.rootMargin).to.be('10px 20% 0px 20%');
    io = new IntersectionObserver(noop, {rootMargin: '0px 0px -5% 5px'});
    expect(io.rootMargin).to.be('0px 0px -5% 5px');
    // TODO(philipwalton): the polyfill supports fractional pixel and
    // percentage values, but the native Chrome implementation does not,
    // at least not in what it reports `rootMargin` to be.
    if (!supportsNativeIntersectionObserver()) {
      io = new IntersectionObserver(noop, {rootMargin: '-2.5% -8.5px'});
      expect(io.rootMargin).to.be('-2.5% -8.5px -2.5% -8.5px');
    }

  • instantiates thresholds correctly0ms ‣

    io = new IntersectionObserver(noop);
    expect(io.thresholds).to.eql([0]);
    io = new IntersectionObserver(noop, {threshold: 0.5});
    expect(io.thresholds).to.eql([0.5]);
    io = new IntersectionObserver(noop, {threshold: [0.25, 0.5, 0.75]});
    expect(io.thresholds).to.eql([0.25, 0.5, 0.75]);
    io = new IntersectionObserver(noop, {threshold: [1, .5, 0]});
    expect(io.thresholds).to.eql([0, .5, 1]);

  • throws when a threshold is not a number2ms ‣

    expect(function() {
      io = new IntersectionObserver(noop, {threshold: ['foo']});
    }).to.throwException();

  • throws when a threshold value is not between 0 and 10ms ‣

    expect(function() {
      io = new IntersectionObserver(noop, {threshold: [0, -1]});
    }).to.throwException();

• observe

  • throws when target is not an Element1ms ‣

    expect(function() {
      io = new IntersectionObserver(noop);
      io.observe(null);
    }).to.throwException();

  • triggers for all targets when observing begins5ms ‣

    io = new IntersectionObserver(function(records) {
      expect(records.length).to.be(2);
      expect(records[0].intersectionRatio).to.be(1);
      expect(records[1].intersectionRatio).to.be(0);
      done();
    }, {root: rootEl});
    targetEl2.style.top = '-40px';
    io.observe(targetEl1);
    io.observe(targetEl2);