src/third_party/WebKit/LayoutTests/fast/repaint/filter-repaint-accelerated-on-accelerated-filter.html

   1 <!DOCTYPE html>
   2 <style>
   3 div {
   4     width: 200px;
   5     height: 200px;
   6 }
   7
   8 .blur {
   9     -webkit-filter: blur(10px);
  10 }
  11
  12 .drop-shadow {
  13     -webkit-filter: drop-shadow(16px 16px 10px black);
  14 }
  15
  16 .accelerated {
  17     transform: translateZ(0);
  18 }
  19
  20 #resize {
  21     background-color: green;
  22 }
  23 </style>
  24
  25 <div class="blur accelerated">
  26     <div class="drop-shadow accelerated" id="resize"></div>
  27 </div>
  28
  29 <script src="resources/text-based-repaint.js"></script>
  30 <script src="../../resources/run-after-display.js"></script>
  31 <script>
  32 window.testIsAsync = true;
  33
  34 function repaintTest() {
  35     var resizeElement = document.getElementById("resize");
  36     resizeElement.style.width = "100px";
  37     finishRepaintTest();
  38 }
  39 window.onload = runRepaintTest;
  40 </script>