src/third_party/WebKit/LayoutTests/css3/filters/filter-repaint-composited-fallback-crash.html

   1 <!DOCTYPE html>
   2 <!--
   3     This tests verifies that filters work even on composited layers that fallback to rendering in software.
   4     NOTE: It is using the fact that Safari can draw drop-shadows in GPU only if the filter is the last one in the filter chain.
   5     First we apply the shaders using a composited layer, but compute the filters in CPU. Then we switch to compute them in GPU.
   6     You should see three green rectangles slightly rotated and blurred. There should be no red and it should not crash.
   7 -->
   8 <html>
   9 <head>
  10     <style>
  11         .box {
  12             position: relative;
  13             margin: 10px;
  14             height: 50px;
  15             width: 50px;
  16             background-color: green;
  17             transform: translate(50px, 0px) rotate(20deg);
  18         }
  19
  20         .blur {
  21             /* force a composited layer */
  22             transform: translate3d(0, 0, 0);
  23             background: red;
  24             margin: 50px;
  25             -webkit-filter: drop-shadow(0px 0px 1px blue) blur(5px);
  26             width: 0px;
  27             height: 0px;
  28         }
  29
  30         .before {
  31             -webkit-filter: blur(5px) drop-shadow(0px 0px 1px blue);
  32         }
  33     </style>
  34
  35     <script src="../../resources/run-after-display.js"></script>
  36     <script>
  37         if (window.testRunner) {
  38             testRunner.dumpAsTextWithPixelResults();
  39             testRunner.waitUntilDone();
  40         }
  41
  42         function repaintTest()
  43         {
  44             runAfterDisplay(function() {
  45                 document.querySelector(".before").classList.remove("before");
  46                 testRunner.notifyDone();
  47             });
  48         }
  49     </script>
  50 </head>
  51
  52 <body onload="repaintTest()">
  53
  54     <div class="blur before">
  55         <div class="box"></div>
  56         <div class="box"></div>
  57         <div class="box"></div>
  58     </div>
  59
  60 </body>
  61 </html>