tor-browser

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

content-visibility-031.html (2099B)

      1 <!doctype HTML>
      2 <html>
      3 <meta charset="utf8">
      4 <title>Content Visibility: resize observer interactions</title>
      5 <link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
      6 <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
      7 <meta name="assert" content="content-visibility hidden subtrees do not trigger resize observer">
      8 
      9 <style>
     10 .hidden {
     11  content-visibility: hidden;
     12 }
     13 </style>
     14 <div id="container">
     15  <div id="resize" style="width: 50px; height: 50px">
     16  </div>
     17 </div>
     18 
     19 <script src="/resources/testharness.js"></script>
     20 <script src="/resources/testharnessreport.js"></script>
     21 
     22 <script>
     23 async_test(t => {
     24  let didCallback = false;
     25 
     26  function runTest() {
     27    let resizeCallback = function (entries) {
     28      didCallback = true;
     29    }
     30    let resizeObserver = new ResizeObserver(resizeCallback);
     31 
     32    resizeObserver.observe(resize);
     33 
     34    requestAnimationFrame(t.step_func(step2));
     35  }
     36 
     37  function step2() {
     38    assert_true(didCallback, 'Resize observation should happen in first frame after registering');
     39    didCallback = false;
     40 
     41    const container = document.getElementById("container");
     42    container.classList.add("hidden");
     43 
     44    // Change the size of #resize. This should cause a resize observation, but
     45    // only when the element becomes unhidden.
     46    resize.style.width = '100px';
     47 
     48    requestAnimationFrame(t.step_func(step3));
     49  }
     50 
     51  function step3() {
     52    assert_false(didCallback, 'ResizeObsever should not run during while unrendered');
     53    requestAnimationFrame(t.step_func(step4));
     54  }
     55 
     56  function step4() {
     57    assert_false(didCallback, 'ResizeObsever should not run while unrendered');
     58    const container = document.getElementById("container");
     59    container.classList.remove("hidden");
     60    requestAnimationFrame(t.step_func_done(step5));
     61  }
     62 
     63  function step5() {
     64    assert_true(didCallback, 'ResizeObsevers should now run once becoming visible');
     65  }
     66 
     67  window.onload = function() {
     68    requestAnimationFrame(() => requestAnimationFrame(t.step_func(runTest)));
     69  };
     70 }, "ResizeObserver skipped while hidden");
     71 </script>
     72 </html>