third_party/WebKit/LayoutTests/compositing/visibility/visibility-image-layers-dynamic.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     .set {
   7       position: absolute;
   8       top: 8px;
   9     }
  10     .box {
  11       height: 100px;
  12       width: 100px;
  13     }
  14
  15     .hidden {
  16       visibility: hidden;
  17     }
  18
  19     .container {
  20       margin: 10px;
  21       padding: 20px;
  22     }
  23     .container.hidden {
  24       outline: 4px solid red;
  25     }
  26
  27     .visible {
  28       visibility: visible;
  29     }
  30     .should-be-hidden {
  31       background-color: red !important;
  32     }
  33     .should-be-visible {
  34       background-color: green !important;
  35     }
  36     .composited {
  37       transform: translateZ(0);
  38     }
  39
  40     .visible-indicator {
  41       background-color: green;
  42     }
  43
  44     .hidden-indicator {
  45       background-color: red;
  46     }
  47   </style>
  48   <script>
  49     if (window.testRunner) {
  50       testRunner.dumpAsText();
  51       testRunner.waitUntilDone();
  52     }
  53
  54     function doTest()
  55     {
  56       if (window.testRunner)
  57         document.getElementById('layers1').innerText = window.internals.layerTreeAsText(document);
  58
  59       window.setTimeout(function() {
  60         var firstImage = document.querySelectorAll('img')[0];
  61         firstImage.style.visibility = 'visible';
  62
  63         if (window.testRunner)
  64           document.getElementById('layers2').innerText = window.internals.layerTreeAsText(document);
  65
  66           window.setTimeout(function() {
  67             var secondContainer = document.querySelectorAll('.container')[1];
  68             secondContainer.style.visibility = 'visible';
  69
  70             if (window.testRunner) {
  71               document.getElementById('layers3').innerText = window.internals.layerTreeAsText(document);
  72               testRunner.notifyDone();
  73             }
  74           }, 0);
  75       }, 0);
  76     }
  77     window.addEventListener('load', doTest, false);
  78   </script>
  79 </head>
  80 <body>
  81     <!-- Tests dynamic changes of visibility, using directly composited images. -->
  82     <div class="composited container"><img src="../resources/thiswayup.png" class="hidden composited box"></div>
  83     <div class="composited hidden container"><img src="../resources/thiswayup.png" class="composited box"></div>
  84     <div class="composited hidden container"><img src="../resources/thiswayup.png" class="visible composited box"></div>
  85
  86 <h2>Initial</h2>
  87 <pre id="layers1"></pre>
  88
  89 <h2>After step 1</h2>
  90 <pre id="layers2"></pre>
  91
  92 <h2>After step 2</h2>
  93 <pre id="layers3"></pre>
  94 </body>
  95 </html>