content-visibility-auto-state-changed.html

<!doctype HTML>
<html>
<meta charset="utf8">
<title>Content Visibility: ContentVisibilityAutoStateChange event.</title>
<link rel="author" title="Vladimir Levin" href="mailto:[email protected]">
<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/rendering-utils.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>

<script>
let contentattrfired = false;
let contentattrfiredonsvg = false;

function contentattrDidFire() {
  contentattrfired = true;
}

function contentattrDidFireOnSvg() {
  contentattrfiredonsvg = true;
}

</script>

<div id=upper></div>
<div id=attrtest></div>
<div id=contentattrtest oncontentvisibilityautostatechange="contentattrDidFire()" class=auto></div>
<svg id="svgcontentattrtest" oncontentvisibilityautostatechange="contentattrDidFireOnSvg()" class="auto"></svg>
<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();
  };

  attrtest.oncontentvisibilityautostatechange = listener;
  t.add_cleanup(() => { attrtest.oncontentvisibilityautostatechange = null });
  attrtest.classList.add("auto");
}), "ContentVisibilityAutoStateChange fires when relevant element gains `content-visibility:auto` (oncontentvisibilityautostatechange syntax)");

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(async t => {
  await waitForAtLeastOneFrame();
  assert_true(contentattrfired, "contentattrfired");
}, "ContentVisibilityAutoStateChange content attribute test");


promise_test(async t => {
  await waitForAtLeastOneFrame();
  assert_true(contentattrfiredonsvg, "contentattrfiredonsvg");
}, "ContentVisibilityAutoStateChange content attribute test on svg");

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>
chromium/third_party/blink/web_tests/external/wpt/css/css-contain/content-visibility/content-visibility-auto-state-changed.html
