src/third_party/WebKit/LayoutTests/fast/repaint/filter-invalidation-with-composited-container-change.html

   1 <!DOCTYPE html>
   2 <style>
   3 .green {
   4   background-color: green;
   5 }
   6 .box {
   7   width: 200px;
   8   height: 200px;
   9 }
  10 .drop-shadowed {
  11   -webkit-filter: drop-shadow(100px 100px 10px red);
  12 }
  13 .blurry {
  14   -webkit-filter: blur(10px);
  15   transform: translateZ(0);
  16 }
  17 </style>
  18 <!--
  19     This test checks that we correctly invalidate filters along with a paint invalidation container change.
  20     There should be no red below.
  21 -->
  22 <div class="green drop-shadowed box" id="box"></div>
  23 <script src="resources/text-based-repaint.js"></script>
  24 <script>
  25 window.testIsAsync = true;
  26
  27 function repaintTest() {
  28     var box = document.getElementById('box');
  29     box.classList.toggle('drop-shadowed');
  30     box.classList.toggle('blurry');
  31
  32     if (window.testRunner) {
  33         finishRepaintTest();
  34         testRunner.notifyDone();
  35     }
  36 }
  37 runRepaintTest();
  38 </script>