src/third_party/WebKit/LayoutTests/compositing/repaint/opacity-between-absolute.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 between absolutes</title>
   8   <style type="text/css" media="screen">
   9     .container {
  10       position: relative;
  11       height: 200px;
  12       width: 200px;
  13       border: 1px solid black;
  14       transform: translateZ(0);
  15       -webkit-transform-style: preserve-3d;
  16     }
  17
  18     .fader {
  19       height: 50px;
  20       width: 50px;
  21       margin: 20px;
  22       border: 1px solid black;
  23       -webkit-transition: opacity 100s;
  24     }
  25
  26     .container:hover .fader {
  27       opacity: 0.5;
  28     }
  29
  30     .inner {
  31       position: absolute;
  32       left: 100px;
  33       top: 100px;
  34       height: 80px;
  35       width: 80px;
  36       background-color: gray;
  37     }
  38
  39     .inner:hover {
  40       background-color: orange;
  41     }
  42   </style>
  43   <script type="text/javascript" charset="utf-8">
  44     if (window.testRunner)
  45       testRunner.waitUntilDone();
  46
  47     function runTest()
  48     {
  49       // Kick off an opacity fade to make .fader into a compositing layer
  50       var container = document.querySelectorAll('.fader')[0];
  51       container.style.opacity = 0.99;
  52       window.setTimeout(function() {
  53         // Now test redraw on .inner
  54         var inner = document.querySelectorAll('.inner')[0];
  55         inner.style.backgroundColor = 'green';
  56         if (window.testRunner)
  57           testRunner.notifyDone();
  58       }, 0);
  59     }
  60
  61     window.addEventListener('load', runTest, false)
  62   </script>
  63 </head>
  64 <body>
  65 <p>This test should not assert, and you should see a fully green square.</p>
  66 <div class="container">
  67   <div class="fader">
  68     <div class="inner">
  69     </div>
  70   </div>
  71 </div>
  72
  73 </body>
  74 </html>