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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 1379263002: Don't use pairwise keyframe interpolation at fractions 0 and 1. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@_listInterpolationFunctions
Patch Set: Created 5 years, 2 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/box-shadow-interpolation-expected.txt » ('j') | third_party/WebKit/Source/core/animation/InvalidatableStyleInterpolation.h » ('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 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;
(...skipping 23 matching lines...) Expand all
34 {at: 1, is: '20px 20px 20px 20px black'}, 34 {at: 1, is: '20px 20px 20px 20px black'},
35 {at: 1.5, is: '25px 15px 25px 15px black'}, 35 {at: 1.5, is: '25px 15px 25px 15px black'},
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: '-6px -6px 0px -6px transparent'},
44 {at: 0, is: '0px 0px 0px 0px transparent'}, 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: '6px 6px 6px 6px rgba(0, 0, 0, 0.3)'},
46 {at: 0.6, is: '12px 12px 12px 12px rgba(0, 0, 0, 0.6)'}, 46 {at: 0.6, is: '12px 12px 12px 12px rgba(0, 0, 0, 0.6)'},
47 {at: 1, is: '20px 20px 20px 20px black'}, 47 {at: 1, is: '20px 20px 20px 20px black'},
48 {at: 1.5, is: '30px 30px 30px 30px black'}, 48 {at: 1.5, is: '30px 30px 30px 30px black'},
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: '33px 7px 33px 7px black'},
57 {at: 0, is: '30px 10px 30px 10px black'}, 57 {at: 0, is: '30px 10px 30px 10px black'},
58 {at: 0.3, is: '27px 13px 27px 13px black'}, 58 {at: 0.3, is: '27px 13px 27px 13px black'},
59 {at: 0.6, is: '24px 16px 24px 16px black'}, 59 {at: 0.6, is: '24px 16px 24px 16px black'},
60 {at: 1, is: '20px 20px 20px 20px black'}, 60 {at: 1, is: '20px 20px 20px 20px black'},
61 {at: 1.5, is: '15px 25px 15px 25px black'}, 61 {at: 1.5, is: '15px 25px 15px 25px black'},
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: '-6px -6px 0px -6px transparent'},
70 {at: 0, is: '0px 0px 0px 0px transparent'}, 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: '6px 6px 6px 6px rgba(0, 0, 0, 0.3)'},
72 {at: 0.6, is: '12px 12px 12px 12px rgba(0, 0, 0, 0.6)'}, 72 {at: 0.6, is: '12px 12px 12px 12px rgba(0, 0, 0, 0.6)'},
73 {at: 1, is: '20px 20px 20px 20px black'}, 73 {at: 1, is: '20px 20px 20px 20px black'},
74 {at: 1.5, is: '30px 30px 30px 30px black'}, 74 {at: 1.5, is: '30px 30px 30px 30px black'},
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',
(...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after
130 // Test padding shorter lists 130 // Test padding shorter lists
131 assertInterpolation({ 131 assertInterpolation({
132 property: 'box-shadow', 132 property: 'box-shadow',
133 from: '10px 20px rgba(255, 255, 0, 0.5), inset 5px 10em #008000', 133 from: '10px 20px rgba(255, 255, 0, 0.5), inset 5px 10em #008000',
134 to: 'none' 134 to: 'none'
135 }, [ 135 }, [
136 {at: -0.3, is: '13px 26px rgba(255, 255, 0, 0.65), inset 6.5px 39px rgb(0, 166 , 0)'}, 136 {at: -0.3, is: '13px 26px rgba(255, 255, 0, 0.65), inset 6.5px 39px rgb(0, 166 , 0)'},
137 {at: 0, is: '10px 20px rgba(255, 255, 0, 0.5), inset 5px 30px #008000'}, 137 {at: 0, is: '10px 20px rgba(255, 255, 0, 0.5), inset 5px 30px #008000'},
138 {at: 0.3, is: '7px 14px rgba(255, 255, 0, 0.35), inset 3.5px 21px rgba(0, 128, 0, 0.7)'}, 138 {at: 0.3, is: '7px 14px rgba(255, 255, 0, 0.35), inset 3.5px 21px rgba(0, 128, 0, 0.7)'},
139 {at: 0.6, is: '4px 8px rgba(255, 255, 0, 0.2), inset 2px 12px rgba(0, 128, 0, 0.4)'}, 139 {at: 0.6, is: '4px 8px rgba(255, 255, 0, 0.2), inset 2px 12px rgba(0, 128, 0, 0.4)'},
140 {at: 1, is: '0px 0px 0px 0px transparent, inset 0px 0px 0px 0px transparent'}, 140 {at: 1, is: 'none'},
141 {at: 1.5, is: '-5px -10px transparent, inset -2.5px -15px transparent'}, 141 {at: 1.5, is: '-5px -10px transparent, inset -2.5px -15px transparent'},
142 ]); 142 ]);
143 143
144 // Test unmatched inset 144 // Test unmatched inset
145 assertNoInterpolation({ 145 assertNoInterpolation({
146 property: 'box-shadow', 146 property: 'box-shadow',
147 from: '10px 20px yellow, 5px 10px green', 147 from: '10px 20px yellow, 5px 10px green',
148 to: 'inset 5px 10px green, 15px 20px blue' 148 to: 'inset 5px 10px green, 15px 20px blue'
149 }); 149 });
150 </script> 150 </script>
151 </body> 151 </body>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/composition/text-shadow-composition.html ('k') | third_party/WebKit/LayoutTests/animations/interpolation/box-shadow-interpolation-expected.txt » ('j') | third_party/WebKit/Source/core/animation/InvalidatableStyleInterpolation.h » ('J')

Powered by Google App Engine
This is Rietveld 408576698