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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/animations/interpolation/offset-distance-interpolation.html

Issue 2241993002: CSS Motion Path: New names for properties (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rebase Created 4 years, 3 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 unified diff | Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/composition/offset-rotation-composition.html ('k') | third_party/WebKit/LayoutTests/animations/interpolation/offset-rotation-interpolation.html » ('j') | third_party/WebKit/LayoutTests/css3/motion-path/offset.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <meta charset="UTF-8"> 2 <meta charset="UTF-8">
3 <style> 3 <style>
4 .parent { 4 .parent {
5 motion-offset: 30px; 5 offset-distance: 30px;
6 } 6 }
7 .target { 7 .target {
8 width: 10px; 8 width: 10px;
9 height: 10px; 9 height: 10px;
10 background-color: black; 10 background-color: black;
11 motion-path: path("M0 0H 400"); 11 offset-path: path("M0 0H 400");
12 motion-offset: 10px; 12 offset-distance: 10px;
13 } 13 }
14 .expected { 14 .expected {
15 background-color: green; 15 background-color: green;
16 } 16 }
17 </style> 17 </style>
18 <body> 18 <body>
19 <script src="resources/interpolation-test.js"></script> 19 <script src="resources/interpolation-test.js"></script>
20 <script> 20 <script>
21 assertInterpolation({ 21 assertInterpolation({
22 property: 'motion-offset', 22 property: 'offset-distance',
23 from: neutralKeyframe, 23 from: neutralKeyframe,
24 to: '20px', 24 to: '20px',
25 }, [ 25 }, [
26 {at: -0.3, is: '7px'}, 26 {at: -0.3, is: '7px'},
27 {at: 0, is: '10px'}, 27 {at: 0, is: '10px'},
28 {at: 0.3, is: '13px'}, 28 {at: 0.3, is: '13px'},
29 {at: 0.6, is: '16px'}, 29 {at: 0.6, is: '16px'},
30 {at: 1, is: '20px'}, 30 {at: 1, is: '20px'},
31 {at: 1.5, is: '25px'}, 31 {at: 1.5, is: '25px'},
32 ]); 32 ]);
33 33
34 assertInterpolation({ 34 assertInterpolation({
35 property: 'motion-offset', 35 property: 'offset-distance',
36 from: 'initial', 36 from: 'initial',
37 to: '20px', 37 to: '20px',
38 }, [ 38 }, [
39 {at: -0.3, is: '-6px'}, 39 {at: -0.3, is: '-6px'},
40 {at: 0, is: '0px'}, 40 {at: 0, is: '0px'},
41 {at: 0.3, is: '6px'}, 41 {at: 0.3, is: '6px'},
42 {at: 0.6, is: '12px'}, 42 {at: 0.6, is: '12px'},
43 {at: 1, is: '20px'}, 43 {at: 1, is: '20px'},
44 {at: 1.5, is: '30px'}, 44 {at: 1.5, is: '30px'},
45 ]); 45 ]);
46 46
47 assertInterpolation({ 47 assertInterpolation({
48 property: 'motion-offset', 48 property: 'offset-distance',
49 from: 'inherit', 49 from: 'inherit',
50 to: '20px', 50 to: '20px',
51 }, [ 51 }, [
52 {at: -0.3, is: '33px'}, 52 {at: -0.3, is: '33px'},
53 {at: 0, is: '30px'}, 53 {at: 0, is: '30px'},
54 {at: 0.3, is: '27px'}, 54 {at: 0.3, is: '27px'},
55 {at: 0.6, is: '24px'}, 55 {at: 0.6, is: '24px'},
56 {at: 1, is: '20px'}, 56 {at: 1, is: '20px'},
57 {at: 1.5, is: '15px'}, 57 {at: 1.5, is: '15px'},
58 ]); 58 ]);
59 59
60 assertInterpolation({ 60 assertInterpolation({
61 property: 'motion-offset', 61 property: 'offset-distance',
62 from: 'unset', 62 from: 'unset',
63 to: '20px', 63 to: '20px',
64 }, [ 64 }, [
65 {at: -0.3, is: '-6px'}, 65 {at: -0.3, is: '-6px'},
66 {at: 0, is: '0px'}, 66 {at: 0, is: '0px'},
67 {at: 0.3, is: '6px'}, 67 {at: 0.3, is: '6px'},
68 {at: 0.6, is: '12px'}, 68 {at: 0.6, is: '12px'},
69 {at: 1, is: '20px'}, 69 {at: 1, is: '20px'},
70 {at: 1.5, is: '30px'}, 70 {at: 1.5, is: '30px'},
71 ]); 71 ]);
72 72
73 assertInterpolation({ 73 assertInterpolation({
74 property: 'motion-offset', 74 property: 'offset-distance',
75 from: '10px', 75 from: '10px',
76 to: '50px', 76 to: '50px',
77 }, [ 77 }, [
78 {at: -0.3, is: '-2px'}, 78 {at: -0.3, is: '-2px'},
79 {at: 0, is: '10px'}, 79 {at: 0, is: '10px'},
80 {at: 0.3, is: '22px'}, 80 {at: 0.3, is: '22px'},
81 {at: 0.6, is: '34px'}, 81 {at: 0.6, is: '34px'},
82 {at: 1, is: '50px'}, 82 {at: 1, is: '50px'},
83 {at: 1.5, is: '70px'}, 83 {at: 1.5, is: '70px'},
84 ]); 84 ]);
85 85
86 assertInterpolation({ 86 assertInterpolation({
87 property: 'motion-offset', 87 property: 'offset-distance',
88 from: '10px', 88 from: '10px',
89 to: '100%', 89 to: '100%',
90 }, [ 90 }, [
91 // These expectations are expected to fail on the current animation engine 91 // These expectations are expected to fail on the current animation engine
92 // with different (but equivalent) calc expressions. 92 // with different (but equivalent) calc expressions.
93 {at: -0.3, is: 'calc(13px + -30%)'}, 93 {at: -0.3, is: 'calc(13px + -30%)'},
94 {at: 0, is: '10px'}, 94 {at: 0, is: '10px'},
95 {at: 0.3, is: 'calc(7px + 30%)'}, 95 {at: 0.3, is: 'calc(7px + 30%)'},
96 {at: 0.6, is: 'calc(4px + 60%)'}, 96 {at: 0.6, is: 'calc(4px + 60%)'},
97 {at: 1, is: '100%'}, 97 {at: 1, is: '100%'},
98 {at: 1.5, is: 'calc(-5px + 150%)'}, 98 {at: 1.5, is: 'calc(-5px + 150%)'},
99 ]); 99 ]);
100 </script> 100 </script>
101 </body> 101 </body>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/composition/offset-rotation-composition.html ('k') | third_party/WebKit/LayoutTests/animations/interpolation/offset-rotation-interpolation.html » ('j') | third_party/WebKit/LayoutTests/css3/motion-path/offset.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698