tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

content-visibility-auto-state-changed.html (4408B)

      1 <!doctype HTML>
      2 <html>
      3 <meta charset="utf8">
      4 <title>Content Visibility: ContentVisibilityAutoStateChange event.</title>
      5 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
      6 <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
      7 <meta name="timeout" content="long">
      8 <meta name="assert" content="ContentVisibilityAutoStateChange fires when things enter/exit viewport">
      9 
     10 <script src="/resources/testharness.js"></script>
     11 <script src="/resources/testharnessreport.js"></script>
     12 <script src="/resources/testdriver.js"></script>
     13 <script src="/resources/testdriver-vendor.js"></script>
     14 <script src="/common/rendering-utils.js"></script>
     15 <script src="/common/utils.js"></script>
     16 <script src="/scroll-to-text-fragment/stash.js"></script>
     17 
     18 <style>
     19 .spacer {
     20  height: 3000px;
     21 }
     22 .auto { content-visibility: auto; }
     23 </style>
     24 
     25 <script>
     26 let contentattrfired = false;
     27 let contentattrfiredonsvg = false;
     28 
     29 function contentattrDidFire() {
     30  contentattrfired = true;
     31 }
     32 
     33 function contentattrDidFireOnSvg() {
     34  contentattrfiredonsvg = true;
     35 }
     36 
     37 </script>
     38 
     39 <div id=upper></div>
     40 <div id=attrtest></div>
     41 <div id=contentattrtest oncontentvisibilityautostatechange="contentattrDidFire()" class=auto></div>
     42 <svg id="svgcontentattrtest" oncontentvisibilityautostatechange="contentattrDidFireOnSvg()" class="auto"></svg>
     43 <div class=spacer></div>
     44 <div id=middle></div>
     45 <div class=spacer></div>
     46 <div id=lower></div>
     47 
     48 <script>
     49 promise_test(t => new Promise(async (resolve, reject) => {
     50  let shouldSkip = false;
     51  const listener = (e) => {
     52    if (!e.skipped)
     53      resolve();
     54  };
     55 
     56  upper.addEventListener("contentvisibilityautostatechange", listener);
     57  t.add_cleanup(() => upper.removeEventListener("contentvisibilityautostatechange", listener));
     58  upper.classList.add("auto");
     59 }), "ContentVisibilityAutoStateChange fires when relevant element gains `content-visibility:auto`");
     60 
     61 promise_test(t => new Promise(async (resolve, reject) => {
     62  let shouldSkip = false;
     63  const listener = (e) => {
     64    if (!e.skipped)
     65      resolve();
     66  };
     67 
     68  attrtest.oncontentvisibilityautostatechange = listener;
     69  t.add_cleanup(() => { attrtest.oncontentvisibilityautostatechange = null });
     70  attrtest.classList.add("auto");
     71 }), "ContentVisibilityAutoStateChange fires when relevant element gains `content-visibility:auto` (oncontentvisibilityautostatechange syntax)");
     72 
     73 promise_test(t => new Promise(async (resolve, reject) => {
     74  let shouldSkip = false;
     75  const listener = (e) => {
     76    if (e.skipped)
     77      resolve();
     78    else
     79      reject();
     80  };
     81 
     82  lower.addEventListener("contentvisibilityautostatechange", listener);
     83  t.add_cleanup(() => lower.removeEventListener("contentvisibilityautostatechange", listener));
     84  lower.classList.add("auto");
     85 }), "ContentVisibilityAutoStateChange fires when not relevant element gains `content-visibility:auto`");
     86 
     87 promise_test(async t => {
     88  await waitForAtLeastOneFrame();
     89  assert_true(contentattrfired, "contentattrfired");
     90 }, "ContentVisibilityAutoStateChange content attribute test");
     91 
     92 
     93 promise_test(async t => {
     94  await waitForAtLeastOneFrame();
     95  assert_true(contentattrfiredonsvg, "contentattrfiredonsvg");
     96 }, "ContentVisibilityAutoStateChange content attribute test on svg");
     97 
     98 promise_test(t => new Promise(async (resolve, reject) => {
     99  await new Promise((waited, _) => {
    100    requestAnimationFrame(() => requestAnimationFrame(waited));
    101  });
    102 
    103  const listener = (e) => {
    104    if (e.skipped)
    105      resolve();
    106  };
    107 
    108  upper.addEventListener("contentvisibilityautostatechange", listener);
    109  t.add_cleanup(() => upper.removeEventListener("contentvisibilityautostatechange", listener));
    110 
    111  requestAnimationFrame(() => requestAnimationFrame(() => {
    112    middle.scrollIntoView();
    113  }));
    114 }), "ContentVisibilityAutoStateChange fires when skipped");
    115 
    116 promise_test(t => new Promise(async (resolve, reject) => {
    117  await new Promise((waited, _) => {
    118    requestAnimationFrame(() => requestAnimationFrame(waited));
    119  });
    120 
    121  const listener = (e) => {
    122    if (!e.skipped)
    123      resolve();
    124    else
    125      reject();
    126  }
    127 
    128  lower.addEventListener("contentvisibilityautostatechange", listener);
    129  t.add_cleanup(() => {
    130    lower.removeEventListener("contentvisibilityautostatechange", listener);
    131  });
    132 
    133  requestAnimationFrame(() => requestAnimationFrame(() => {
    134    lower.scrollIntoView();
    135  }));
    136 }), "ContentVisibilityAutoStateChange fires when not skipped");
    137 
    138 </script>