third_party/WebKit/LayoutTests/compositing/squashing/transform-squashed-owner.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5     .set {
   6       position: absolute;
   7       top: 8px;
   8     }
   9     .box {
  10       height: 100px;
  11       width: 100px;
  12       background-color: lightblue;
  13     }
  14     .squashed {
  15       height: 40px;
  16       width: 40px;
  17       background-color: lightgreen;
  18       position: absolute;
  19       left: 16px;
  20     }
  21     .rotated {
  22       rotate(10deg);
  23     }
  24   </style>
  25 </head>
  26 <body>
  27     <!-- This test checks that transforming the owner of a squashed layer only transforms that layer, and not the squashed layers. -->
  28
  29     <!-- This div will be the "owner" of the squashing layer -->
  30     <div id="target" class="box"></div>
  31     <!-- These divs will be squashed into a layer containing them and the owner -->
  32     <div class="squashed" style="top: 4px"></div>
  33     <div class="squashed" style="top: 54px"></div>
  34 </body>
  35   <script>
  36       document.getElementById("target").classList.add("rotated");
  37
  38   </script>
  39 </html>