<!DOCTYPE html>

<html>
<head>
  <style>
    .set {
      position: absolute;
      top: 8px;
    }
    .box {
      height: 100px;
      width: 100px;
    }
    
    .hidden {
      visibility: hidden;
    }
    
    .container {
      margin: 10px;
      padding: 20px;
    }
    .container.hidden {
      outline: 4px solid red;
    }
    
    .visible {
      visibility: visible;
    }
    .should-be-hidden {
      background-color: red !important;
    }
    .should-be-visible {
      background-color: green !important;
    }
    .composited {
      -webkit-transform: translateZ(0);
    }
    
    .visible-indicator {
      background-color: green;
    }

    .hidden-indicator {
      background-color: red;
    }
  </style>
  <script>
    if (window.testRunner) {
      testRunner.dumpAsText();
      testRunner.waitUntilDone();
    }

    function doTest()
    {
      if (window.testRunner)
        document.getElementById('layers1').innerText = window.internals.layerTreeAsText(document);

      window.setTimeout(function() {
        var firstImage = document.querySelectorAll('img')[0];
        firstImage.style.visibility = 'visible';

        if (window.testRunner)
          document.getElementById('layers2').innerText = window.internals.layerTreeAsText(document);

          window.setTimeout(function() {
            var secondContainer = document.querySelectorAll('.container')[1];
            secondContainer.style.visibility = 'visible';

            if (window.testRunner) {
              document.getElementById('layers3').innerText = window.internals.layerTreeAsText(document);
              testRunner.notifyDone();
            }
          }, 0);
      }, 0);
    }
    window.addEventListener('load', doTest, false);
  </script>
</head>
<body>
    <!-- Tests dynamic changes of visibility, using directly composited images. -->
    <!-- FIXME: The size of the layer tree dumps effect the size of the layer bounds in this test. So if more
         or less information is added to or removed from the dump, the bounds will also change. -->
    <div class="composited container"><img src="../resources/thiswayup.png" class="hidden composited box"></div>
    <div class="composited hidden container"><img src="../resources/thiswayup.png" class="composited box"></div>
    <div class="composited hidden container"><img src="../resources/thiswayup.png" class="visible composited box"></div>
  
<h2>Initial</h2>
<pre id="layers1"></pre>

<h2>After step 1</h2>
<pre id="layers2"></pre>

<h2>After step 2</h2>
<pre id="layers3"></pre>
</body>
</html>