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

Unified Diff: third_party/WebKit/LayoutTests/animations/interpolation/offset-interpolation.html

Issue 2747523002: Web Animations: support cssOffset (Closed)
Patch Set: method Created 3 years, 9 months 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/animations/interpolation/offset-interpolation.html
diff --git a/third_party/WebKit/LayoutTests/animations/interpolation/offset-interpolation.html b/third_party/WebKit/LayoutTests/animations/interpolation/offset-interpolation.html
new file mode 100644
index 0000000000000000000000000000000000000000..7bdcdcfeb52982be8279f59cceba079946c1d070
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/animations/interpolation/offset-interpolation.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<style>
+.target {
+ width: 10px;
+ height: 10px;
+ background-color: black;
+}
+.expected {
+ background-color: green;
+}
+</style>
+<body>
+<script src="resources/interpolation-test.js"></script>
+<script>
+
+assertInterpolation({
+ property: 'offset',
+ from: 'path("M0 200H 700") 500px 800deg',
+ to: 'path("M0 300H 700 Z") 600px 900deg',
+ method: 'CSS Transitions',
+}, [
+ {at: -0.3, is: 'path("M0 300H 700 Z") 470px 770deg'},
+ {at: 0, is: 'path("M0 300H 700 Z") 500px 800deg'},
+ {at: 0.3, is: 'path("M0 300H 700 Z") 530px 830deg'},
+ {at: 0.6, is: 'path("M0 300H 700 Z") 560px 860deg'},
+ {at: 1, is: 'path("M0 300H 700 Z") 600px 900deg'},
+ {at: 1.5, is: 'path("M0 300H 700 Z") 650px 950deg'},
+]);
+
+assertInterpolation({
+ property: 'offset',
+ from: 'path("M0 0H 200") 500px auto',
+ to: 'path("M0 0H 300") 600px 0deg',
+ method: 'CSS Transitions',
+}, [
+ {at: -0.3, is: 'path("M0 0H 300") 470px 0deg'},
+ {at: 0, is: 'path("M0 0H 300") 500px 0deg'},
+ {at: 0.3, is: 'path("M0 0H 300") 530px 0deg'},
+ {at: 0.6, is: 'path("M0 0H 300") 560px 0deg'},
+ {at: 1, is: 'path("M0 0H 300") 600px 0deg'},
+ {at: 1.5, is: 'path("M0 0H 300") 650px 0deg'},
+]);
+
+assertInterpolation({
+ property: 'offset',
+ from: 'path("M0 200H 700") 500px 800deg',
+ to: 'path("M0 300H 700 Z") 600px 900deg',
+ method: 'CSS Animations',
+}, [
+ {at: -0.3, is: 'path("M0 200H 700") 470px 770deg'},
+ {at: 0, is: 'path("M0 200H 700") 500px 800deg'},
+ {at: 0.3, is: 'path("M0 200H 700") 530px 830deg'},
+ {at: 0.6, is: 'path("M0 300H 700 Z") 560px 860deg'},
+ {at: 1, is: 'path("M0 300H 700 Z") 600px 900deg'},
+ {at: 1.5, is: 'path("M0 300H 700 Z") 650px 950deg'},
+]);
+
+assertInterpolation({
+ property: 'offset',
+ from: 'path("M0 0H 200") 500px auto',
+ to: 'path("M0 0H 300") 600px 0deg',
+ method: 'CSS Animations',
+}, [
+ {at: -0.3, is: 'path("M0 0H 200") 470px auto'},
+ {at: 0, is: 'path("M0 0H 200") 500px auto'},
+ {at: 0.3, is: 'path("M0 0H 200") 530px auto'},
+ {at: 0.6, is: 'path("M0 0H 300") 560px 0deg'},
+ {at: 1, is: 'path("M0 0H 300") 600px 0deg'},
+ {at: 1.5, is: 'path("M0 0H 300") 650px 0deg'},
+]);
+
+assertInterpolation({
+ property: 'offset',
+ from: 'path("M0 200H 700") 500px 800deg',
+ to: 'path("M0 300H 700 Z") 600px 900deg',
+ method: 'Web Animations',
+}, [
+ {at: -0.3, is: 'path("M0 200H 700") 470px 770deg'},
+ {at: 0, is: 'path("M0 200H 700") 500px 800deg'},
+ {at: 0.3, is: 'path("M0 200H 700") 530px 830deg'},
+ {at: 0.6, is: 'path("M0 300H 700 Z") 560px 860deg'},
+ {at: 1, is: 'path("M0 300H 700 Z") 600px 900deg'},
+ {at: 1.5, is: 'path("M0 300H 700 Z") 650px 950deg'},
+]);
+
+assertInterpolation({
+ property: 'offset',
+ from: 'path("M0 0H 200") 500px auto',
+ to: 'path("M0 0H 300") 600px 0deg',
+ method: 'Web Animations',
+}, [
+ {at: -0.3, is: 'path("M0 0H 200") 470px auto'},
+ {at: 0, is: 'path("M0 0H 200") 500px auto'},
+ {at: 0.3, is: 'path("M0 0H 200") 530px auto'},
+ {at: 0.6, is: 'path("M0 0H 300") 560px 0deg'},
+ {at: 1, is: 'path("M0 0H 300") 600px 0deg'},
+ {at: 1.5, is: 'path("M0 0H 300") 650px 0deg'},
+]);
+
+</script>
+</body>

Powered by Google App Engine
This is Rietveld 408576698