src/third_party/WebKit/LayoutTests/compositing/squashing/squash-partial-repaint-inside-squashed-layer.html

   1 <!DOCTYPE html>
   2 <head>
   3 <style>
   4 .composited {
   5 transform: translatez(0);
   6 }
   7
   8 .box {
   9   width: 100px;
  10   height: 100px;
  11 }
  12
  13 .behind {
  14   position: absolute;
  15   z-index: 1;
  16   top: 100px;
  17   left: 100px;
  18   background-color: blue;
  19 }
  20
  21 .middle {
  22   position: absolute;
  23   z-index: 1;
  24   top: 180px;
  25   left: 180px;
  26   background-color: lime;
  27 }
  28
  29 .repaintdiv {
  30   position: absolute;
  31   z-index: 1;
  32   top: 260px;
  33   left: 260px;
  34   width: 182px;
  35   height: 29px;
  36   background-color:red;
  37 }
  38
  39 .top {
  40   position: absolute;
  41   z-index: 1;
  42   top: 280px;
  43   left: 340px;
  44   background-color: cyan;
  45 }
  46
  47 div:hover {
  48   background-color: green;
  49   transform:translatez(0);
  50 }
  51
  52 </style>
  53 <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
  54 <script>
  55     if (window.internals)
  56         internals.settings.setLayerSquashingEnabled(true);
  57
  58     function repaintTest()
  59     {
  60         document.getElementById('repaintdiv').style.background = 'salmon';
  61     }
  62     runRepaintTest();
  63 </script>
  64 </head>
  65 <body>
  66     <div class="composited box behind"></div>
  67     <div class="box middle"></div>
  68     <img id="repaintdiv" class="repaintdiv"></img>
  69     <div class="box top"></div>
  70 </body>