src/third_party/WebKit/LayoutTests/compositing/overflow/clip-descendents.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style type="text/css" media="screen">
   6     .container {
   7       position: absolute;
   8       margin: 20px;
   9       width: 120px;
  10       height: 120px;
  11       padding: 10px;
  12       border: 1px solid black;
  13       clip: rect(10px, 80px, 80px, 20px);
  14     }
  15
  16     .intermediate {
  17       width: 100px;
  18       height: 100px;
  19       padding: 10px;
  20       border: 1px solid blue;
  21     }
  22
  23     .box {
  24       width: 100px;
  25       height: 150px;
  26       background-color: gray;
  27       transform: translateZ(1px);
  28     }
  29
  30     pre {
  31       margin-top: 360px;
  32     }
  33   </style>
  34   <script type="text/javascript" charset="utf-8">
  35     if (window.testRunner) {
  36       testRunner.dumpAsText();
  37       testRunner.waitUntilDone();
  38     }
  39
  40     function doTest() {
  41       if (window.testRunner) {
  42         var layersElement = document.getElementById('layers');
  43         // Do not include any text in the layers output, otherwise we need expected results for each platform.
  44         layersElement.style.display = "none";
  45         layersElement.innerText = window.internals.layerTreeAsText(document);
  46         layersElement.style.display = "block";
  47         testRunner.notifyDone();
  48       }
  49     }
  50     window.addEventListener('load', doTest, false);
  51   </script>
  52 </head>
  53 <body>
  54
  55 <!-- Test overflow clipping of composited elements in various configurations. -->
  56 <div class="container">
  57   <div class="intermediate">
  58     <div class="box">
  59     </div>
  60   </div>
  61 </div>
  62
  63 <div class="container" style="left: 200px;">
  64   <div class="intermediate" style="position: absolute">
  65     <div class="box">
  66     </div>
  67   </div>
  68 </div>
  69
  70 <div class="container" style="z-index: 0; top: 200px;">
  71   <div class="intermediate">
  72     <div class="box">
  73     </div>
  74   </div>
  75 </div>
  76
  77 <div class="container" style="z-index: 0; top: 200px; left: 200px;">
  78   <div class="intermediate" style="position: absolute; z-index: 0;">
  79     <div class="box">
  80     </div>
  81   </div>
  82 </div>
  83
  84 <pre id="layers">
  85   In DRT, layer tree goes here.
  86 </pre>
  87
  88 </body>
  89 </html>