LayoutTests/css3/filters/filter-animation-from-none-multi-hw.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     .box {
   7         height: 100px;
   8         width: 100px;
   9         margin: 10px;
  10         background-color: blue;
  11         display: inline-block;
  12         -webkit-transform:translateZ(0);
  13     }
  14
  15     #grayscale-box {
  16       -webkit-animation: grayscale-anim 2s linear
  17     }
  18
  19     #sepia-box {
  20       -webkit-animation: sepia-anim 2s linear
  21     }
  22
  23     #saturate-box {
  24       -webkit-animation: saturate-anim 2s linear
  25     }
  26
  27     #huerotate-box {
  28       -webkit-animation: huerotate-anim 2s linear
  29     }
  30
  31     #invert-box {
  32       -webkit-animation: invert-anim 2s linear
  33     }
  34
  35     #opacity-box {
  36       -webkit-animation: opacity-anim 2s linear
  37     }
  38
  39     #brightness-box {
  40       -webkit-animation: brightness-anim 2s linear
  41     }
  42
  43     #contrast-box {
  44       -webkit-animation: contrast-anim 2s linear
  45     }
  46
  47     #blur-box {
  48       -webkit-animation: blur-anim 2s linear
  49     }
  50
  51     #dropshadow-box {
  52       -webkit-animation: dropshadow-anim 2s linear
  53     }
  54
  55     @-webkit-keyframes grayscale-anim {
  56         from { }
  57         50%  { -webkit-filter: grayscale(0.5); }
  58         to   { -webkit-filter: grayscale(1); }
  59     }
  60
  61     @-webkit-keyframes sepia-anim {
  62         from { }
  63         50%  { -webkit-filter: sepia(0.5); }
  64         to   { -webkit-filter: sepia(1); }
  65     }
  66
  67     @-webkit-keyframes saturate-anim {
  68         from { }
  69         50%  { -webkit-filter: saturate(0.5); }
  70         to   { -webkit-filter: saturate(1); }
  71     }
  72
  73     @-webkit-keyframes huerotate-anim {
  74         from { }
  75         50%  { -webkit-filter: hue-rotate(90deg); }
  76         to   { -webkit-filter: hue-rotate(180deg); }
  77     }
  78
  79     @-webkit-keyframes invert-anim {
  80         from { }
  81         50%  { -webkit-filter: invert(0.5); }
  82         to   { -webkit-filter: invert(1); }
  83     }
  84
  85     @-webkit-keyframes opacity-anim {
  86         from { }
  87         50%  { -webkit-filter: opacity(0.5); }
  88         to   { -webkit-filter: opacity(0); }
  89     }
  90
  91     @-webkit-keyframes brightness-anim {
  92         from { }
  93         50%  { -webkit-filter: brightness(0.5); }
  94         to   { -webkit-filter: brightness(0); }
  95     }
  96
  97     @-webkit-keyframes contrast-anim {
  98         from { }
  99         50%  { -webkit-filter: contrast(0.5); }
 100         to   { -webkit-filter: contrast(0); }
 101     }
 102
 103     @-webkit-keyframes blur-anim {
 104         from { }
 105         50%  { -webkit-filter: blur(10px); }
 106         to   { -webkit-filter: blur(20px); }
 107     }
 108
 109     @-webkit-keyframes dropshadow-anim {
 110         from { }
 111         50%  { -webkit-filter: grayscale(10px 15px 5px rgba(128, 128, 128, 0.5); }
 112         to   { -webkit-filter: drop-shadow(20px 30px 10px black)); }
 113     }
 114
 115   </style>
 116   <script src="../../animations/resources/animation-test-helpers.js"></script>
 117   <script type="text/javascript">
 118     const expectedValues = [
 119       // [animation-name, time, element-id, property, expected-value, tolerance]
 120       ["grayscale-anim",  0.5, "grayscale-box", "webkitFilter", 'grayscale(0.25)', 0.05],
 121       ["sepia-anim",  0.5, "sepia-box", "webkitFilter", 'sepia(0.25)', 0.05],
 122       ["saturate-anim",  0.5, "saturate-box", "webkitFilter", 'saturate(0.75)', 0.05],
 123       ["huerotate-anim",  0.5, "huerotate-box", "webkitFilter", 'huerotate(45deg)', 3],
 124       ["invert-anim",  0.5, "invert-box", "webkitFilter", 'invert(0.25)', 0.05],
 125       ["opacity-anim",  0.5, "opacity-box", "webkitFilter", 'opacity(0.75)', 0.05],
 126       ["brightness-anim",  0.5, "brightness-box", "webkitFilter", 'brightness(0.75)', 0.05],
 127       ["contrast-anim",  0.5, "contrast-box", "webkitFilter", 'contrast(0.75)', 0.05],
 128       ["blur-anim",  0.5, "blur-box", "webkitFilter", 'blur(5px)', 1],
 129       // FIXME when we implement computed filter style for drop-shadow.
 130       // ["dropshadow-anim",  1, "dropshadow-box", "webkitFilter", 'drop-shadow(rgba(0, 0, 0, 0.25) 5px 8px 3px )', 2],
 131     ];
 132
 133     runAnimationTest(expectedValues);
 134   </script>
 135 </head>
 136 <body>
 137
 138 <div class="box" id="grayscale-box"></div>
 139 <div class="box" id="sepia-box"></div>
 140 <div class="box" id="saturate-box"></div>
 141 <div class="box" id="huerotate-box"></div>
 142 <div class="box" id="invert-box"></div>
 143 <div class="box" id="opacity-box"></div>
 144 <div class="box" id="brightness-box"></div>
 145 <div class="box" id="contrast-box"></div>
 146 <div class="box" id="blur-box"></div>
 147 <!-- <div class="box" id="dropshadow-box"></div> -->
 148
 149 <div id="result">
 150 </div>
 151 </body>
 152 </html>