src/third_party/WebKit/LayoutTests/css3/filters/filter-repaint-child-layers.html

   1 <!DOCTYPE html>
   2 <!--
   3     This tests verifies that blur is repainted using the full source image of the element instead of just the dirty area.
   4     Also it tests that the filter area includes all the child RenderLayers and applies the children's transforms correctly.
   5     You should see three green rectangles slightly rotated and blured. There should be no red.
   6 -->
   7 <html>
   8 <head>
   9     <style>
  10         .box {
  11             position: relative;
  12             margin: 10px;
  13             height: 50px;
  14             width: 50px;
  15             background-color: green;
  16             z-index: 1;
  17             transform: translate(50px, 0px) rotate(20deg);
  18         }
  19
  20         .before {
  21             background-color: red;
  22         }
  23
  24         .blur {
  25             background: red;
  26             margin: 50px;
  27             -webkit-filter: blur(5px);
  28             z-index: 0;
  29             width: 0px;
  30             height: 0px;
  31         }
  32     </style>
  33
  34     <script src="../../resources/run-after-display.js"></script>
  35     <script>
  36         if (window.testRunner) {
  37             testRunner.dumpAsTextWithPixelResults();
  38             testRunner.waitUntilDone();
  39         }
  40
  41         function repaintTest()
  42         {
  43             runAfterDisplay(function() {
  44                 document.querySelector(".before").classList.remove("before");
  45                 if (window.testRunner)
  46                     testRunner.notifyDone();
  47             });
  48         }
  49     </script>
  50 </head>
  51
  52 <body onload="repaintTest()">
  53
  54     <div class="blur">
  55         <div class="box"></div>
  56         <div class="box before"></div>
  57         <div class="box"></div>
  58     </div>
  59
  60 </body>
  61 </html>