third_party/WebKit/LayoutTests/fast/layers/nested-layers-2.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../resources/run-after-layout-and-paint.js"></script>
   5 <script>
   6 function test()
   7 {
   8     if (window.testRunner) {
   9         testRunner.waitUntilDone();
  10         testRunner.dumpAsText();
  11     }
  12     runAfterLayoutAndPaint(finish);
  13 }
  14
  15 function finish()
  16 {
  17     var innerLayer = document.getElementById('innerLayer');
  18     innerLayer.style.left = '19px';
  19     innerLayer.style.top = '23px';
  20     if (window.testRunner)
  21         testRunner.notifyDone();
  22 }
  23 </script>
  24 <style>
  25 /* nodes that have layers and are containers for their children */
  26 .a { outline: solid blue 1px }
  27
  28 /* nodes that have layers but are not containers for their children */
  29 .b { outline: solid red 1px }
  30
  31 /* nodes that do not have layers */
  32 .c { outline: solid green 1px }
  33 </style>
  34 </head>
  35 <body onload="test()">
  36   Test where some nodes have layers (because of overflow or transparency) but are not the containing block for their children.
  37   The test passes if it completes without failing any assertions in Debug mode.
  38   <div>
  39     <div style="opacity: 0.8; height:40px" class="b">
  40       <div style="height:30px" class="c"></div>
  41       <div style="position:absolute; left:5px; top:5px; height:20px" class="c" id="innerLayer">
  42          <div style="overflow:hidden; height:13px" class="b"></div>
  43          <div style="height:6px" class="c"></div>
  44          <div style="position:relative; top:60px" class="a">
  45            <div style="height:30px" class="c"></div>
  46          </div>
  47          <div style="overflow:hidden; height:13px" class="b">
  48          </div>
  49       </div>
  50     </div>
  51   </div>
  52 </body>
  53 </html