third_party/WebKit/LayoutTests/compositing/layer-creation/overlap-transformed-and-clipped.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5     div {
   6         width: 100px;
   7         height: 100px;
   8     }
   9
  10     .composited {
  11         transform: translateZ(0px);
  12     }
  13
  14     .clips {
  15         overflow: hidden;
  16     }
  17
  18     .container {
  19         position: absolute;
  20         left: 0px;
  21         top: 0px;
  22         overflow: hidden;
  23         transform: translateX(110px);
  24     }
  25
  26     .under {
  27         background-color: red;
  28         position:absolute;
  29         left: 0px;
  30         top: 0px;
  31     }
  32
  33     .over {
  34         background-color: green;
  35         position: absolute;
  36         left: 0px;
  37         top: 0px;
  38     }
  39
  40     #layertree {
  41         position: absolute;
  42         left: 10000px;
  43         top: 0px;
  44     }
  45
  46     body {
  47         overflow: hidden;
  48     }
  49 </style>
  50
  51 <script>
  52     if (window.testRunner) {
  53         testRunner.dumpAsTextWithPixelResults();
  54         window.addEventListener('load', function() {
  55             document.getElementById("layertree").innerText = window.internals.layerTreeAsText(document);
  56         }, false);
  57     }
  58 </script>
  59 </head>
  60
  61 <body>
  62   <!-- Tests that CSS transforms and clipping work properly together. -->
  63   <!-- This reproduces an error reported in https://bugs.webkit.org/show_bug.cgi?id=76486
  64        where the clipRect was not accounting for transforms. As a result, in the overlapMap,
  65        the intersection of clipRect and layer bounds becomes empty, and layers on top do not
  66        get properly composited. If this happens, the red "under composited" layer will be
  67        exposed, because the "over" div does not become a composited layer. -->
  68   <div class="container clips">
  69     <div class="under composited"></div>
  70     <div class="over"></div>
  71   </div>
  72
  73   <pre id="layertree"></pre>
  74
  75 </body>
  76
  77 </html>