third_party/WebKit/LayoutTests/paint/invalidation/spv2/squash-partial-repaint-inside-squashed-layer.html

   1 <!-- Based on compositing/squashing/squash-partial-repaint-inside-squashed-layer.html -->
   2 <!DOCTYPE html>
   3 <head>
   4 <style>
   5 .composited {
   6 transform: translatez(0);
   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: 180px;
  26   left: 180px;
  27   background-color: lime;
  28 }
  29
  30 .repaintdiv {
  31   position: absolute;
  32   z-index: 1;
  33   top: 260px;
  34   left: 260px;
  35   width: 182px;
  36   height: 29px;
  37   background-color:red;
  38 }
  39
  40 .top {
  41   position: absolute;
  42   z-index: 1;
  43   top: 280px;
  44   left: 340px;
  45   background-color: cyan;
  46 }
  47
  48 div:hover {
  49   background-color: green;
  50   transform:translatez(0);
  51 }
  52
  53 </style>
  54 <script src="resources/paint-invalidation-test.js"></script>
  55 <script>
  56     window.expectedPaintInvalidationObjects = [
  57         "LayoutImage (positioned) IMG id='repaintdiv' class='repaintdiv'",
  58     ];
  59     function paintInvalidationTest()
  60     {
  61         document.getElementById('repaintdiv').style.background = 'salmon';
  62     }
  63     runPaintInvalidationTest();
  64 </script>
  65 </head>
  66 <body>
  67     <div class="composited box behind"></div>
  68     <div class="box middle"></div>
  69     <img id="repaintdiv" class="repaintdiv"></img>
  70     <div class="box top"></div>
  71 </body>