third_party/WebKit/LayoutTests/compositing/iframes/ancestor-clipping-layer.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <style>
   5   .force-ancestor-clip {
   6     position: relative;
   7     padding-top: 1px;
   8     /* Needs to be above 50% for overlap to kick in. */
   9     padding-bottom: 55%;
  10     height: 0;
  11   }
  12   #wrapper {
  13     position:relative;
  14     width: 400px;
  15     margin:0 auto;
  16   }
  17   #main {
  18     width:875px;
  19     overflow:hidden;
  20     position:relative;
  21   }
  22   #content {
  23     width:400px;
  24   }
  25   .overflow-hidden {
  26     width:100%;
  27     overflow:hidden;
  28   }
  29   .float-right {
  30     float:right;
  31     width:425px;
  32   }
  33 </style>
  34 </head>
  35 <body>
  36   <div id="wrapper">
  37     <div id="main">
  38       <div id="content">
  39         <div class="overflow-hidden">
  40           <div class="float-right">
  41             <div id="force-clip" class="force-ancestor-clip"></div>
  42             <iframe src="resources/ancestor-clipping-layer-subframe.html" width="300" height="150"></iframe>
  43           </div>
  44         </div>
  45       </div>
  46     </div>
  47   </div>
  48 </body>
  49 </html>