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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/animations/interpolation/box-shadow-interpolation.html

Issue 2844213002: Fix behaviour of shadow interpolation with mismatched list lengths (Closed)
Patch Set: Revert transition test to old behaviour Created 3 years, 7 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/text-shadow-composition.html ('k') | third_party/WebKit/LayoutTests/animations/interpolation/text-shadow-interpolation.html » ('j') | no next file with comments »
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 box-shadow: 30px 10px 30px 10px black; 5 box-shadow: 30px 10px 30px 10px black;
6 } 6 }
7 .target { 7 .target {
8 display: inline-block; 8 display: inline-block;
9 width: 60px; 9 width: 60px;
10 height: 60px; 10 height: 60px;
11 font-size: 3px; 11 font-size: 3px;
12 border: 2px solid; 12 border: 2px solid;
13 margin-right: 20px; 13 margin-right: 20px;
14 margin-bottom: 30px; 14 margin-bottom: 30px;
15 color: green; 15 color: green;
16 box-shadow: 10px 30px 10px 30px black; 16 box-shadow: 10px 30px 10px 30px black;
17 } 17 }
18 .expected { 18 .expected {
19 margin-right: 40px; 19 margin-right: 40px;
20 } 20 }
21 </style> 21 </style>
22 <body> 22 <body>
23 <script src="resources/interpolation-test.js"></script> 23 <script src="resources/interpolation-test.js"></script>
24 <script> 24 <script>
25 assertInterpolation({ 25 assertInterpolation({
26 property: 'box-shadow', 26 property: 'box-shadow',
27 from: neutralKeyframe, 27 from: neutralKeyframe,
28 to: '20px 20px 20px 20px black', 28 to: '20px 20px 20px 20px black',
29 }, [ 29 }, [
30 {at: -0.3, is: '7px 33px 7px 33px black'}, 30 {at: -0.3, is: 'rgb(0, 0, 0) 7px 33px 7px 33px'},
31 {at: 0, is: '10px 30px 10px 30px black'}, 31 {at: 0, is: 'rgb(0, 0, 0) 10px 30px 10px 30px'},
32 {at: 0.3, is: '13px 27px 13px 27px black'}, 32 {at: 0.3, is: 'rgb(0, 0, 0) 13px 27px 13px 27px'},
33 {at: 0.6, is: '16px 24px 16px 24px black'}, 33 {at: 0.6, is: 'rgb(0, 0, 0) 16px 24px 16px 24px'},
34 {at: 1, is: '20px 20px 20px 20px black'}, 34 {at: 1, is: 'rgb(0, 0, 0) 20px 20px 20px 20px'},
35 {at: 1.5, is: '25px 15px 25px 15px black'}, 35 {at: 1.5, is: 'rgb(0, 0, 0) 25px 15px 25px 15px'},
36 ]); 36 ]);
37 37
38 assertInterpolation({ 38 assertInterpolation({
39 property: 'box-shadow', 39 property: 'box-shadow',
40 from: 'initial', 40 from: 'initial',
41 to: '20px 20px 20px 20px black', 41 to: '20px 20px 20px 20px black',
42 }, [ 42 }, [
43 {at: -0.3, is: '-6px -6px 0px -6px transparent'}, 43 {at: -0.3, is: 'rgba(0, 0, 0, 0) -6px -6px 0px -6px'},
44 {at: 0, is: 'none'}, 44 {at: 0, is: 'none'},
45 {at: 0.3, is: '6px 6px 6px 6px rgba(0, 0, 0, 0.3)'}, 45 {at: 0.3, is: 'rgba(0, 0, 0, 0.3) 6px 6px 6px 6px'},
46 {at: 0.6, is: '12px 12px 12px 12px rgba(0, 0, 0, 0.6)'}, 46 {at: 0.6, is: 'rgba(0, 0, 0, 0.6) 12px 12px 12px 12px'},
47 {at: 1, is: '20px 20px 20px 20px black'}, 47 {at: 1, is: 'rgb(0, 0, 0) 20px 20px 20px 20px'},
48 {at: 1.5, is: '30px 30px 30px 30px black'}, 48 {at: 1.5, is: 'rgb(0, 0, 0) 30px 30px 30px 30px'},
49 ]); 49 ]);
50 50
51 assertInterpolation({ 51 assertInterpolation({
52 property: 'box-shadow', 52 property: 'box-shadow',
53 from: 'inherit', 53 from: 'inherit',
54 to: '20px 20px 20px 20px black', 54 to: '20px 20px 20px 20px black',
55 }, [ 55 }, [
56 {at: -0.3, is: '33px 7px 33px 7px black'}, 56 {at: -0.3, is: 'rgb(0, 0, 0) 33px 7px 33px 7px'},
57 {at: 0, is: '30px 10px 30px 10px black'}, 57 {at: 0, is: 'rgb(0, 0, 0) 30px 10px 30px 10px'},
58 {at: 0.3, is: '27px 13px 27px 13px black'}, 58 {at: 0.3, is: 'rgb(0, 0, 0) 27px 13px 27px 13px'},
59 {at: 0.6, is: '24px 16px 24px 16px black'}, 59 {at: 0.6, is: 'rgb(0, 0, 0) 24px 16px 24px 16px'},
60 {at: 1, is: '20px 20px 20px 20px black'}, 60 {at: 1, is: 'rgb(0, 0, 0) 20px 20px 20px 20px'},
61 {at: 1.5, is: '15px 25px 15px 25px black'}, 61 {at: 1.5, is: 'rgb(0, 0, 0) 15px 25px 15px 25px'},
62 ]); 62 ]);
63 63
64 assertInterpolation({ 64 assertInterpolation({
65 property: 'box-shadow', 65 property: 'box-shadow',
66 from: 'unset', 66 from: 'unset',
67 to: '20px 20px 20px 20px black', 67 to: '20px 20px 20px 20px black',
68 }, [ 68 }, [
69 {at: -0.3, is: '-6px -6px 0px -6px transparent'}, 69 {at: -0.3, is: 'rgba(0, 0, 0, 0) -6px -6px 0px -6px'},
70 {at: 0, is: 'none'}, 70 {at: 0, is: 'none'},
71 {at: 0.3, is: '6px 6px 6px 6px rgba(0, 0, 0, 0.3)'}, 71 {at: 0.3, is: 'rgba(0, 0, 0, 0.3) 6px 6px 6px 6px'},
72 {at: 0.6, is: '12px 12px 12px 12px rgba(0, 0, 0, 0.6)'}, 72 {at: 0.6, is: 'rgba(0, 0, 0, 0.6) 12px 12px 12px 12px'},
73 {at: 1, is: '20px 20px 20px 20px black'}, 73 {at: 1, is: 'rgb(0, 0, 0) 20px 20px 20px 20px'},
74 {at: 1.5, is: '30px 30px 30px 30px black'}, 74 {at: 1.5, is: 'rgb(0, 0, 0) 30px 30px 30px 30px'},
75 ]); 75 ]);
76 76
77 // Test basic functionality, and clipping blur at 0 77 // Test basic functionality, and clipping blur at 0
78 assertInterpolation({ 78 assertInterpolation({
79 property: 'box-shadow', 79 property: 'box-shadow',
80 from: '15px 10px 5px 6px black', 80 from: '15px 10px 5px 6px black',
81 to: '-15px -10px 25px -4px orange' 81 to: '-15px -10px 25px -4px orange',
82 }, [ 82 }, [
83 {at: -0.3, is: '24px 16px 0px 9px black'}, 83 {at: -0.3, is: 'rgb(0, 0, 0) 24px 16px 0px 9px'},
84 {at: 0, is: '15px 10px 5px 6px black'}, 84 {at: 0, is: 'rgb(0, 0, 0) 15px 10px 5px 6px'},
85 {at: 0.3, is: '6px 4px 11px 3px rgb(77, 50, 0)'}, 85 {at: 0.3, is: 'rgb(77, 50, 0) 6px 4px 11px 3px'},
86 {at: 0.6, is: '-3px -2px 17px 0px rgb(153, 99, 0)'}, 86 {at: 0.6, is: 'rgb(153, 99, 0) -3px -2px 17px 0px'},
87 {at: 1, is: '-15px -10px 25px -4px orange'}, 87 {at: 1, is: 'rgb(255, 165, 0) -15px -10px 25px -4px'},
88 {at: 1.5, is: '-30px -20px 35px -9px rgb(255, 248, 0)'}, 88 {at: 1.5, is: 'rgb(255, 248, 0) -30px -20px 35px -9px'},
89 ]);
90
91 // Test with color as first value.
92 assertInterpolation({
93 property: 'box-shadow',
94 from: 'black 15px 10px 5px 6px',
95 to: 'orange -15px -10px 25px -4px',
96 }, [
97 {at: -0.3, is: 'rgb(0, 0, 0) 24px 16px 0px 9px'},
98 {at: 0, is: 'rgb(0, 0, 0) 15px 10px 5px 6px'},
99 {at: 0.3, is: 'rgb(77, 50, 0) 6px 4px 11px 3px'},
100 {at: 0.6, is: 'rgb(153, 99, 0) -3px -2px 17px 0px'},
101 {at: 1, is: 'rgb(255, 165, 0) -15px -10px 25px -4px'},
102 {at: 1.5, is: 'rgb(255, 248, 0) -30px -20px 35px -9px'},
89 ]); 103 ]);
90 104
91 assertInterpolation({ 105 assertInterpolation({
92 property: 'box-shadow', 106 property: 'box-shadow',
93 from: '15px 10px 5px 6px black inset', 107 from: '15px 10px 5px 6px black inset',
94 to: '-15px -10px 25px -4px orange inset' 108 to: '-15px -10px 25px -4px orange inset',
95 }, [ 109 }, [
96 {at: -0.3, is: '24px 16px 0px 9px black inset'}, 110 {at: -0.3, is: 'rgb(0, 0, 0) 24px 16px 0px 9px inset'},
97 {at: 0, is: '15px 10px 5px 6px black inset'}, 111 {at: 0, is: 'rgb(0, 0, 0) 15px 10px 5px 6px inset'},
98 {at: 0.3, is: '6px 4px 11px 3px rgb(77, 50, 0) inset'}, 112 {at: 0.3, is: 'rgb(77, 50, 0) 6px 4px 11px 3px inset'},
99 {at: 0.6, is: '-3px -2px 17px 0px rgb(153, 99, 0) inset'}, 113 {at: 0.6, is: 'rgb(153, 99, 0) -3px -2px 17px 0px inset'},
100 {at: 1, is: '-15px -10px 25px -4px orange inset'}, 114 {at: 1, is: 'rgb(255, 165, 0) -15px -10px 25px -4px inset'},
101 {at: 1.5, is: '-30px -20px 35px -9px rgb(255, 248, 0) inset'}, 115 {at: 1.5, is: 'rgb(255, 248, 0) -30px -20px 35px -9px inset'},
102 ]); 116 ]);
103 117
104 assertInterpolation({ 118 assertInterpolation({
105 property: 'box-shadow', 119 property: 'box-shadow',
106 from: '15px 10px 5px 6px black', 120 from: '15px 10px 5px 6px black',
107 to: '-15px -10px 25px -4px' 121 to: '-15px -10px 25px -4px',
108 }, [ 122 }, [
109 {at: -0.3, is: '24px 16px 0px 9px black'}, 123 {at: -0.3, is: 'rgb(0, 0, 0) 24px 16px 0px 9px'},
110 {at: 0, is: '15px 10px 5px 6px black'}, 124 {at: 0, is: 'rgb(0, 0, 0) 15px 10px 5px 6px'},
111 {at: 0.3, is: '6px 4px 11px 3px rgb(0, 38, 0)'}, 125 {at: 0.3, is: 'rgb(0, 38, 0) 6px 4px 11px 3px'},
112 {at: 0.6, is: '-3px -2px 17px 0px rgb(0, 77, 0)'}, 126 {at: 0.6, is: 'rgb(0, 77, 0) -3px -2px 17px 0px'},
113 {at: 1, is: '-15px -10px 25px -4px green'}, 127 {at: 1, is: 'rgb(0, 128, 0) -15px -10px 25px -4px'},
114 {at: 1.5, is: '-30px -20px 35px -9px rgb(0, 192, 0)'}, 128 {at: 1.5, is: 'rgb(0, 192, 0) -30px -20px 35px -9px'},
115 ]); 129 ]);
116 130
117 assertInterpolation({ 131 assertInterpolation({
118 property: 'box-shadow', 132 property: 'box-shadow',
119 from: '10px 10px 10px 10px black', 133 from: '10px 10px 10px 10px black',
120 to: '10px 10px 10px 10px currentColor', 134 to: '10px 10px 10px 10px currentColor',
121 }, [ 135 }, [
122 {at: -0.3, is: '10px 10px 10px 10px black'}, 136 {at: -0.3, is: 'rgb(0, 0, 0) 10px 10px 10px 10px'},
123 {at: 0, is: '10px 10px 10px 10px black'}, 137 {at: 0, is: 'rgb(0, 0, 0) 10px 10px 10px 10px'},
124 {at: 0.3, is: '10px 10px 10px 10px rgb(0, 38, 0)'}, 138 {at: 0.3, is: 'rgb(0, 38, 0) 10px 10px 10px 10px'},
125 {at: 0.6, is: '10px 10px 10px 10px rgb(0, 77, 0)'}, 139 {at: 0.6, is: 'rgb(0, 77, 0) 10px 10px 10px 10px'},
126 {at: 1, is: '10px 10px 10px 10px green'}, 140 {at: 1, is: 'rgb(0, 128, 0) 10px 10px 10px 10px'},
127 {at: 1.5, is: '10px 10px 10px 10px rgb(0, 192, 0)'}, 141 {at: 1.5, is: 'rgb(0, 192, 0) 10px 10px 10px 10px'},
128 ]); 142 ]);
129 143
130 // Test padding shorter lists 144 // Test padding shorter lists
131 assertInterpolation({ 145 assertInterpolation({
132 property: 'box-shadow', 146 property: 'box-shadow',
133 from: '10px 20px rgba(255, 255, 0, 0.5), inset 5px 10em #008000', 147 from: '10px 20px rgba(255, 255, 0, 0.5), inset 5px 10em #008000',
134 to: 'none' 148 to: 'none',
135 }, [ 149 }, [
136 {at: -0.3, is: '13px 26px rgba(255, 255, 0, 0.65), inset 6.5px 39px rgb(0, 166 , 0)'}, 150 {at: -0.3, is: 'rgba(255, 255, 0, 0.65) 13px 26px 0px 0px, rgb(0, 166, 0) 6.5p x 39px 0px 0px inset'},
137 {at: 0, is: '10px 20px rgba(255, 255, 0, 0.5), inset 5px 30px #008000'}, 151 {at: 0, is: 'rgba(255, 255, 0, 0.5) 10px 20px 0px 0px, rgb(0, 128, 0) 5px 30px 0px 0px inset'},
138 {at: 0.3, is: '7px 14px rgba(255, 255, 0, 0.35), inset 3.5px 21px rgba(0, 128, 0, 0.7)'}, 152 {at: 0.3, is: 'rgba(255, 255, 0, 0.353) 7px 14px 0px 0px, rgba(0, 128, 0, 0.7) 3.5px 21px 0px 0px inset'},
139 {at: 0.6, is: '4px 8px rgba(255, 255, 0, 0.2), inset 2px 12px rgba(0, 128, 0, 0.4)'}, 153 {at: 0.6, is: 'rgba(255, 255, 0, 0.2) 4px 8px 0px 0px, rgba(0, 128, 0, 0.4) 2p x 12px 0px 0px inset'},
140 {at: 1, is: 'none'}, 154 {at: 1, is: 'none'},
141 {at: 1.5, is: '-5px -10px transparent, inset -2.5px -15px transparent'}, 155 {at: 1.5, is: 'rgba(0, 0, 0, 0) -5px -10px 0px 0px, rgba(0, 0, 0, 0) -2.5px -1 5px 0px 0px inset'},
142 ]); 156 ]);
143 157
144 // Test unmatched inset 158 // Test unmatched inset
145 assertNoInterpolation({ 159 assertNoInterpolation({
146 property: 'box-shadow', 160 property: 'box-shadow',
147 from: '10px 20px yellow, 5px 10px green', 161 from: '10px 20px yellow, 5px 10px green',
148 to: 'inset 5px 10px green, 15px 20px blue' 162 to: 'inset 5px 10px green, 15px 20px blue'
149 }); 163 });
150 </script> 164 </script>
151 </body> 165 </body>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/composition/text-shadow-composition.html ('k') | third_party/WebKit/LayoutTests/animations/interpolation/text-shadow-interpolation.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698