<!doctype HTML>
<html>
<meta charset="utf8">
<title>Content Visibility: ContentVisibilityAutoStateChange event.</title>
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
<meta name="timeout" content="long">
<meta name="assert" content="ContentVisibilityAutoStateChange fires when things enter/exit viewport">

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/common/utils.js"></script>
<script src="/scroll-to-text-fragment/stash.js"></script>

<style>
.spacer {
  height: 3000px;
}
.auto { content-visibility: auto; }
</style>

<div id=upper></div>
<div class=spacer></div>
<div id=middle></div>
<div class=spacer></div>
<div id=lower></div>

<script>
promise_test(t => new Promise(async (resolve, reject) => {
  let shouldSkip = false;
  const listener = (e) => {
    if (!e.skipped)
      resolve();
  };

  upper.addEventListener("contentvisibilityautostatechange", listener);
  t.add_cleanup(() => upper.removeEventListener("contentvisibilityautostatechange", listener));
  upper.classList.add("auto");
}), "ContentVisibilityAutoStateChange fires when relevant element gains `content-visibility:auto`");

promise_test(t => new Promise(async (resolve, reject) => {
  let shouldSkip = false;
  const listener = (e) => {
    if (e.skipped)
      resolve();
    else
      reject();
  };

  lower.addEventListener("contentvisibilityautostatechange", listener);
  t.add_cleanup(() => lower.removeEventListener("contentvisibilityautostatechange", listener));
  lower.classList.add("auto");
}), "ContentVisibilityAutoStateChange fires when not relevant element gains `content-visibility:auto`");

promise_test(t => new Promise(async (resolve, reject) => {
  await new Promise((waited, _) => {
    requestAnimationFrame(() => requestAnimationFrame(waited));
  });

  const listener = (e) => {
    if (e.skipped)
      resolve();
  };

  upper.addEventListener("contentvisibilityautostatechange", listener);
  t.add_cleanup(() => upper.removeEventListener("contentvisibilityautostatechange", listener));

  requestAnimationFrame(() => requestAnimationFrame(() => {
    middle.scrollIntoView();
  }));
}), "ContentVisibilityAutoStateChange fires when skipped");

promise_test(t => new Promise(async (resolve, reject) => {
  await new Promise((waited, _) => {
    requestAnimationFrame(() => requestAnimationFrame(waited));
  });

  const listener = (e) => {
    if (!e.skipped)
      resolve();
    else
      reject();
  }

  lower.addEventListener("contentvisibilityautostatechange", listener);
  t.add_cleanup(() => {
    lower.removeEventListener("contentvisibilityautostatechange", listener);
  });

  requestAnimationFrame(() => requestAnimationFrame(() => {
    lower.scrollIntoView();
  }));
}), "ContentVisibilityAutoStateChange fires when not skipped");

</script>

