10 background-color: blue;
11 display: inline-block;
12 -webkit-transform:translateZ(0);
16 -webkit-animation: grayscale-anim 2s linear
20 -webkit-animation: sepia-anim 2s linear
24 -webkit-animation: saturate-anim 2s linear
28 -webkit-animation: huerotate-anim 2s linear
32 -webkit-animation: invert-anim 2s linear
36 -webkit-animation: opacity-anim 2s linear
40 -webkit-animation: brightness-anim 2s linear
44 -webkit-animation: contrast-anim 2s linear
48 -webkit-animation: blur-anim 2s linear
52 -webkit-animation: dropshadow-anim 2s linear
56 @-webkit-keyframes grayscale-anim {
58 to { -webkit-filter: grayscale(1); }
61 @-webkit-keyframes sepia-anim {
63 to { -webkit-filter: sepia(1); }
66 @-webkit-keyframes saturate-anim {
68 to { -webkit-filter: saturate(0); }
71 @-webkit-keyframes huerotate-anim {
73 to { -webkit-filter: hue-rotate(180deg); }
76 @-webkit-keyframes invert-anim {
78 to { -webkit-filter: invert(1); }
81 @-webkit-keyframes opacity-anim {
83 to { -webkit-filter: opacity(0); }
86 @-webkit-keyframes brightness-anim {
88 to { -webkit-filter: brightness(0); }
91 @-webkit-keyframes contrast-anim {
93 to { -webkit-filter: contrast(0); }
96 @-webkit-keyframes blur-anim {
98 to { -webkit-filter: blur(20px); }
101 @-webkit-keyframes dropshadow-anim {
103 to { -webkit-filter: drop-shadow(20px 32px 12px black)); }
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],
124 runAnimationTest(expectedValues);
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> -->