tor-browser

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

content-visibility-forced-layout-client-rects.html (2538B)

      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 .hidden {
     30  content-visibility: hidden;
     31 }
     32 
     33 .will-hide {
     34  contain: style;
     35  contain: size;
     36  contain: layout;
     37  contain: paint;
     38 }
     39 </style>
     40 
     41 <div class=spacer></div>
     42 
     43 <div class="will-hide">
     44    <div id=one>A line of a certain length...</div>
     45 </div>
     46 
     47 <div class="will-hide">
     48    <div class=target id=two></div>
     49 </div>
     50 
     51 <div class="will-hide">
     52    <div class=target id=three></div>
     53 </div>
     54 
     55 <div class="will-hide">
     56  <div class="will-hide">
     57    <div class=target id=four></div>
     58  </div>
     59 </div>
     60 
     61 <div class="will-hide">
     62  <div class="will-hide">
     63    <div class="will-hide">
     64      <div class="will-hide">
     65        <div class="will-hide">
     66          <div class=target id=five></div>
     67        </div>
     68      </div>
     69    </div>
     70  </div>
     71 </div>
     72 
     73 <script>
     74 function hideContent() {
     75  document
     76        .querySelectorAll('.will-hide')
     77        .forEach(content => content.classList.add("hidden"));
     78 }
     79 
     80 function showContent() {
     81  document
     82        .querySelectorAll('.will-hide')
     83        .forEach(content => content.classList.remove("hidden"));
     84 }
     85 
     86 const ids = ["one", "two", "three", "four", "five"];
     87 for (let i = 0; i < ids.length; ++i) {
     88  test(() => {
     89    const expectedRect = document.getElementById(ids[i]).getClientRects()[0];
     90    const expectedBoundingRect = document.getElementById(ids[i]).getBoundingClientRect();
     91    hideContent();
     92 
     93    const rect = document.getElementById(ids[i]).getClientRects()[0];
     94    assert_equals(rect.width, expectedRect.width, `width for "${ids[i]}"`);
     95    assert_equals(rect.height, expectedRect.height, `height for "${ids[i]}`);
     96 
     97    const boundingRect = document.getElementById(ids[i]).getClientRects()[0];
     98    assert_equals(boundingRect.width, expectedBoundingRect.width, `width for "${ids[i]}"`);
     99    assert_equals(boundingRect.height, expectedBoundingRect.height, `height for "${ids[i]}`);
    100 
    101    showContent();
    102  }, `${ids[i]}.getBoundingClientRect(): `);
    103 }
    104 </script>
    105 </html>