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.internals) {
  11                 window.internals.setPageScaleFactorLimits(0.5, 0.5);
  12                 window.internals.setPageScaleFactor(0.5);
  13             }
  14         }
  15     </script>
  16
  17     <style type="text/css">
  18         ::-webkit-scrollbar {
  19             width: 0px;
  20             height: 0px;
  21         }
  22         body {
  23             width: 4000px;
  24             height: 4000px;
  25         }
  26         .box {
  27             width: 100px;
  28             height: 100px;
  29         }
  30
  31         .positioned {
  32             position: absolute;
  33             left: 400px;
  34         }
  35
  36         .transformed {
  37             transform: translateZ(0);
  38         }
  39
  40         .clip {
  41             overflow: hidden;
  42         }
  43
  44         .test {
  45             z-index: 1;
  46             background-color: green;
  47         }
  48
  49         .indicator {
  50             background-color: red;
  51         }
  52     </style>
  53
  54     <div class="positioned test box"></div>
  55
  56     <div class="positioned clip box">
  57         <div class="transformed indicator box"></div>
  58     </div>
  59 </html>