| Index: third_party/WebKit/LayoutTests/css3/filters/filter-animation-multi.html
|
| diff --git a/third_party/WebKit/LayoutTests/css3/filters/filter-animation-multi.html b/third_party/WebKit/LayoutTests/css3/filters/filter-animation-multi.html
|
| index ffdc84641c93cb78366b699bfb5f8c60713ff9dd..51ce8afedfc6b6d445f448e9c36856e191c221c1 100644
|
| --- a/third_party/WebKit/LayoutTests/css3/filters/filter-animation-multi.html
|
| +++ b/third_party/WebKit/LayoutTests/css3/filters/filter-animation-multi.html
|
| @@ -12,104 +12,104 @@
|
| }
|
|
|
| #grayscale-box {
|
| - -webkit-animation: grayscale-anim 2s linear
|
| + animation: grayscale-anim 2s linear
|
| }
|
|
|
| #sepia-box {
|
| - -webkit-animation: sepia-anim 2s linear
|
| + animation: sepia-anim 2s linear
|
| }
|
|
|
| #saturate-box {
|
| - -webkit-animation: saturate-anim 2s linear
|
| + animation: saturate-anim 2s linear
|
| }
|
|
|
| #hue-rotate-box {
|
| - -webkit-animation: hue-rotate-anim 2s linear
|
| + animation: hue-rotate-anim 2s linear
|
| }
|
|
|
| #invert-box {
|
| - -webkit-animation: invert-anim 2s linear
|
| + animation: invert-anim 2s linear
|
| }
|
|
|
| #opacity-box {
|
| - -webkit-animation: opacity-anim 2s linear
|
| + animation: opacity-anim 2s linear
|
| }
|
|
|
| #brightness-box {
|
| - -webkit-animation: brightness-anim 2s linear
|
| + animation: brightness-anim 2s linear
|
| }
|
|
|
| #contrast-box {
|
| - -webkit-animation: contrast-anim 2s linear
|
| + animation: contrast-anim 2s linear
|
| }
|
|
|
| #blur-box {
|
| - -webkit-animation: blur-anim 2s linear
|
| + animation: blur-anim 2s linear
|
| }
|
|
|
| #dropshadow-box {
|
| - -webkit-animation: dropshadow-anim 2s linear
|
| + animation: dropshadow-anim 2s linear
|
| }
|
|
|
|
|
| - @-webkit-keyframes grayscale-anim {
|
| - from { -webkit-filter: grayscale(0); }
|
| - 50% { -webkit-filter: grayscale(0.5); }
|
| - to { -webkit-filter: grayscale(1); }
|
| + @keyframes grayscale-anim {
|
| + from { filter: grayscale(0); }
|
| + 50% { filter: grayscale(0.5); }
|
| + to { filter: grayscale(1); }
|
| }
|
|
|
| - @-webkit-keyframes sepia-anim {
|
| - from { -webkit-filter: sepia(0); }
|
| - 50% { -webkit-filter: sepia(0.5); }
|
| - to { -webkit-filter: sepia(1); }
|
| + @keyframes sepia-anim {
|
| + from { filter: sepia(0); }
|
| + 50% { filter: sepia(0.5); }
|
| + to { filter: sepia(1); }
|
| }
|
|
|
| - @-webkit-keyframes saturate-anim {
|
| - from { -webkit-filter: saturate(0); }
|
| - 50% { -webkit-filter: saturate(0.5); }
|
| - to { -webkit-filter: saturate(1); }
|
| + @keyframes saturate-anim {
|
| + from { filter: saturate(0); }
|
| + 50% { filter: saturate(0.5); }
|
| + to { filter: saturate(1); }
|
| }
|
|
|
| - @-webkit-keyframes hue-rotate-anim {
|
| - from { -webkit-filter: hue-rotate(0); }
|
| - 50% { -webkit-filter: hue-rotate(90deg); }
|
| - to { -webkit-filter: hue-rotate(180deg); }
|
| + @keyframes hue-rotate-anim {
|
| + from { filter: hue-rotate(0); }
|
| + 50% { filter: hue-rotate(90deg); }
|
| + to { filter: hue-rotate(180deg); }
|
| }
|
|
|
| - @-webkit-keyframes invert-anim {
|
| - from { -webkit-filter: invert(0); }
|
| - 50% { -webkit-filter: invert(0.5); }
|
| - to { -webkit-filter: invert(1); }
|
| + @keyframes invert-anim {
|
| + from { filter: invert(0); }
|
| + 50% { filter: invert(0.5); }
|
| + to { filter: invert(1); }
|
| }
|
|
|
| - @-webkit-keyframes opacity-anim {
|
| - from { -webkit-filter: opacity(1); }
|
| - 50% { -webkit-filter: opacity(0.5); }
|
| - to { -webkit-filter: opacity(0); }
|
| + @keyframes opacity-anim {
|
| + from { filter: opacity(1); }
|
| + 50% { filter: opacity(0.5); }
|
| + to { filter: opacity(0); }
|
| }
|
|
|
| - @-webkit-keyframes brightness-anim {
|
| - from { -webkit-filter: brightness(1); }
|
| - 50% { -webkit-filter: brightness(0.5); }
|
| - to { -webkit-filter: brightness(0); }
|
| + @keyframes brightness-anim {
|
| + from { filter: brightness(1); }
|
| + 50% { filter: brightness(0.5); }
|
| + to { filter: brightness(0); }
|
| }
|
|
|
| - @-webkit-keyframes contrast-anim {
|
| - from { -webkit-filter: contrast(1); }
|
| - 50% { -webkit-filter: contrast(0.5); }
|
| - to { -webkit-filter: contrast(0); }
|
| + @keyframes contrast-anim {
|
| + from { filter: contrast(1); }
|
| + 50% { filter: contrast(0.5); }
|
| + to { filter: contrast(0); }
|
| }
|
|
|
| - @-webkit-keyframes blur-anim {
|
| - from { -webkit-filter: blur(0); }
|
| - 50% { -webkit-filter: blur(10px); }
|
| - to { -webkit-filter: blur(20px); }
|
| + @keyframes blur-anim {
|
| + from { filter: blur(0); }
|
| + 50% { filter: blur(10px); }
|
| + to { filter: blur(20px); }
|
| }
|
|
|
| - @-webkit-keyframes dropshadow-anim {
|
| - from { -webkit-filter: drop-shadow(0 0 0 transparent); }
|
| - 50% { -webkit-filter: grayscale(10px 15px 5px rgba(128, 128, 128, 0.5); }
|
| - to { -webkit-filter: drop-shadow(20px 30px 10px black)); }
|
| + @keyframes dropshadow-anim {
|
| + from { filter: drop-shadow(0 0 0 transparent); }
|
| + 50% { filter: grayscale(10px 15px 5px rgba(128, 128, 128, 0.5); }
|
| + to { filter: drop-shadow(20px 30px 10px black)); }
|
| }
|
|
|
| </style>
|
| @@ -117,17 +117,17 @@
|
| <script type="text/javascript">
|
| const expectedValues = [
|
| // [time, element-id, property, expected-value, tolerance]
|
| - [1, "grayscale-box", "webkitFilter", 'grayscale(0.5)', 0.05],
|
| - [1, "sepia-box", "webkitFilter", 'sepia(0.5)', 0.05],
|
| - [1, "saturate-box", "webkitFilter", 'saturate(0.5)', 0.05],
|
| - [1, "hue-rotate-box", "webkitFilter", 'hue-rotate(90deg)', 2],
|
| - [1, "invert-box", "webkitFilter", 'invert(0.5)', 0.05],
|
| - [1, "opacity-box", "webkitFilter", 'opacity(0.5)', 0.05],
|
| - [1, "brightness-box", "webkitFilter", 'brightness(0.5)', 0.05],
|
| - [1, "contrast-box", "webkitFilter", 'contrast(0.5)', 0.05],
|
| - [1, "blur-box", "webkitFilter", 'blur(10px)', 1],
|
| + [1, "grayscale-box", "filter", 'grayscale(0.5)', 0.05],
|
| + [1, "sepia-box", "filter", 'sepia(0.5)', 0.05],
|
| + [1, "saturate-box", "filter", 'saturate(0.5)', 0.05],
|
| + [1, "hue-rotate-box", "filter", 'hue-rotate(90deg)', 2],
|
| + [1, "invert-box", "filter", 'invert(0.5)', 0.05],
|
| + [1, "opacity-box", "filter", 'opacity(0.5)', 0.05],
|
| + [1, "brightness-box", "filter", 'brightness(0.5)', 0.05],
|
| + [1, "contrast-box", "filter", 'contrast(0.5)', 0.05],
|
| + [1, "blur-box", "filter", 'blur(10px)', 1],
|
| // FIXME when we implement computed filter style for drop-shadow.
|
| - // ["dropshadow-anim", 1, "dropshadow-box", "webkitFilter", 'drop-shadow(rgba(0, 0, 0, 0.5) 10px 15px 5px )', 2],
|
| + // ["dropshadow-anim", 1, "dropshadow-box", "filter", 'drop-shadow(rgba(0, 0, 0, 0.5) 10px 15px 5px )', 2],
|
| ];
|
|
|
| runAnimationTest(expectedValues);
|
|
|