src/third_party/WebKit/LayoutTests/css3/filters/filter-repaint-shadow-rotated.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 clipping or the transform rectangle of the box is not affecting the shadow.
   5     There should be two boxes on the screen: left one should be green and right one should be green, and both have the same size.
   6     No red should be visible.
   7 -->
   8 <html>
   9 <head>
  10     <style>
  11         .clipping_box {
  12             margin: 100px;
  13             width: 100px;
  14             height: 100px;
  15             overflow: hidden;
  16             background: red;
  17         }
  18
  19         .empty_box {
  20             height: 50px;
  21         }
  22
  23         .box {
  24             height: 100px;
  25             width: 100px;
  26             background-color: green;
  27         }
  28
  29         .before {
  30             background-color: transparent;
  31         }
  32
  33         .blur {
  34             -webkit-filter: drop-shadow(0px -100px 0px blue);
  35             -webkit-transform-origin: 50px 50px;
  36             transform: rotate(90deg);
  37         }
  38     </style>
  39
  40     <script src="../../resources/run-after-display.js"></script>
  41     <script>
  42         if (window.testRunner) {
  43             testRunner.dumpAsTextWithPixelResults();
  44             testRunner.waitUntilDone();
  45         }
  46         function repaintTest()
  47         {
  48             runAfterDisplay(function() {
  49                 document.querySelector(".before").classList.remove("before");
  50                 if (window.testRunner)
  51                     testRunner.notifyDone();
  52             });
  53         }
  54     </script>
  55 </head>
  56 <body onload="repaintTest()">
  57     <div class="clipping_box">
  58         <div class="blur">
  59             <div class="empty_box"></div>
  60             <div class="box before"></div>
  61         </div>
  62     </div>
  63 </body>
  64 </html>