isIntersecting-threshold.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 3 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /intersection-observer/isIntersecting-threshold.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta name="viewport" content="width=device-width,initial-scale=1">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="./resources/intersection-observer-test-utils.js"></script>

<style>

#scroller { width: 100px; height: 100px; overflow: scroll; }

#scroller > div { height: 800px; }

#target { margin-top: 25px; height: 50px; background-color: blue; }

</style>

<div id="scroller">

  <div>

    <div id="target"></div>

  </div>

</div>

<script>

let entries = [];

window.onload = function() {

  runTestCycle(step2, "At initial scroll position");

  scroller.scrollTop = 0;

  let observer = new IntersectionObserver(

    es => entries = entries.concat(es),

    { threshold: 1 }

);

  observer.observe(target);

};

function step2() {

  runTestCycle(step3, "Scrolled to half way through target element");

  assert_equals(entries.length, 1);

  assert_equals(entries[0].intersectionRatio, 1);

  assert_equals(entries[0].isIntersecting, true);

  scroller.scrollTop = 50;

function step3() {

  runTestCycle(step4, "Scrolled to target element completely off screen");

  assert_equals(entries.length, 2);

  assert_true(entries[1].intersectionRatio >= 0.5 &&

              entries[1].intersectionRatio < 1);

  // See https://github.com/w3c/IntersectionObserver/issues/432

  assert_equals(entries[1].isIntersecting, false);

  scroller.scrollTop = 100;

function step4() {

  assert_equals(entries.length, 2);

</script>