tor-browser

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

content-visibility-038.html (3243B)

      1 <!doctype HTML>
      2 <html>
      3 <meta charset="utf8">
      4 <title>Content Visibility: measure layout</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="assert" content="content-visibility hidden element layout is correct">
      8 <meta name="assert" content="content-visibility hidden element's subtree layout is correct">
      9 
     10 <style>
     11 #container {
     12  background: lightgreen;
     13  contain: layout;
     14 }
     15 .hidden {
     16  content-visibility: hidden;
     17 }
     18 #sizer {
     19  width: 100px;
     20  height: 100px;
     21 }
     22 .child {
     23  width: 20px;
     24  height: 20%;
     25  background: cyan;
     26 }
     27 #spacer {
     28  width: 150px;
     29  height: 150px;
     30  background: green;
     31 }
     32 </style>
     33 
     34 <div id="parent"></div>
     35 <div id="spacer"></div>
     36 
     37 <script src="/resources/testharness.js"></script>
     38 <script src="/resources/testharnessreport.js"></script>
     39 
     40 <script>
     41 async_test((t) => {
     42  function createChild(id) {
     43    const child = document.createElement("div");
     44    child.classList = "child";
     45    child.id = id;
     46    return child;
     47  }
     48 
     49  function measureForced() {
     50    t.step(() => {
     51      // Ensure children are laid out; this forces a layout if it wasn't done.
     52      assert_equals(document.getElementById("0").offsetTop, 0, "0 forced");
     53      assert_equals(document.getElementById("1").offsetTop, 20, "1 forced");
     54      assert_equals(document.getElementById("2").offsetTop, 40, "2 forced");
     55      // Both parent should be 0 height, since it's hidden. Both parent and spacers
     56      // should have 8 offsetTop.
     57      assert_equals(document.getElementById("parent").offsetTop, 8, "parent forced");
     58      assert_equals(document.getElementById("spacer").offsetTop, 8, "spacer forced");
     59    });
     60  }
     61 
     62  function measureWhenVisible() {
     63    t.step(() => {
     64      // Ensure children are still laid out.
     65      assert_equals(document.getElementById("0").offsetTop, 0, "0 when visible");
     66      assert_equals(document.getElementById("1").offsetTop, 20, "1 when visible");
     67      assert_equals(document.getElementById("2").offsetTop, 40, "2 when visible");
     68      // Now the parent should encompass a container, so spacer is pushed down.
     69      assert_equals(document.getElementById("parent").offsetTop, 8, "parent when visible");
     70      assert_equals(document.getElementById("spacer").offsetTop, 108, "spacer when visible");
     71    });
     72  }
     73 
     74  function construct(container) {
     75    const sizer = document.createElement("div");
     76    sizer.id = "sizer";
     77    container.appendChild(sizer);
     78    sizer.appendChild(createChild("0"));
     79    sizer.appendChild(createChild("1"));
     80    sizer.appendChild(createChild("2"));
     81  }
     82 
     83  async function runTest() {
     84    const container = document.createElement("div");
     85    container.id = "container";
     86 
     87    document.getElementById("parent").appendChild(container);
     88    container.classList.add("hidden");
     89    requestAnimationFrame(() => {
     90      construct(container);
     91      measureForced();
     92 
     93      container.classList.remove("hidden");
     94      requestAnimationFrame(() => requestAnimationFrame(() => {
     95        measureWhenVisible();
     96        t.done();
     97      }));
     98    });
     99  }
    100 
    101  window.onload = function() {
    102    requestAnimationFrame(() => requestAnimationFrame(runTest));
    103  };
    104 }, "Measure Forced Layout");
    105 </script>
    106 
    107 </html>