third_party/WebKit/LayoutTests/compositing/overflow/nested-render-surfaces.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5     body {
   6         height: 2000px;
   7     }
   8
   9     .container {
  10         height: 200px;
  11         width: 300px;
  12         border: 4px solid black;
  13         overflow-y: scroll;
  14         resize: both;
  15     }
  16
  17     .contents {
  18         height: 1000px;
  19     }
  20
  21     .box {
  22         position: relative;
  23         z-index: 1;
  24         height: 100px;
  25         width: 100px;
  26         margin: 10px;
  27         background-color: blue;
  28     }
  29
  30     .surface {
  31         opacity: 0.5;
  32     }
  33
  34     #fixed {
  35         position: fixed;
  36         z-index: 0;
  37         background-color: green;
  38         left: 50px;
  39         top: 200px;
  40         height: 200px;
  41         width: 200px;
  42     }
  43 </style>
  44 </head>
  45 <!--
  46   This test ensures that render surfaces grow to accomodate clip children.
  47   If this test is working, you should see that the green box is square.
  48 -->
  49 <body>
  50     <div class="surface">
  51         <div class="box"></div>
  52         <div class="container">
  53             <div>
  54                 <div class="box"></div>
  55                 <div class="container">
  56                     <div id="fixed"></div>
  57                     <div class="box"></div>
  58                     <div class="box"></div>
  59                     <div class="box"></div>
  60                     <div class="box"></div>
  61                     <div class="box"></div>
  62                 </div>
  63             </div>
  64         </div>
  65     </div>
  66 </body>
  67 </html>