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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5     body {
   6         height: 2000px;
   7     }
   8
   9     .container {
  10         height: 300px;
  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
  44     .clipping-layer {
  45         overflow: hidden;
  46         width: 150px;
  47         height: 300px;
  48     }
  49 </style>
  50 </head>
  51 <!--
  52 This test ensures that clip children correctly ignore clips established by
  53 layers between the clip parent and itself. If the test is working correctly,
  54 the green box should be a square.
  55 -->
  56 <body>
  57     <div class="clipping-layer">
  58         <div class="surface">
  59             <div class="box"></div>
  60             <div class="container">
  61                 <div>
  62                     <div class="box"></div>
  63                     <div class="container">
  64                         <div id="fixed"></div>
  65                         <div class="box"></div>
  66                         <div class="box"></div>
  67                         <div class="box"></div>
  68                         <div class="box"></div>
  69                         <div class="box"></div>
  70                     </div>
  71                 </div>
  72             </div>
  73         </div>
  74     </div>
  75 </body>
  76 </html>