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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/animations/interpolation/offset-rotation-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/interpolation/offset-distance-interpolation.html ('k') | third_party/WebKit/LayoutTests/animations/responsive/offset-rotation-responsive.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-rotation: 30deg; 5 offset-rotation: 30deg;
6 } 6 }
7 .target { 7 .target {
8 width: 80px; 8 width: 80px;
9 height: 80px; 9 height: 80px;
10 display: inline-block; 10 display: inline-block;
11 background-color: black; 11 background-color: black;
12 margin-right: 5px; 12 margin-right: 5px;
13 motion-rotation: 10deg; 13 offset-rotation: 10deg;
14 } 14 }
15 .expected { 15 .expected {
16 background-color: green; 16 background-color: green;
17 margin-right: 15px; 17 margin-right: 15px;
18 } 18 }
19 </style> 19 </style>
20 <body> 20 <body>
21 <script src="resources/interpolation-test.js"></script> 21 <script src="resources/interpolation-test.js"></script>
22 <script> 22 <script>
23 assertInterpolation({ 23 assertInterpolation({
24 property: 'motion-rotation', 24 property: 'offset-rotation',
25 from: neutralKeyframe, 25 from: neutralKeyframe,
26 to: '20deg', 26 to: '20deg',
27 }, [ 27 }, [
28 {at: -0.3, is: '7deg'}, 28 {at: -0.3, is: '7deg'},
29 {at: 0, is: '10deg'}, 29 {at: 0, is: '10deg'},
30 {at: 0.3, is: '13deg'}, 30 {at: 0.3, is: '13deg'},
31 {at: 0.6, is: '16deg'}, 31 {at: 0.6, is: '16deg'},
32 {at: 1, is: '20deg'}, 32 {at: 1, is: '20deg'},
33 {at: 1.5, is: '25deg'}, 33 {at: 1.5, is: '25deg'},
34 ]); 34 ]);
35 35
36 assertNoInterpolation({ 36 assertNoInterpolation({
37 property: 'motion-rotation', 37 property: 'offset-rotation',
38 from: 'initial', 38 from: 'initial',
39 to: '20deg', 39 to: '20deg',
40 }); 40 });
41 41
42 assertInterpolation({ 42 assertInterpolation({
43 property: 'motion-rotation', 43 property: 'offset-rotation',
44 from: 'inherit', 44 from: 'inherit',
45 to: '20deg', 45 to: '20deg',
46 }, [ 46 }, [
47 {at: -0.3, is: '33deg'}, 47 {at: -0.3, is: '33deg'},
48 {at: 0, is: '30deg'}, 48 {at: 0, is: '30deg'},
49 {at: 0.3, is: '27deg'}, 49 {at: 0.3, is: '27deg'},
50 {at: 0.6, is: '24deg'}, 50 {at: 0.6, is: '24deg'},
51 {at: 1, is: '20deg'}, 51 {at: 1, is: '20deg'},
52 {at: 1.5, is: '15deg'}, 52 {at: 1.5, is: '15deg'},
53 ]); 53 ]);
54 54
55 assertNoInterpolation({ 55 assertNoInterpolation({
56 property: 'motion-rotation', 56 property: 'offset-rotation',
57 from: 'unset', 57 from: 'unset',
58 to: '20deg', 58 to: '20deg',
59 }); 59 });
60 60
61 assertInterpolation({ 61 assertInterpolation({
62 property: 'motion-rotation', 62 property: 'offset-rotation',
63 from: '10deg', 63 from: '10deg',
64 to: '50deg' 64 to: '50deg'
65 }, [ 65 }, [
66 {at: -0.3, is: '-2deg'}, 66 {at: -0.3, is: '-2deg'},
67 {at: 0, is: '10deg'}, 67 {at: 0, is: '10deg'},
68 {at: 0.3, is: '22deg'}, 68 {at: 0.3, is: '22deg'},
69 {at: 0.6, is: '34deg'}, 69 {at: 0.6, is: '34deg'},
70 {at: 1, is: '50deg'}, 70 {at: 1, is: '50deg'},
71 {at: 1.5, is: '70deg'}, 71 {at: 1.5, is: '70deg'},
72 ]); 72 ]);
73 assertInterpolation({ 73 assertInterpolation({
74 property: 'motion-rotation', 74 property: 'offset-rotation',
75 from: 'auto 10deg', 75 from: 'auto 10deg',
76 to: 'auto 50deg' 76 to: 'auto 50deg'
77 }, [ 77 }, [
78 {at: -0.3, is: 'auto -2deg'}, 78 {at: -0.3, is: 'auto -2deg'},
79 {at: 0, is: 'auto 10deg'}, 79 {at: 0, is: 'auto 10deg'},
80 {at: 0.3, is: 'auto 22deg'}, 80 {at: 0.3, is: 'auto 22deg'},
81 {at: 0.6, is: 'auto 34deg'}, 81 {at: 0.6, is: 'auto 34deg'},
82 {at: 1, is: 'auto 50deg'}, 82 {at: 1, is: 'auto 50deg'},
83 {at: 1.5, is: 'auto 70deg'}, 83 {at: 1.5, is: 'auto 70deg'},
84 ]); 84 ]);
85 assertInterpolation({ 85 assertInterpolation({
86 property: 'motion-rotation', 86 property: 'offset-rotation',
87 from: 'reverse -170deg', 87 from: 'reverse -170deg',
88 to: 'reverse -130deg' 88 to: 'reverse -130deg'
89 }, [ 89 }, [
90 {at: -0.3, is: 'auto -2deg'}, 90 {at: -0.3, is: 'auto -2deg'},
91 {at: 0, is: 'auto 10deg'}, 91 {at: 0, is: 'auto 10deg'},
92 {at: 0.3, is: 'auto 22deg'}, 92 {at: 0.3, is: 'auto 22deg'},
93 {at: 0.6, is: 'auto 34deg'}, 93 {at: 0.6, is: 'auto 34deg'},
94 {at: 1, is: 'auto 50deg'}, 94 {at: 1, is: 'auto 50deg'},
95 {at: 1.5, is: 'auto 70deg'}, 95 {at: 1.5, is: 'auto 70deg'},
96 ]); 96 ]);
97 assertInterpolation({ 97 assertInterpolation({
98 property: 'motion-rotation', 98 property: 'offset-rotation',
99 from: 'auto 10deg', 99 from: 'auto 10deg',
100 to: 'reverse -130deg' 100 to: 'reverse -130deg'
101 }, [ 101 }, [
102 {at: -0.3, is: 'auto -2deg'}, 102 {at: -0.3, is: 'auto -2deg'},
103 {at: 0, is: 'auto 10deg'}, 103 {at: 0, is: 'auto 10deg'},
104 {at: 0.3, is: 'auto 22deg'}, 104 {at: 0.3, is: 'auto 22deg'},
105 {at: 0.6, is: 'auto 34deg'}, 105 {at: 0.6, is: 'auto 34deg'},
106 {at: 1, is: 'auto 50deg'}, 106 {at: 1, is: 'auto 50deg'},
107 {at: 1.5, is: 'auto 70deg'}, 107 {at: 1.5, is: 'auto 70deg'},
108 ]); 108 ]);
109 assertInterpolation({ 109 assertInterpolation({
110 property: 'motion-rotation', 110 property: 'offset-rotation',
111 from: 'reverse -170deg', 111 from: 'reverse -170deg',
112 to: 'auto 50deg' 112 to: 'auto 50deg'
113 }, [ 113 }, [
114 {at: -0.3, is: 'auto -2deg'}, 114 {at: -0.3, is: 'auto -2deg'},
115 {at: 0, is: 'auto 10deg'}, 115 {at: 0, is: 'auto 10deg'},
116 {at: 0.3, is: 'auto 22deg'}, 116 {at: 0.3, is: 'auto 22deg'},
117 {at: 0.6, is: 'auto 34deg'}, 117 {at: 0.6, is: 'auto 34deg'},
118 {at: 1, is: 'auto 50deg'}, 118 {at: 1, is: 'auto 50deg'},
119 {at: 1.5, is: 'auto 70deg'}, 119 {at: 1.5, is: 'auto 70deg'},
120 ]); 120 ]);
121 assertNoInterpolation({ 121 assertNoInterpolation({
122 property: 'motion-rotation', 122 property: 'offset-rotation',
123 from: 'auto 200deg', 123 from: 'auto 200deg',
124 to: '300deg' 124 to: '300deg'
125 }); 125 });
126 assertNoInterpolation({ 126 assertNoInterpolation({
127 property: 'motion-rotation', 127 property: 'offset-rotation',
128 from: '300deg', 128 from: '300deg',
129 to: 'reverse 20deg' 129 to: 'reverse 20deg'
130 }); 130 });
131 </script> 131 </script>
132 </body> 132 </body>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/interpolation/offset-distance-interpolation.html ('k') | third_party/WebKit/LayoutTests/animations/responsive/offset-rotation-responsive.html » ('j') | third_party/WebKit/LayoutTests/css3/motion-path/offset.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698