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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/animations/interpolation/filter-interpolation.html

Issue 1265873002: Add test coverage for interpolations using CSS wide keywords and neutral keyframes (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Rebased Created 5 years, 4 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 | Annotate | Revision Log
« no previous file with comments | « LayoutTests/animations/interpolation/color-interpolation.html ('k') | LayoutTests/animations/interpolation/filter-interpolation-expected.txt » ('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 {
5 -webkit-filter: hue-rotate(30deg);
6 }
4 .target { 7 .target {
8 display: inline-block;
5 width: 50px; 9 width: 50px;
6 height: 50px; 10 height: 50px;
7 background-color: lightskyblue; 11 background-color: green;
8 color: white; 12 color: white;
13 margin-right: 2px;
14 -webkit-filter: hue-rotate(10deg);
9 } 15 }
10 .container { 16 .expected {
11 border: solid black 5px; 17 margin-right: 20px;
12 background: white;
13 display: inline-block;
14 -webkit-filter: sepia(0.5);
15 }
16 .container:nth-child(2n) {
17 border-color: green;
18 } 18 }
19 .test { 19 .test {
20 padding-bottom: 10px; 20 padding-bottom: 10px;
21 } 21 }
22 </style> 22 </style>
23 <body> 23 <body>
24 <svg style="display:none"><filter id="svgfilter"><feGaussianBlur stdDeviation="5 "></feGaussianBlur></filter></svg> 24 <svg style="display:none">
25 <template id="target-template"> 25 <filter id="svgfilter">
26 <div class="container"><div class="target"></div></div> 26 <feGaussianBlur stdDeviation="5"></feGaussianBlur>
27 </template> 27 </filter>
28 </svg>
28 <script src="resources/interpolation-test.js"></script> 29 <script src="resources/interpolation-test.js"></script>
29 <script> 30 <script>
31 assertInterpolation({
32 property: '-webkit-filter',
33 from: '',
34 to: 'hue-rotate(20deg)',
35 }, [
36 {at: -0.5, is: 'hue-rotate(5deg)'},
37 {at: 0, is: 'hue-rotate(10deg)'},
38 {at: 0.3, is: 'hue-rotate(13deg)'},
39 {at: 0.6, is: 'hue-rotate(16deg)'},
40 {at: 1, is: 'hue-rotate(20deg)'},
41 {at: 1.5, is: 'hue-rotate(25deg)'},
42 ]);
43
44 assertInterpolation({
45 property: '-webkit-filter',
46 from: 'initial',
47 to: 'hue-rotate(20deg)',
48 }, [
49 {at: -0.5, is: 'hue-rotate(-10deg)'},
50 {at: 0, is: 'none'},
51 {at: 0.3, is: 'hue-rotate(6deg)'},
52 {at: 0.6, is: 'hue-rotate(12deg)'},
53 {at: 1, is: 'hue-rotate(20deg)'},
54 {at: 1.5, is: 'hue-rotate(30deg)'},
55 ]);
56
57 assertInterpolation({
58 property: '-webkit-filter',
59 from: 'inherit',
60 to: 'hue-rotate(20deg)',
61 }, [
62 {at: -0.5, is: 'hue-rotate(35deg)'},
63 {at: 0, is: 'hue-rotate(30deg)'},
64 {at: 0.3, is: 'hue-rotate(27deg)'},
65 {at: 0.6, is: 'hue-rotate(24deg)'},
66 {at: 1, is: 'hue-rotate(20deg)'},
67 {at: 1.5, is: 'hue-rotate(15deg)'},
68 ]);
69
70 assertInterpolation({
71 property: '-webkit-filter',
72 from: 'unset',
73 to: 'hue-rotate(20deg)',
74 }, [
75 {at: -0.5, is: 'hue-rotate(-10deg)'},
76 {at: 0, is: 'none'},
77 {at: 0.3, is: 'hue-rotate(6deg)'},
78 {at: 0.6, is: 'hue-rotate(12deg)'},
79 {at: 1, is: 'hue-rotate(20deg)'},
80 {at: 1.5, is: 'hue-rotate(30deg)'},
81 ]);
82
30 // Matching lists: 83 // Matching lists:
31 assertInterpolation({ 84 assertInterpolation({
32 property: '-webkit-filter', 85 property: '-webkit-filter',
33 from: 'hue-rotate(0deg) blur(6px)', 86 from: 'hue-rotate(0deg) blur(6px)',
34 to: 'hue-rotate(180deg) blur(10px)' 87 to: 'hue-rotate(180deg) blur(10px)'
35 }, [ 88 }, [
36 {at: -0.5, is: 'hue-rotate(-90deg) blur(4px)'}, 89 {at: -0.5, is: 'hue-rotate(-90deg) blur(4px)'},
37 {at: 0, is: 'hue-rotate(0deg) blur(6px)'}, 90 {at: 0, is: 'hue-rotate(0deg) blur(6px)'},
38 {at: 0.25, is: 'hue-rotate(45deg) blur(7px)'}, 91 {at: 0.25, is: 'hue-rotate(45deg) blur(7px)'},
39 {at: 0.5, is: 'hue-rotate(90deg) blur(8px)'}, 92 {at: 0.5, is: 'hue-rotate(90deg) blur(8px)'},
(...skipping 211 matching lines...) Expand 10 before | Expand all | Expand 10 after
251 property: '-webkit-filter', 304 property: '-webkit-filter',
252 from: 'initial', // lacuna is 0 305 from: 'initial', // lacuna is 0
253 to: 'sepia(1)' 306 to: 'sepia(1)'
254 }, [ 307 }, [
255 {at: -1, is: 'sepia(0)'}, // Negative values are not allowed. 308 {at: -1, is: 'sepia(0)'}, // Negative values are not allowed.
256 {at: 0, is: 'none'}, // Equivalent to sepia(0) 309 {at: 0, is: 'none'}, // Equivalent to sepia(0)
257 {at: 0.5, is: 'sepia(0.5)'}, 310 {at: 0.5, is: 'sepia(0.5)'},
258 {at: 1, is: 'sepia(1)'}, 311 {at: 1, is: 'sepia(1)'},
259 {at: 1.5, is: 'sepia(1)'} // Should clamp values to 1. 312 {at: 1.5, is: 'sepia(1)'} // Should clamp values to 1.
260 ]); 313 ]);
261
262 assertInterpolation({
263 property: '-webkit-filter',
264 from: 'inherit',
265 to: 'sepia(1)'
266 }, [
267 {at: -1, is: 'sepia(0)'},
268 {at: 0, is: 'sepia(0.5)'},
269 {at: 0.5, is: 'sepia(0.75)'},
270 {at: 1, is: 'sepia(1)'},
271 {at: 1.5, is: 'sepia(1)'} // Should clamp values to 1.
272 ]);
273 </script> 314 </script>
274 </body> 315 </body>
OLDNEW
« no previous file with comments | « LayoutTests/animations/interpolation/color-interpolation.html ('k') | LayoutTests/animations/interpolation/filter-interpolation-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698