src/third_party/WebKit/LayoutTests/compositing/overflow/overflow-scaled-descendant-overlapping.html

   1 <!DOCTYPE html>
   2 <html>
   3     <!-- This checks the overlap test between render layers inside clipped
   4     containers and other render layers when page scaling is used. See
   5     https://bugs.webkit.org/show_bug.cgi?id=76850 -->
   6     <script>
   7         window.onload = function() {
   8             if (window.testRunner)
   9                 testRunner.dumpAsTextWithPixelResults();
  10             if (window.eventSender)
  11                 window.eventSender.setPageScaleFactor(0.5, 0, 0);
  12         }
  13     </script>
  14
  15     <style type="text/css">
  16         ::-webkit-scrollbar {
  17             width: 0px;
  18             height: 0px;
  19         }
  20         body {
  21             width: 4000px;
  22             height: 4000px;
  23         }
  24         .box {
  25             width: 100px;
  26             height: 100px;
  27         }
  28
  29         .positioned {
  30             position: absolute;
  31             left: 400px;
  32         }
  33
  34         .transformed {
  35             transform: translateZ(0);
  36         }
  37
  38         .clip {
  39             overflow: hidden;
  40         }
  41
  42         .test {
  43             z-index: 1;
  44             background-color: green;
  45         }
  46
  47         .indicator {
  48             background-color: red;
  49         }
  50     </style>
  51
  52     <div class="positioned test box"></div>
  53
  54     <div class="positioned clip box">
  55         <div class="transformed indicator box"></div>
  56     </div>
  57 </html>