src/third_party/WebKit/LayoutTests/css3/filters/filter-animation-from-none-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         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
  56     @-webkit-keyframes grayscale-anim {
  57         from { }
  58         to   { -webkit-filter: grayscale(1); }
  59     }
  60
  61     @-webkit-keyframes sepia-anim {
  62         from { }
  63         to   { -webkit-filter: sepia(1); }
  64     }
  65
  66     @-webkit-keyframes saturate-anim {
  67         from { }
  68         to   { -webkit-filter: saturate(0); }
  69     }
  70
  71     @-webkit-keyframes huerotate-anim {
  72         from { }
  73         to   { -webkit-filter: hue-rotate(180deg); }
  74     }
  75
  76     @-webkit-keyframes invert-anim {
  77         from { }
  78         to   { -webkit-filter: invert(1); }
  79     }
  80
  81     @-webkit-keyframes opacity-anim {
  82         from { }
  83         to   { -webkit-filter: opacity(0); }
  84     }
  85
  86     @-webkit-keyframes brightness-anim {
  87         from { }
  88         to   { -webkit-filter: brightness(0); }
  89     }
  90
  91     @-webkit-keyframes contrast-anim {
  92         from { }
  93         to   { -webkit-filter: contrast(0); }
  94     }
  95
  96     @-webkit-keyframes blur-anim {
  97         from { }
  98         to   { -webkit-filter: blur(20px); }
  99     }
 100
 101     @-webkit-keyframes dropshadow-anim {
 102         from { }
 103         to   { -webkit-filter: drop-shadow(20px 32px 12px black)); }
 104     }
 105
 106   </style>
 107   <script src="../../animations/resources/animation-test-helpers.js"></script>
 108   <script type="text/javascript">
 109     const expectedValues = [
 110       // [time, element-id, property, expected-value, tolerance]
 111       [1, "grayscale-box", "webkitFilter", 'grayscale(0.5)', 0.05],
 112       [1, "sepia-box", "webkitFilter", 'sepia(0.5)', 0.05],
 113       [1, "saturate-box", "webkitFilter", 'saturate(0.5)', 0.05],
 114       [1, "huerotate-box", "webkitFilter", 'huerotate(90deg)', 5],
 115       [1, "invert-box", "webkitFilter", 'invert(0.5)', 0.05],
 116       [1, "opacity-box", "webkitFilter", 'opacity(0.5)', 0.05],
 117       [1, "brightness-box", "webkitFilter", 'brightness(0.5)', 0.05],
 118       [1, "contrast-box", "webkitFilter", 'contrast(0.5)', 0.05],
 119       [1, "blur-box", "webkitFilter", 'blur(10px)', 1],
 120       // FIXME when we implement computed filter style for drop-shadow.
 121       // ["dropshadow-anim",  1, "dropshadow-box", "webkitFilter", 'drop-shadow(rgba(0, 0, 0, 0.25) 5px 8px 3px )', 2],
 122     ];
 123
 124     runAnimationTest(expectedValues);
 125   </script>
 126 </head>
 127 <body>
 128
 129 <div class="box" id="grayscale-box"></div>
 130 <div class="box" id="sepia-box"></div>
 131 <div class="box" id="saturate-box"></div>
 132 <div class="box" id="huerotate-box"></div>
 133 <div class="box" id="invert-box"></div>
 134 <div class="box" id="opacity-box"></div>
 135 <div class="box" id="brightness-box"></div>
 136 <div class="box" id="contrast-box"></div>
 137 <div class="box" id="blur-box"></div>
 138 <!-- <div class="box" id="dropshadow-box"></div> -->
 139
 140 <div id="result">
 141 </div>
 142 </body>
 143 </html>