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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/animations/interpolation/text-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/interpolation/box-shadow-interpolation.html ('k') | third_party/WebKit/LayoutTests/animations/responsive/box-shadow-responsive.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 text-shadow: 30px 10px 30px orange; 5 text-shadow: 30px 10px 30px orange;
6 } 6 }
7 .target { 7 .target {
8 display: inline-block; 8 display: inline-block;
9 font-size: 60pt; 9 font-size: 60pt;
10 margin-right: 20px; 10 margin-right: 20px;
11 margin-bottom: 30px; 11 margin-bottom: 30px;
12 color: green; 12 color: green;
13 text-shadow: 10px 30px 10px orange; 13 text-shadow: 10px 30px 10px orange;
14 } 14 }
15 .expected { 15 .expected {
16 margin-right: 40px; 16 margin-right: 40px;
17 } 17 }
18 </style> 18 </style>
19 <body> 19 <body>
20 <template id="target-template">T</template> 20 <template id="target-template">T</template>
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: 'text-shadow', 24 property: 'text-shadow',
25 from: neutralKeyframe, 25 from: neutralKeyframe,
26 to: '20px 20px 20px green', 26 to: 'green 20px 20px 20px',
27 }, [ 27 }, [
28 {at: -0.3, is: 'rgb(255, 176, 0) 7px 33px 7px'}, 28 {at: -0.3, is: 'rgb(255, 176, 0) 7px 33px 7px'},
29 {at: 0, is: 'rgb(255, 165, 0) 10px 30px 10px'}, 29 {at: 0, is: 'rgb(255, 165, 0) 10px 30px 10px'},
30 {at: 0.3, is: 'rgb(179, 154, 0) 13px 27px 13px'}, 30 {at: 0.3, is: 'rgb(179, 154, 0) 13px 27px 13px'},
31 {at: 0.6, is: 'rgb(102, 143, 0) 16px 24px 16px'}, 31 {at: 0.6, is: 'rgb(102, 143, 0) 16px 24px 16px'},
32 {at: 1, is: 'rgb(0, 128, 0) 20px 20px 20px'}, 32 {at: 1, is: 'rgb(0, 128, 0) 20px 20px 20px'},
33 {at: 1.5, is: 'rgb(0, 110, 0) 25px 15px 25px'}, 33 {at: 1.5, is: 'rgb(0, 110, 0) 25px 15px 25px'},
34 ]); 34 ]);
35 35
36 assertInterpolation({ 36 assertInterpolation({
37 property: 'text-shadow', 37 property: 'text-shadow',
38 from: 'initial', 38 from: 'initial',
39 to: '20px 20px 20px green', 39 to: 'green 20px 20px 20px',
40 }, [ 40 }, [
41 {at: -0.3, is: 'rgba(0, 0, 0, 0) -6px -6px 0px'}, 41 {at: -0.3, is: 'rgba(0, 0, 0, 0) -6px -6px 0px'},
42 {at: 0, is: 'none'}, 42 {at: 0, is: 'none'},
43 {at: 0.3, is: 'rgba(0, 128, 0, 0.3) 6px 6px 6px'}, 43 {at: 0.3, is: 'rgba(0, 128, 0, 0.3) 6px 6px 6px'},
44 {at: 0.6, is: 'rgba(0, 128, 0, 0.6) 12px 12px 12px'}, 44 {at: 0.6, is: 'rgba(0, 128, 0, 0.6) 12px 12px 12px'},
45 {at: 1, is: 'rgb(0, 128, 0) 20px 20px 20px'}, 45 {at: 1, is: 'rgb(0, 128, 0) 20px 20px 20px'},
46 {at: 1.5, is: 'rgb(0, 192, 0) 30px 30px 30px'}, 46 {at: 1.5, is: 'rgb(0, 192, 0) 30px 30px 30px'},
47 ]); 47 ]);
48 48
49 assertInterpolation({ 49 assertInterpolation({
50 property: 'text-shadow', 50 property: 'text-shadow',
51 from: 'inherit', 51 from: 'inherit',
52 to: '20px 20px 20px green', 52 to: 'green 20px 20px 20px',
53 }, [ 53 }, [
54 {at: -0.3, is: 'rgb(255, 176, 0) 33px 7px 33px'}, 54 {at: -0.3, is: 'rgb(255, 176, 0) 33px 7px 33px'},
55 {at: 0, is: 'rgb(255, 165, 0) 30px 10px 30px'}, 55 {at: 0, is: 'rgb(255, 165, 0) 30px 10px 30px'},
56 {at: 0.3, is: 'rgb(179, 154, 0) 27px 13px 27px'}, 56 {at: 0.3, is: 'rgb(179, 154, 0) 27px 13px 27px'},
57 {at: 0.6, is: 'rgb(102, 143, 0) 24px 16px 24px'}, 57 {at: 0.6, is: 'rgb(102, 143, 0) 24px 16px 24px'},
58 {at: 1, is: 'rgb(0, 128, 0) 20px 20px 20px'}, 58 {at: 1, is: 'rgb(0, 128, 0) 20px 20px 20px'},
59 {at: 1.5, is: 'rgb(0, 110, 0) 15px 25px 15px'}, 59 {at: 1.5, is: 'rgb(0, 110, 0) 15px 25px 15px'},
60 ]); 60 ]);
61 61
62 assertInterpolation({ 62 assertInterpolation({
63 property: 'text-shadow', 63 property: 'text-shadow',
64 from: 'unset', 64 from: 'unset',
65 to: '20px 20px 20px green', 65 to: 'green 20px 20px 20px',
66 }, [ 66 }, [
67 {at: -0.3, is: 'rgb(255, 176, 0) 33px 7px 33px'}, 67 {at: -0.3, is: 'rgb(255, 176, 0) 33px 7px 33px'},
68 {at: 0, is: 'rgb(255, 165, 0) 30px 10px 30px'}, 68 {at: 0, is: 'rgb(255, 165, 0) 30px 10px 30px'},
69 {at: 0.3, is: 'rgb(179, 154, 0) 27px 13px 27px'}, 69 {at: 0.3, is: 'rgb(179, 154, 0) 27px 13px 27px'},
70 {at: 0.6, is: 'rgb(102, 143, 0) 24px 16px 24px'}, 70 {at: 0.6, is: 'rgb(102, 143, 0) 24px 16px 24px'},
71 {at: 1, is: 'rgb(0, 128, 0) 20px 20px 20px'}, 71 {at: 1, is: 'rgb(0, 128, 0) 20px 20px 20px'},
72 {at: 1.5, is: 'rgb(0, 110, 0) 15px 25px 15px'}, 72 {at: 1.5, is: 'rgb(0, 110, 0) 15px 25px 15px'},
73 ]); 73 ]);
74 74
75 assertInterpolation({ 75 assertInterpolation({
76 property: 'text-shadow', 76 property: 'text-shadow',
77 from: '15px 10px 5px black', 77 from: 'black 15px 10px 5px',
78 to: '-15px -10px 25px orange' 78 to: 'orange -15px -10px 25px',
79 }, [ 79 }, [
80 {at: -0.3, is: '24px 16px 0px black'}, 80 {at: -0.3, is: 'rgb(0, 0, 0) 24px 16px 0px'},
81 {at: 0, is: '15px 10px 5px black'}, 81 {at: 0, is: 'rgb(0, 0, 0) 15px 10px 5px'},
82 {at: 0.3, is: '6px 4px 11px rgb(77, 50, 0)'}, 82 {at: 0.3, is: 'rgb(77, 50, 0) 6px 4px 11px'},
83 {at: 0.6, is: '-3px -2px 17px rgb(153, 99, 0)'}, 83 {at: 0.6, is: 'rgb(153, 99, 0) -3px -2px 17px'},
84 {at: 1, is: '-15px -10px 25px orange'}, 84 {at: 1, is: 'rgb(255, 165, 0) -15px -10px 25px'},
85 {at: 1.5, is: '-30px -20px 35px rgb(255, 248, 0)'}, 85 {at: 1.5, is: 'rgb(255, 248, 0) -30px -20px 35px'},
86 ]); 86 ]);
87 87
88 assertInterpolation({ 88 assertInterpolation({
89 property: 'text-shadow', 89 property: 'text-shadow',
90 from: '10px 10px 10px black', 90 from: 'black 10px 10px 10px',
91 to: '10px 10px 10px currentColor' 91 to: 'currentColor 10px 10px 10px',
92 }, [ 92 }, [
93 {at: -0.3, is: '10px 10px 10px black'}, 93 {at: -0.3, is: 'rgb(0, 0, 0) 10px 10px 10px'},
94 {at: 0, is: '10px 10px 10px black'}, 94 {at: 0, is: 'rgb(0, 0, 0) 10px 10px 10px'},
95 {at: 0.3, is: '10px 10px 10px rgb(0, 38, 0)'}, 95 {at: 0.3, is: 'rgb(0, 38, 0) 10px 10px 10px'},
96 {at: 0.6, is: '10px 10px 10px rgb(0, 77, 0)'}, 96 {at: 0.6, is: 'rgb(0, 77, 0) 10px 10px 10px'},
97 {at: 1, is: '10px 10px 10px green'}, 97 {at: 1, is: 'rgb(0, 128, 0) 10px 10px 10px'},
98 {at: 1.5, is: '10px 10px 10px rgb(0, 192, 0)'}, 98 {at: 1.5, is: 'rgb(0, 192, 0) 10px 10px 10px'},
99 ]); 99 ]);
100 </script> 100 </script>
101 </body> 101 </body>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/interpolation/box-shadow-interpolation.html ('k') | third_party/WebKit/LayoutTests/animations/responsive/box-shadow-responsive.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698