LayoutTests/transitions/opacity-transition-zindex.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7   <title>Opacity Transitions and Stacking Context</title>
   8   <style type="text/css" media="screen">
   9     .container {
  10       position: relative;
  11       height: 300px;
  12       width: 300px;
  13       margin: 10px;
  14       background-color: green;
  15       -webkit-transition-property: opacity;
  16       -webkit-transition-timing-function: linear;
  17       -webkit-transition-duration: 5s;
  18     }
  19
  20     #first {
  21       opacity: 0.5;
  22     }
  23
  24     .box {
  25       position: absolute;
  26       left: 10px;
  27       top: 10px;
  28       height: 200px;
  29       width: 200px;
  30       background-color: blue;
  31     }
  32
  33     .indicator {
  34       position: absolute;
  35       top: 150px;
  36       left: 150px;
  37       height: 100px;
  38       width: 100px;
  39       background-color: orange;
  40       z-index: -1;
  41     }
  42   </style>
  43   <script type="text/javascript" charset="utf-8">
  44     if (window.layoutTestController)
  45       layoutTestController.waitUntilDone();
  46
  47     function runTest()
  48     {
  49       var container = document.getElementById('first');
  50       container.style.opacity = 1;
  51
  52       // dump the tree in the middle of the transition
  53       if (window.layoutTestController) {
  54         if (layoutTestController.pauseTransitionAtTimeOnElementWithId)
  55           window.setTimeout(function() { layoutTestController.pauseTransitionAtTimeOnElementWithId("opacity", 2.5, "first"); layoutTestController.notifyDone(); }, 0);
  56         else
  57           window.setTimeout(function() { layoutTestController.notifyDone(); }, 2500);
  58       }
  59     }
  60
  61     window.addEventListener('load', runTest, false);
  62   </script>
  63 </head>
  64 <body>
  65
  66   <div class="container" id="first">
  67     <div class="box"></div>
  68     <div class="indicator"></div>
  69   </div>
  70
  71 </body>
  72 </html>