third_party/WebKit/LayoutTests/compositing/overflow/ancestor-overflow.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>Overflow Test</title>
   8   <style type="text/css" media="screen">
   9     .container {
  10       display: inline-block;
  11       margin: 20px;
  12       width: 120px;
  13       height: 120px;
  14       padding: 10px;
  15       border: 1px solid black;
  16       overflow: hidden;
  17     }
  18
  19     .intermediate {
  20       width: 100px;
  21       height: 100px;
  22       padding: 10px;
  23       border: 1px solid blue;
  24     }
  25
  26     .box {
  27       width: 100px;
  28       height: 150px;
  29       background-color: gray;
  30       transform: translateZ(0);
  31     }
  32   </style>
  33 </head>
  34 <body>
  35
  36 <p>Test overflow clipping of composited elements in various configurations.</p>
  37 <div class="container">
  38   <div class="intermediate">
  39     <div class="box">
  40     </div>
  41   </div>
  42 </div>
  43
  44 <div class="container">
  45   <div class="intermediate" style="position: absolute">
  46     <div class="box">
  47     </div>
  48   </div>
  49 </div>
  50
  51 <div class="container" style="position: relative">
  52   <div class="intermediate" style="position: absolute">
  53     <div class="box">
  54     </div>
  55   </div>
  56 </div>
  57
  58 <br>
  59
  60 <div class="container" style="z-index: 0">
  61   <div class="intermediate">
  62     <div class="box">
  63     </div>
  64   </div>
  65 </div>
  66
  67 <div class="container" style="z-index: 0">
  68   <div class="intermediate" style="position: absolute; z-index: 0;">
  69     <div class="box">
  70     </div>
  71   </div>
  72 </div>
  73
  74 <div class="container" style="position: relative; z-index: 0">
  75   <div class="intermediate" style="position: absolute;">
  76     <div class="box">
  77     </div>
  78   </div>
  79 </div>
  80
  81 </body>
  82 </html>