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

Unified Diff: LayoutTests/animations/keyframe-timing-functions-multiple-animations.html

Issue 24085002: Correctly apply per-keyframe timing functions (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 7 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: LayoutTests/animations/keyframe-timing-functions-multiple-animations.html
diff --git a/LayoutTests/animations/keyframe-timing-functions-multiple-animations.html b/LayoutTests/animations/keyframe-timing-functions-multiple-animations.html
new file mode 100644
index 0000000000000000000000000000000000000000..a2d368e1ed2a031bf83cb92f7e9b370d8e636711
--- /dev/null
+++ b/LayoutTests/animations/keyframe-timing-functions-multiple-animations.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style type="text/css" media="screen">
+ div#target {
+ -webkit-animation-name: animation1, animation2;
+ -webkit-animation-duration: 2s;
+ -webkit-animation-timing-function: steps(2);
+ background-color: red;
+ position: relative;
+ width: 100px;
+ height: 100px;
+ }
+ @-webkit-keyframes animation1 {
+ from {
+ left: 0px;
+ -webkit-animation-timing-function: linear;
+ }
+ to {
+ left: 200px;
+ }
+ }
+ @-webkit-keyframes animation2 {
+ from {
+ top: 0px;
+ -webkit-animation-timing-function: linear;
+ }
+ to {
+ top: 200px;
+ }
+ }
+ </style>
+ <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
+ <script type="text/javascript" charset="utf-8">
+
+ const expectedValues = [
+ // [time, element-id, property, expected-value, tolerance]
+ [0.5, "target", "left", 50, 5],
+ [0.5, "target", "top", 50, 5],
+ [1.5, "target", "left", 150, 5],
+ [1.5, "target", "top", 150, 5],
+ ];
+
+ runAnimationTest(expectedValues);
+ </script>
+</head>
+<body>
+<p>Tests that per-keyframe timing functions are applied correctly when an element is targeted by multiple animations. The red block should move smoothly from top-left to bottom-right. See <a href="http://crbug.com/288540">crbug.com/288540</a>.</p>
+<div id="target"></div>
+<div id="result"></div>
+</body>
+</html>

Powered by Google App Engine
This is Rietveld 408576698