tor-browser

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

content-visibility-072.html (1738B)

      1 <!doctype HTML>
      2 <html>
      3 <meta charset="utf8">
      4 <title>Content Visibility: nested forced layouts</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="nested content-visibility items are all processed when layout is forced">
      8 
      9 <script src="/resources/testharness.js"></script>
     10 <script src="/resources/testharnessreport.js"></script>
     11 
     12 <style>
     13 body, html {
     14  padding: 0;
     15  margin: 0;
     16 }
     17 .spacer {
     18  height: 3000px;
     19 }
     20 .target {
     21  width: 12px;
     22  height: 34px;
     23 
     24  position: relative;
     25  left: 5px;
     26  top: 7px;
     27 }
     28 
     29 .auto {
     30  content-visibility: auto;
     31 }
     32 .hidden {
     33  content-visibility: hidden;
     34 }
     35 </style>
     36 
     37 <div class=spacer></div>
     38 <div class=auto>
     39  <div class=auto>
     40    <div class=target id=one></div>
     41  </div>
     42 </div>
     43 
     44 <div class=auto>
     45  <div class=hidden>
     46    <div class=target id=two></div>
     47  </div>
     48 </div>
     49 
     50 <div class=hidden>
     51  <div class=auto>
     52    <div class=target id=three></div>
     53  </div>
     54 </div>
     55 
     56 <div class=hidden>
     57  <div class=hidden>
     58    <div class=target id=four></div>
     59  </div>
     60 </div>
     61 
     62 <div class=hidden>
     63  <div class=hidden>
     64    <div class=hidden>
     65      <div class=hidden>
     66        <div class=hidden>
     67          <div class=target id=five></div>
     68        </div>
     69      </div>
     70    </div>
     71  </div>
     72 </div>
     73 
     74 <script>
     75 const ids = ["one", "two", "three", "four", "five"];
     76 for (let i = 0; i < ids.length; ++i) {
     77  test(() => {
     78    const r = document.getElementById(ids[i]).getBoundingClientRect();
     79    assert_equals(r.x, 5, "x");
     80    assert_equals(r.y, 3007, "y");
     81    assert_equals(r.width, 12, "width");
     82    assert_equals(r.height, 34, "y");
     83  }, `${ids[i]}.getBoundingClientRect(): `);
     84 }
     85 </script>
     86 </html>