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             -webkit-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="../../fast/repaint/resources/repaint.js"></script>
  77     <script>
  78         if (window.testRunner)
  79             testRunner.dumpAsTextWithPixelResults();
  80
  81         function repaintTest()
  82         {
  83             var items = document.getElementsByClassName('before');
  84             while (items.length)
  85                 items[0].classList.remove("before");
  86         }
  87     </script>
  88 </head>
  89
  90 <body onload="runRepaintTest()">
  91     <div class="box composited_from_none before"></div>
  92     <div class="box composited_from_composited before"></div>
  93     <div class="box composited_from_composited_zero_radius before"></div>
  94     <div class="box composited_from_composited_offset before"></div>
  95     <div class="box composited_from_software before"></div>
  96     <div class="box software_from_composited before"></div>
  97     <div class="box none_from_composited before"></div>
  98 </body>
  99 </html>