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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/animations/interpolation/background-position-interpolation.html

Issue 38573003: Use 4 value syntax for getComputedStyle of background-position and -webkit-mask-position (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Rebased Created 7 years, 1 month 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 | « no previous file | LayoutTests/animations/interpolation/background-position-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 .target { 4 .target {
5 width: 120px; 5 width: 120px;
6 height: 120px; 6 height: 120px;
7 display: inline-block; 7 display: inline-block;
8 border: 2px solid black; 8 border: 2px solid black;
9 background-repeat: no-repeat; 9 background-repeat: no-repeat;
10 background-image: radial-gradient(20px circle at 20px 20px, red 18px, transpar ent), 10 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), 11 radial-gradient(20px circle at 20px 20px, yellow 18px, trans parent),
12 radial-gradient(20px circle at 20px 20px, lime 18px, transpa rent), 12 radial-gradient(20px circle at 20px 20px, lime 18px, transpa rent),
13 radial-gradient(20px circle at 20px 20px, blue 18px, transpa rent); 13 radial-gradient(20px circle at 20px 20px, blue 18px, transpa rent);
14 } 14 }
15 .replica { 15 .replica {
16 margin-right: 10px; 16 margin-right: 10px;
17 } 17 }
18 </style> 18 </style>
19 <body> 19 <body>
20 <script src="resources/interpolation-test.js"></script> 20 <script src="resources/interpolation-test.js"></script>
21 <script> 21 <script>
22 // Test equal number of position values as background images. 22 // Test equal number of position values as background images.
23 assertInterpolation({ 23 assertInterpolation({
24 property: 'background-position', 24 property: 'background-position',
25 from: '0px 0px, 0px 0px, 0px 0px, 0px 0px', 25 from: '0px 0px, 0px 0px, 0px 0px, 0px 0px',
26 to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', 26 to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
27 }, [ 27 }, [
28 {at: -0.25, is: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'}, 28 {at: -0.25, is: 'left -20px top -20px, left -20px top -20px, left -20px top -2 0px, left -20px top -20px'},
29 {at: 0, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, 29 {at: 0, is: 'left 0px top 0px, left 0px top 0px, left 0px top 0px, left 0px top 0px'},
30 {at: 0.25, is: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'}, 30 {at: 0.25, is: 'left 20px top 20px, left 20px top 20px, left 20px top 2 0px, left 20px top 20px'},
31 {at: 0.5, is: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'}, 31 {at: 0.5, is: 'left 40px top 40px, left 40px top 40px, left 40px top 4 0px, left 40px top 40px'},
32 {at: 0.75, is: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'}, 32 {at: 0.75, is: 'left 60px top 60px, left 60px top 60px, left 60px top 6 0px, left 60px top 60px'},
33 {at: 1, is: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'}, 33 {at: 1, is: 'left 80px top 80px, left 80px top 80px, left 80px top 8 0px, left 80px top 80px'},
34 {at: 1.25, is: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, 34 {at: 1.25, is: 'left 100px top 100px, left 100px top 100px, left 100px top 10 0px, left 100px top 100px'},
35 ]); 35 ]);
36 36
37 // Test single position value repeated over background images. 37 // Test single position value repeated over background images.
38 assertInterpolation({ 38 assertInterpolation({
39 property: 'background-position', 39 property: 'background-position',
40 from: 'top 0px left 0px', 40 from: 'top 0px left 0px',
41 to: 'left 80px top 80px', 41 to: 'left 80px top 80px',
42 }, [ 42 }, [
43 {at: -0.25, is: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'}, 43 {at: -0.25, is: 'left -20px top -20px, left -20px top -20px, left -20px top -2 0px, left -20px top -20px'},
44 {at: 0, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, 44 {at: 0, is: 'left 0px top 0px, left 0px top 0px, left 0px top 0px, left 0px top 0px'},
45 {at: 0.25, is: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'}, 45 {at: 0.25, is: 'left 20px top 20px, left 20px top 20px, left 20px top 2 0px, left 20px top 20px'},
46 {at: 0.5, is: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'}, 46 {at: 0.5, is: 'left 40px top 40px, left 40px top 40px, left 40px top 4 0px, left 40px top 40px'},
47 {at: 0.75, is: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'}, 47 {at: 0.75, is: 'left 60px top 60px, left 60px top 60px, left 60px top 6 0px, left 60px top 60px'},
48 {at: 1, is: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'}, 48 {at: 1, is: 'left 80px top 80px, left 80px top 80px, left 80px top 8 0px, left 80px top 80px'},
49 {at: 1.25, is: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, 49 {at: 1.25, is: 'left 100px top 100px, left 100px top 100px, left 100px top 10 0px, left 100px top 100px'},
50 ]); 50 ]);
51 51
52 // Test mismatched numbers of position values. 52 // Test mismatched numbers of position values.
53 assertInterpolation({ 53 assertInterpolation({
54 property: 'background-position', 54 property: 'background-position',
55 from: '0px 0px, 80px 0px', 55 from: '0px 0px, 80px 0px',
56 to: '40px 40px, 80px 80px, 0px 80px', 56 to: '40px 40px, 80px 80px, 0px 80px',
57 }, [ 57 }, [
58 {at: -0.25, is: '-10px -10px, 80px -20px, 0px -20px, 90px -10px'}, 58 {at: -0.25, is: 'left -10px top -10px, left 80px top -20px, left 0px top -20px , left 90px top -10px'},
59 {at: 0, is: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'}, 59 {at: 0, is: 'left 0px top 0px, left 80px top 0px, left 0px top 0px , left 80px top 0px'},
60 {at: 0.25, is: ' 10px 10px, 80px 20px, 0px 20px, 70px 10px'}, 60 {at: 0.25, is: 'left 10px top 10px, left 80px top 20px, left 0px top 20px , left 70px top 10px'},
61 {at: 0.5, is: ' 20px 20px, 80px 40px, 0px 40px, 60px 20px'}, 61 {at: 0.5, is: 'left 20px top 20px, left 80px top 40px, left 0px top 40px , left 60px top 20px'},
62 {at: 0.75, is: ' 30px 30px, 80px 60px, 0px 60px, 50px 30px'}, 62 {at: 0.75, is: 'left 30px top 30px, left 80px top 60px, left 0px top 60px , left 50px top 30px'},
63 {at: 1, is: ' 40px 40px, 80px 80px, 0px 80px, 40px 40px'}, 63 {at: 1, is: 'left 40px top 40px, left 80px top 80px, left 0px top 80px , left 40px top 40px'},
64 {at: 1.25, is: ' 50px 50px, 80px 100px, 0px 100px, 30px 50px'}, 64 {at: 1.25, is: 'left 50px top 50px, left 80px top 100px, left 0px top 100px , left 30px top 50px'},
65 ]); 65 ]);
66 </script> 66 </script>
67 </body> 67 </body>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/animations/interpolation/background-position-interpolation-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698