src/third_party/WebKit/LayoutTests/fast/repaint/filter-repaint-accelerated-child-with-filter-child.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">
  26     <div class="accelerated">
  27         <div class="drop-shadow" id="resize"></div>
  28     </div>
  29 </div>
  30
  31 <script src="resources/text-based-repaint.js"></script>
  32 <script src="../../resources/run-after-display.js"></script>
  33 <script>
  34
  35 function repaintTest() {
  36     var resizeElement = document.getElementById("resize");
  37     resizeElement.style.width = "100px";
  38 }
  39 window.onload = runRepaintTest;
  40 </script>