iframe-root-with-overflow-propagation.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /intersection-observer/iframe-root-with-overflow-propagation.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>IntersectionObserver observing table with border and overflow scroll</title>

<link rel="author" href="mailto:steven.novaryo@gmail.com" title="Steven Novaryo">

<link rel="help" href="https://w3c.github.io/IntersectionObserver/#intersectionobserver-root-intersection-rectangle">

<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-propagation">

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

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

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

<iframe id="target-iframe" width="200" height="200" src="resources/iframe-body-with-overflow-propagation.html">

</iframe>

<script>

var iframe = document.getElementById("target-iframe");

var target;

var entries = [];

var rootRect;

iframe.onload = function() {

  runTestCycle(function() {

    target = iframe.contentDocument.getElementById("target");

    assert_true(!!target, "target exists");

    rootRect = iframe.contentDocument.documentElement.getBoundingClientRect();

    var observer = new IntersectionObserver(function(changes) {

      entries = entries.concat(changes)

    }, { root: iframe.contentDocument });

    observer.observe(target);

    entries = entries.concat(observer.takeRecords());

    assert_equals(entries.length, 0, "No initial notifications.");

    runTestCycle(step0, "First rAF.");

  }, "IntersectionObserver observing an element inside a root table.");

function step0() {

  var targetRect = target.getBoundingClientRect();

  iframe.contentDocument.scrollingElement.scrollTop = 1000;

  runTestCycle(step1, "Scroll the iframe container to show the target element.");

  checkLastEntry(entries, 0, [

    targetRect.left, targetRect.right, targetRect.top, targetRect.bottom,

    0, 0, 0, 0,

    rootRect.left, rootRect.right, rootRect.top, rootRect.bottom,

    false

]);

function step1() {

  var targetRect = target.getBoundingClientRect();

  checkLastEntry(entries, 1, [

    targetRect.left, targetRect.right, targetRect.top, targetRect.bottom,

    targetRect.left, targetRect.right, targetRect.top, targetRect.bottom,

    rootRect.left, rootRect.right, rootRect.top, rootRect.bottom,

    true

]);

</script>