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

   1 <!DOCTYPE html>
   2 <!--
   3     This tests verifies that filters repaint correctly in composited mode when the filter property is changed.
   4     You should see 7 green rectangles. First 6 of the rectangles have a blue shadow. There should be no red.
   5 -->
   6 <html>
   7 <head>
   8     <style>
   9         .box {
  10             /* force a composited layer */
  11             transform: translate3d(0, 0, 0);
  12             float: left;
  13             height: 50px;
  14             width: 50px;
  15             margin: 50px;
  16             background-color: green;
  17         }
  18
  19         .composited_from_none {
  20             -webkit-filter: drop-shadow(0px 0px 10px blue);
  21         }
  22
  23         .composited_from_none.before {
  24             -webkit-filter: none;
  25         }
  26
  27         .composited_from_composited {
  28             -webkit-filter: drop-shadow(0px 0px 10px blue);
  29         }
  30
  31         .composited_from_composited.before {
  32             -webkit-filter: drop-shadow(0px 0px 10px red);
  33         }
  34
  35         .composited_from_composited_zero_radius {
  36             -webkit-filter: drop-shadow(0px 0px 10px blue);
  37         }
  38
  39         .composited_from_composited_zero_radius.before {
  40             -webkit-filter: drop-shadow(0px 0px 0px red);
  41         }
  42
  43         .composited_from_composited_offset {
  44             -webkit-filter: drop-shadow(0px 0px 10px blue);
  45         }
  46
  47         .composited_from_composited_offset.before {
  48             -webkit-filter: drop-shadow(-100px -100px 10px red);
  49         }
  50
  51         .composited_from_software {
  52             -webkit-filter: drop-shadow(0px 0px 10px blue);
  53         }
  54
  55         .composited_from_software.before {
  56             -webkit-filter: drop-shadow(0px 0px 10px red) blur(1px);
  57         }
  58
  59         .software_from_composited {
  60             -webkit-filter: drop-shadow(0px 0px 10px blue) blur(2px);
  61         }
  62
  63         .software_from_composited.before {
  64             -webkit-filter: drop-shadow(0px 0px 10px red);
  65         }
  66
  67         .none_from_composited {
  68             -webkit-filter: none;
  69         }
  70
  71         .none_from_composited.before {
  72             -webkit-filter: drop-shadow(0px 0px 10px red);
  73         }
  74     </style>
  75
  76     <script src="../../resources/run-after-display.js"></script>
  77     <script>
  78         if (window.testRunner) {
  79             testRunner.dumpAsTextWithPixelResults();
  80             testRunner.waitUntilDone();
  81         }
  82
  83         function repaintTest()
  84         {
  85             runAfterDisplay(function() {
  86                 var items = document.getElementsByClassName('before');
  87                 while (items.length)
  88                     items[0].classList.remove("before");
  89                 if (window.testRunner)
  90                     testRunner.notifyDone();
  91             });
  92         }
  93     </script>
  94 </head>
  95
  96 <body onload="repaintTest()">
  97     <div class="box composited_from_none before"></div>
  98     <div class="box composited_from_composited before"></div>
  99     <div class="box composited_from_composited_zero_radius before"></div>
 100     <div class="box composited_from_composited_offset before"></div>
 101     <div class="box composited_from_software before"></div>
 102     <div class="box software_from_composited before"></div>
 103     <div class="box none_from_composited before"></div>
 104 </body>
 105 </html>