third_party/WebKit/LayoutTests/compositing/overflow/nested-render-surfaces-with-rotation.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: 100px;
  40         height: 200px;
  41         width: 200px;
  42     }
  43
  44     .rotated {
  45       transform: translateZ(0) rotate(5deg);
  46     }
  47
  48     .counter-rotated {
  49       transform: translateZ(0) rotate(-9deg);
  50     }
  51 </style>
  52 </head>
  53 <!--
  54 This test ensures that clipping works correctly with clip children, even if
  55 there are rotations involved.  if this test is working correctly, all rects
  56 should be clipped by their containing overflow scrolling divs (the fixed
  57 position element will have the outer 'counter rotate' div as its containing
  58 block due to the rotation, not the viewport, and will therefore get clipped by
  59 the outer overflow scrolling div, but not the inner.
  60 -->
  61 <body>
  62     <div class="rotated">
  63         <div class="surface">
  64             <div class="box"></div>
  65             <div class="container">
  66                 <div class="surface counter-rotated">
  67                     <div class="box"></div>
  68                     <div class="container">
  69                         <div id="fixed"></div>
  70                         <div class="box"></div>
  71                         <div class="box"></div>
  72                         <div class="box"></div>
  73                         <div class="box"></div>
  74                         <div class="box"></div>
  75                     </div>
  76                 </div>
  77             </div>
  78         </div>
  79     </div>
  80 </body>
  81 </html>