LayoutTests/compositing/clip-child-by-non-stacking-ancestor.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5     <style type="text/css" media="screen">
   6         .container {
   7             -webkit-transform: translateZ(0);
   8             background-color: silver;
   9             width: 100px;
  10             height: 100px;
  11         }
  12
  13         /* create a render layer with no stacking context */
  14         .clip {
  15             position: absolute;
  16             top: 0px;
  17             left: 0px;
  18             width: 100px;
  19             height: 100px;
  20             overflow: hidden;
  21         }
  22
  23         /* being clipped, this shouldn't affect container's composited bounds */
  24         .box {
  25             position: absolute;
  26             top: 100px;
  27             left: 100px;
  28             height: 100px;
  29             width: 100px;
  30             background-color: blue;
  31         }
  32     </style>
  33 </head>
  34 <script>
  35     if (window.testRunner) {
  36         testRunner.dumpAsText();
  37         testRunner.waitUntilDone();
  38     }
  39
  40     function doTest()
  41     {
  42         if (window.testRunner) {
  43             document.getElementById('layertree').innerText = testRunner.layerTreeAsText();
  44             testRunner.notifyDone();
  45         }
  46     }
  47
  48     window.addEventListener('load', doTest, false);
  49 </script>
  50 <body>
  51     <!-- the composited bounds of container should be 100px, not 200px -->
  52     <div class="container">
  53         <div class="clip">
  54             <div class="box"></div>
  55         </div>
  56     </div>
  57     <pre id="layertree"></pre>
  58 </body>
  59 </html>