third_party/WebKit/LayoutTests/compositing/geometry/repaint-foreground-layer.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css">
   5     .box {
   6       position: relative;
   7       display: inline-block;
   8       margin: 30px;
   9       width: 200px;
  10       height: 200px;
  11       transform: translateZ(0);
  12     }
  13
  14     .main {
  15       border: 40px solid gray;
  16       background-color: red;
  17       line-height: 0;
  18       outline: 20px solid transparent; /* Makes compositing layers larger */
  19     }
  20
  21     .child {
  22       position: absolute;
  23       width: 150px;
  24       height: 150px;
  25       padding: 20px;
  26       transform: translateZ(0);
  27     }
  28
  29     .negative {
  30       z-index: -1;
  31       top: 0;
  32       left: 0;
  33       height: 10px;
  34       width: 10px;
  35     }
  36
  37     img {
  38       display: inline-block;
  39       background-color: green;
  40       height: 100px;
  41       width: 100px;
  42     }
  43
  44     @-webkit-keyframes fade {
  45       from { background-color: green; }
  46       to   { background-color: orange; }
  47     }
  48
  49     .embiggener {
  50       position: absolute;
  51       height: 10px;
  52       width: 10px;
  53       top: -50px;
  54       left: -50px;
  55       background-color: blue;
  56     }
  57
  58     #layer-tree {
  59       opacity: 0; /* hide from pixel test */
  60     }
  61
  62   </style>
  63   <script type="text/javascript" charset="utf-8">
  64     if (window.testRunner) {
  65       testRunner.dumpAsTextWithPixelResults();
  66       testRunner.waitUntilDone();
  67     }
  68
  69     function repaint()
  70     {
  71       var imagesToRepaint = document.querySelectorAll('.repainted');
  72       for (var i = 0; i < imagesToRepaint.length; ++i) {
  73         var currImage = imagesToRepaint[i];
  74         currImage.style.backgroundColor = 'orange';
  75       }
  76
  77       if (window.testRunner)
  78         testRunner.notifyDone();
  79     }
  80
  81     window.addEventListener('load', function() {
  82       window.setTimeout(repaint, 0);
  83     }, false);
  84   </script>
  85 </head>
  86 <body>
  87
  88 <!-- Both boxes should look the same. You should see no red. -->
  89 <div class="main box">
  90   <img><img><img class="repainted"><img>
  91   <div class="negative child"></div>
  92 </div>
  93
  94 <div class="main box" style="overflow: hidden;">
  95   <img><img><img class="repainted"><img>
  96   <div class="negative child"></div>
  97 </div>
  98
  99 <pre id="layer-tree"></pre>
 100 </body>
 101 </html>