tor-browser

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

content-visibility-052.html (2007B)

      1 <!doctype HTML>
      2 <html class="reftest-wait">
      3 <meta charset="utf8">
      4 <title>CSS Content Visibility: hidden starts painting when removed</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 <link rel="match" href="container-with-pos-children-ref.html">
      8 <meta name="assert" content="content-visibility subtrees start painting when hidden is removed">
      9 
     10 <script src="/common/reftest-wait.js"></script>
     11 
     12 <style>
     13 .container {
     14  width: 150px;
     15  height: 150px;
     16  background: lightblue;
     17  contain: layout;
     18 }
     19 .hidden {
     20  content-visibility: hidden;
     21 }
     22 #child {
     23  width: 50px;
     24  height: 50px;
     25  background: lightgreen;
     26 }
     27 .abspos { position: absolute; }
     28 .relpos { position: relative; }
     29 .fixedpos { position: fixed; }
     30 .start { top: 0; left: 0; }
     31 .mid { top: 10px; left: 10px; }
     32 .end { bottom: 0; right: 0; }
     33 .zindex { z-index: 1; }
     34 .small { width: 10px; height: 10px; background: blue; }
     35 .medium { width: 20px; height: 20px; background: green; }
     36 .large { width: 30px; height: 30px; background: pink; }
     37 </style>
     38 
     39 <p>This test passes if the two light blue boxes below have the same content.
     40 <div id=container class="container hidden">
     41  Text.
     42  <div id=child></div>
     43  <span>inline child</span>
     44  <div class="abspos start small"></div>
     45  <div class="relpos mid medium"></div>
     46  <div class="fixedpos end large"></div>
     47  <div class=relpos>
     48    <div class="abspos mid small zindex"></div>
     49  </div>
     50 </div>
     51 <br>
     52 <div class="container">
     53  Text.
     54  <div id=child></div>
     55  <span>inline child</span>
     56  <div class="abspos start small"></div>
     57  <div class="relpos mid medium"></div>
     58  <div class="fixedpos end large"></div>
     59  <div class=relpos>
     60    <div class="abspos mid small zindex"></div>
     61  </div>
     62 </div>
     63 
     64 <script>
     65 function runTest() {
     66  const container = document.getElementById("container");
     67  container.classList.remove("hidden");
     68  requestAnimationFrame(takeScreenshot);
     69 }
     70 
     71 window.onload = runTest;
     72 </script>
     73 </html>