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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/animations/interpolation/background-position-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/background-image-interpolation.html ('k') | LayoutTests/animations/interpolation/background-position-origin-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 {
5 background-position: 60px 60px;
6 }
4 .target { 7 .target {
5 width: 120px; 8 width: 120px;
6 height: 120px; 9 height: 120px;
7 display: inline-block; 10 display: inline-block;
8 border: 2px solid black; 11 border: 2px solid black;
9 background-repeat: no-repeat; 12 background-repeat: no-repeat;
10 background-image: radial-gradient(20px circle at 20px 20px, red 18px, transpar ent), 13 background-image: radial-gradient(20px circle at 20px 20px, red 18px, transpar ent),
11 radial-gradient(20px circle at 20px 20px, yellow 18px, trans parent), 14 radial-gradient(20px circle at 20px 20px, yellow 18px, trans parent),
12 radial-gradient(20px circle at 20px 20px, lime 18px, transpa rent), 15 radial-gradient(20px circle at 20px 20px, lime 18px, transpa rent),
13 radial-gradient(20px circle at 20px 20px, blue 18px, transpa rent); 16 radial-gradient(20px circle at 20px 20px, blue 18px, transpa rent);
17 background-position: 40px 40px;
14 } 18 }
15 .expected { 19 .expected {
16 margin-right: 10px; 20 margin-right: 10px;
17 } 21 }
18 </style> 22 </style>
19 <body> 23 <body>
20 <script src="resources/interpolation-test.js"></script> 24 <script src="resources/interpolation-test.js"></script>
21 <script> 25 <script>
26 assertInterpolation({
27 property: 'background-position',
28 from: '',
29 to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
30 }, [
31 {at: -0.25, is: '30px 30px, 30px 30px, 30px 30px, 30px 30px'},
32 {at: 0, is: '40px 40px, 40px 40px, 40px 40px, 40px 40px'},
33 {at: 0.25, is: '50px 50px, 50px 50px, 50px 50px, 50px 50px'},
34 {at: 0.5, is: '60px 60px, 60px 60px, 60px 60px, 60px 60px'},
35 {at: 0.75, is: '70px 70px, 70px 70px, 70px 70px, 70px 70px'},
36 {at: 1, is: '80px 80px, 80px 80px, 80px 80px, 80px 80px'},
37 {at: 1.25, is: '90px 90px, 90px 90px, 90px 90px, 90px 90px'},
38 ]);
39
40 assertInterpolation({
41 property: 'background-position',
42 from: 'initial',
43 to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
44 }, [
45 {at: -0.25, is: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'},
46 {at: 0, is: ' 0% 0% , 0% 0% , 0% 0% , 0% 0% '}, // TODO (alancutter): Should these be 0px?
47 {at: 0.25, is: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'},
48 {at: 0.5, is: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'},
49 {at: 0.75, is: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'},
50 {at: 1, is: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'},
51 {at: 1.25, is: '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
52 ]);
53
54 assertInterpolation({
55 property: 'background-position',
56 from: 'inherit',
57 to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
58 }, [
59 {at: -0.25, is: '55px 55px, 55px 55px, 55px 55px, 55px 55px'},
60 {at: 0, is: '60px 60px, 60px 60px, 60px 60px, 60px 60px'},
61 {at: 0.25, is: '65px 65px, 65px 65px, 65px 65px, 65px 65px'},
62 {at: 0.5, is: '70px 70px, 70px 70px, 70px 70px, 70px 70px'},
63 {at: 0.75, is: '75px 75px, 75px 75px, 75px 75px, 75px 75px'},
64 {at: 1, is: '80px 80px, 80px 80px, 80px 80px, 80px 80px'},
65 {at: 1.25, is: '85px 85px, 85px 85px, 85px 85px, 85px 85px'},
66 ]);
67
68 assertInterpolation({
69 property: 'background-position',
70 from: 'unset',
71 to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
72 }, [
73 {at: -0.25, is: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'},
74 {at: 0, is: ' 0% 0% , 0% 0% , 0% 0% , 0% 0% '},
75 {at: 0.25, is: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'},
76 {at: 0.5, is: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'},
77 {at: 0.75, is: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'},
78 {at: 1, is: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'},
79 {at: 1.25, is: '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
80 ]);
81
22 // Test equal number of position values as background images. 82 // Test equal number of position values as background images.
23 assertInterpolation({ 83 assertInterpolation({
24 property: 'background-position', 84 property: 'background-position',
25 from: '0px 0px, 0px 0px, 0px 0px, 0px 0px', 85 from: '0px 0px, 0px 0px, 0px 0px, 0px 0px',
26 to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', 86 to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
27 }, [ 87 }, [
28 {at: -0.25, is: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'}, 88 {at: -0.25, is: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'},
29 {at: 0, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, 89 {at: 0, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
30 {at: 0.25, is: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'}, 90 {at: 0.25, is: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'},
31 {at: 0.5, is: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'}, 91 {at: 0.5, is: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'},
(...skipping 26 matching lines...) Expand all
58 {at: -0.25, is: '-10px -10px, 80px -20px, 0px -20px, 90px -10px'}, 118 {at: -0.25, is: '-10px -10px, 80px -20px, 0px -20px, 90px -10px'},
59 {at: 0, is: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'}, 119 {at: 0, is: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'},
60 {at: 0.25, is: ' 10px 10px, 80px 20px, 0px 20px, 70px 10px'}, 120 {at: 0.25, is: ' 10px 10px, 80px 20px, 0px 20px, 70px 10px'},
61 {at: 0.5, is: ' 20px 20px, 80px 40px, 0px 40px, 60px 20px'}, 121 {at: 0.5, is: ' 20px 20px, 80px 40px, 0px 40px, 60px 20px'},
62 {at: 0.75, is: ' 30px 30px, 80px 60px, 0px 60px, 50px 30px'}, 122 {at: 0.75, is: ' 30px 30px, 80px 60px, 0px 60px, 50px 30px'},
63 {at: 1, is: ' 40px 40px, 80px 80px, 0px 80px, 40px 40px'}, 123 {at: 1, is: ' 40px 40px, 80px 80px, 0px 80px, 40px 40px'},
64 {at: 1.25, is: ' 50px 50px, 80px 100px, 0px 100px, 30px 50px'}, 124 {at: 1.25, is: ' 50px 50px, 80px 100px, 0px 100px, 30px 50px'},
65 ]); 125 ]);
66 </script> 126 </script>
67 </body> 127 </body>
OLDNEW
« no previous file with comments | « LayoutTests/animations/interpolation/background-image-interpolation.html ('k') | LayoutTests/animations/interpolation/background-position-origin-interpolation.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698