Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(930)

Unified Diff: third_party/WebKit/LayoutTests/css3/filters/filter-animation-multi.html

Issue 2528263002: CSS Filters: Reduce usage of webkit prefix in animation layout tests (Closed)
Patch Set: Created 4 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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);

Powered by Google App Engine
This is Rietveld 408576698