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