third_party/WebKit/LayoutTests/transitions/opacity-transition-zindex.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     .container {
   7       position: relative;
   8       height: 300px;
   9       width: 300px;
  10       margin: 10px;
  11       background-color: green;
  12       -webkit-transition-property: opacity;
  13       -webkit-transition-timing-function: linear;
  14       -webkit-transition-duration: 5s;
  15     }
  16
  17     #first {
  18       opacity: 0.5;
  19     }
  20
  21     .box {
  22       position: absolute;
  23       left: 10px;
  24       top: 10px;
  25       height: 200px;
  26       width: 200px;
  27       background-color: blue;
  28     }
  29
  30     .indicator {
  31       position: absolute;
  32       top: 150px;
  33       left: 150px;
  34       height: 100px;
  35       width: 100px;
  36       background-color: orange;
  37       z-index: -1;
  38     }
  39   </style>
  40   <script>
  41     if (window.testRunner)
  42       testRunner.waitUntilDone();
  43
  44     function runTest()
  45     {
  46       var container = document.getElementById('first');
  47       container.style.opacity = 1;
  48
  49       // dump the tree in the middle of the transition
  50       if (window.internals) {
  51           window.internals.forceCompositingUpdate(document);
  52           window.internals.pauseAnimations(2.5);
  53       }
  54       if (window.testRunner) {
  55           testRunner.notifyDone();
  56       }
  57     }
  58     // FIXME: this should use runTransitionTest().
  59     window.addEventListener('load', runTest, false);
  60   </script>
  61 </head>
  62 <body>
  63
  64   <div class="container" id="first">
  65     <div class="box"></div>
  66     <div class="indicator"></div>
  67   </div>
  68
  69 </body>
  70 </html>