intersection-observer.https.html

Enable keyboard shortcuts

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

<!DOCTYPE html>

<title>Test Intersection Observer in fenced frame</title>

<script src="/common/rendering-utils.js"></script>

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

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

<script src="/common/utils.js"></script>

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

<script src="/common/utils.js"></script>

<style>

fencedframe {

  width: 100px;

  height: 100px;

  position: fixed;

  top: 0px;

  left: 0px;

  border: unset;

</style>

<body>

<script>

promise_test(async (t) => {

  // first entry after observe.

  const io_entry_on_registration = token();

  // entry after transform.

  const io_entry_on_transform = token();

  // entry with clip.

  const io_entry_on_clip = token();

  const frame = attachFencedFrame(generateURL(

    "resources/frame-with-intersection-observer.html",

    [io_entry_on_registration, io_entry_on_transform, io_entry_on_clip]));

  let result = await nextValueFromServer(io_entry_on_registration);

  assert_equals(result, "0,0,100,100,true",

    "Subscribing to IO dispatches a notification");

  // Apply a transform to the fencedframe and ensure it gets applied to the

  // intersectionRect.

  frame.style.transform = 'translate(-10px, -20px)';

  result = await nextValueFromServer(io_entry_on_transform);

  assert_equals(result, "10,20,90,80,true",

    "Transform applies to intersection rect");

  // Now add a clip to the fencedframe which should clip the intersectionRect.

  frame.style.clipPath = 'inset(10px)';

  result = await nextValueFromServer(io_entry_on_clip);

  assert_equals(result, "10,20,80,70,false", "Clip applies to intersection rect");

}, 'Intersection Observer Test');

</script>

</body>

</html>