tor-browser

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

display-none-inline-img.html (1316B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Test: display: none then inline on img</title>
      4 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
      5 <link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-inline">
      6 <link rel="match" href="display-none-inline-img-ref.html">
      7 <html class="reftest-wait">
      8 <style>
      9 .carousel {
     10  position: relative;
     11  overflow: hidden;
     12  height: 300px;
     13 }
     14 
     15 .scroller {
     16  position: absolute;
     17  top: 0;
     18  left: 0;
     19  right: 0;
     20  bottom: 0;
     21  overflow: auto;
     22 }
     23 
     24 .slides {
     25  width: 200%;
     26  display: flex;
     27 }
     28 
     29 .slide {
     30  flex: 0 0 50%;
     31  contain:  paint;
     32 }
     33 
     34 img {
     35  width: 300px;
     36  height: 250px;
     37 }
     38 </style>
     39 
     40 <div class="carousel">
     41  <div class="scroller">
     42    <div class="slides">
     43      <div class="slide">
     44        <img id="image" src="/images/green-256x256.png">
     45      </div>
     46      <div class="slide">
     47        <img>
     48      </div>
     49    </div>
     50  </div>
     51 </div>
     52 
     53 <script>
     54 
     55 function toggleDisplay() {
     56  var img = document.getElementById("image");
     57  img.style.display = img.style.display == 'none' ? 'inline' : 'none';
     58 }
     59 
     60 window.onload = () => {
     61  requestAnimationFrame(() => {
     62    toggleDisplay();
     63    requestAnimationFrame(() => {
     64      toggleDisplay();
     65      document.documentElement.classList.remove("reftest-wait");
     66    });
     67  });
     68 };
     69 </script>
     70 </html>