third_party/WebKit/LayoutTests/compositing/squashing/squash-onto-transform-backing.html

   1 <!DOCTYPE html>
   2 <head>
   3 <style>
   4
   5 .compositedAndRotated {
   6 transform: translatez(0) rotate(45deg);
   7 }
   8
   9 .box {
  10   width: 100px;
  11   height: 100px;
  12 }
  13
  14 .behind {
  15   position: absolute;
  16   z-index: 1;
  17   top: 100px;
  18   left: 100px;
  19   background-color: blue;
  20 }
  21
  22 .middle {
  23   position: absolute;
  24   z-index: 1;
  25   top: 20px;
  26   left: 20px;
  27   background-color: lime;
  28 }
  29
  30 .top {
  31   position: absolute;
  32   z-index: 1;
  33   top: 180px;
  34   left: 180px;
  35   background-color: cyan;
  36 }
  37
  38 div:hover {
  39   background-color: green;
  40 }
  41
  42 </style>
  43 <script>
  44     if (window.testRunner)
  45         testRunner.dumpAsText();
  46
  47     function runTest()
  48     {
  49         if (!window.internals) {
  50             alert('This test requires window.internals')
  51             return;
  52         }
  53
  54         document.body.textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  55         document.body.style.whiteSpace = 'pre';
  56     }
  57 </script>
  58 </head>
  59 <body onload="runTest()">
  60 <div class="compositedAndRotated box behind"></div>
  61 <div class="box middle"></div>
  62 <div class="box top"></div>
  63 </body>