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

Side by Side Diff: LayoutTests/animations/interpolation/webkit-mask-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
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <meta charset="UTF-8"> 2 <meta charset="UTF-8">
3 <style> 3 <style>
4 .container { 4 .container {
5 display: inline-block; 5 display: inline-block;
6 border: 2px solid black; 6 border: 2px solid black;
7 } 7 }
8 .target { 8 .target {
9 width: 120px; 9 width: 120px;
10 height: 120px; 10 height: 120px;
(...skipping 11 matching lines...) Expand all
22 </div> 22 </div>
23 </template> 23 </template>
24 <script src="resources/interpolation-test.js"></script> 24 <script src="resources/interpolation-test.js"></script>
25 <script> 25 <script>
26 // Test equal number of position values as background images. 26 // Test equal number of position values as background images.
27 assertInterpolation({ 27 assertInterpolation({
28 property: '-webkit-mask-position', 28 property: '-webkit-mask-position',
29 from: '0px 0px, 0px 0px, 0px 0px, 0px 0px', 29 from: '0px 0px, 0px 0px, 0px 0px, 0px 0px',
30 to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', 30 to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
31 }, [ 31 }, [
32 {at: -0.25, is: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'}, 32 {at: -0.25, is: 'left -20px top -20px, left -20px top -20px, left -20px top -2 0px, left -20px top -20px'},
33 {at: 0, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, 33 {at: 0, is: 'left 0px top 0px, left 0px top 0px, left 0px top 0px, left 0px top 0px'},
34 {at: 0.25, is: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'}, 34 {at: 0.25, is: 'left 20px top 20px, left 20px top 20px, left 20px top 2 0px, left 20px top 20px'},
35 {at: 0.5, is: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'}, 35 {at: 0.5, is: 'left 40px top 40px, left 40px top 40px, left 40px top 4 0px, left 40px top 40px'},
36 {at: 0.75, is: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'}, 36 {at: 0.75, is: 'left 60px top 60px, left 60px top 60px, left 60px top 6 0px, left 60px top 60px'},
37 {at: 1, is: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'}, 37 {at: 1, is: 'left 80px top 80px, left 80px top 80px, left 80px top 8 0px, left 80px top 80px'},
38 {at: 1.25, is: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, 38 {at: 1.25, is: 'left 100px top 100px, left 100px top 100px, left 100px top 10 0px, left 100px top 100px'},
39 ]); 39 ]);
40 40
41 // Test single position value repeated over background images. 41 // Test single position value repeated over background images.
42 assertInterpolation({ 42 assertInterpolation({
43 property: '-webkit-mask-position', 43 property: '-webkit-mask-position',
44 from: 'top 0px left 0px', 44 from: 'top 0px left 0px',
45 to: 'left 80px top 80px', 45 to: 'left 80px top 80px',
46 }, [ 46 }, [
47 {at: -0.25, is: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'}, 47 {at: -0.25, is: 'left -20px top -20px, left -20px top -20px, left -20px top -2 0px, left -20px top -20px'},
48 {at: 0, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, 48 {at: 0, is: 'left 0px top 0px, left 0px top 0px, left 0px top 0px, left 0px top 0px'},
49 {at: 0.25, is: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'}, 49 {at: 0.25, is: 'left 20px top 20px, left 20px top 20px, left 20px top 2 0px, left 20px top 20px'},
50 {at: 0.5, is: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'}, 50 {at: 0.5, is: 'left 40px top 40px, left 40px top 40px, left 40px top 4 0px, left 40px top 40px'},
51 {at: 0.75, is: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'}, 51 {at: 0.75, is: 'left 60px top 60px, left 60px top 60px, left 60px top 6 0px, left 60px top 60px'},
52 {at: 1, is: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'}, 52 {at: 1, is: 'left 80px top 80px, left 80px top 80px, left 80px top 8 0px, left 80px top 80px'},
53 {at: 1.25, is: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, 53 {at: 1.25, is: 'left 100px top 100px, left 100px top 100px, left 100px top 10 0px, left 100px top 100px'},
54 ]); 54 ]);
55 55
56 // Test mismatched numbers of position values. 56 // Test mismatched numbers of position values.
57 assertInterpolation({ 57 assertInterpolation({
58 property: '-webkit-mask-position', 58 property: '-webkit-mask-position',
59 from: '0px 0px, 80px 0px', 59 from: '0px 0px, 80px 0px',
60 to: '40px 40px, 80px 80px, 0px 80px', 60 to: '40px 40px, 80px 80px, 0px 80px',
61 }, [ 61 }, [
62 {at: -0.25, is: '-10px -10px, 80px -20px, 0px -20px, 90px -10px'}, 62 {at: -0.25, is: 'left -10px top -10px, left 80px top -20px, left 0px top -20px , left 90px top -10px'},
63 {at: 0, is: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'}, 63 {at: 0, is: 'left 0px top 0px, left 80px top 0px, left 0px top 0px , left 80px top 0px'},
64 {at: 0.25, is: ' 10px 10px, 80px 20px, 0px 20px, 70px 10px'}, 64 {at: 0.25, is: 'left 10px top 10px, left 80px top 20px, left 0px top 20px , left 70px top 10px'},
65 {at: 0.5, is: ' 20px 20px, 80px 40px, 0px 40px, 60px 20px'}, 65 {at: 0.5, is: 'left 20px top 20px, left 80px top 40px, left 0px top 40px , left 60px top 20px'},
66 {at: 0.75, is: ' 30px 30px, 80px 60px, 0px 60px, 50px 30px'}, 66 {at: 0.75, is: 'left 30px top 30px, left 80px top 60px, left 0px top 60px , left 50px top 30px'},
67 {at: 1, is: ' 40px 40px, 80px 80px, 0px 80px, 40px 40px'}, 67 {at: 1, is: 'left 40px top 40px, left 80px top 80px, left 0px top 80px , left 40px top 40px'},
68 {at: 1.25, is: ' 50px 50px, 80px 100px, 0px 100px, 30px 50px'}, 68 {at: 1.25, is: 'left 50px top 50px, left 80px top 100px, left 0px top 100px , left 30px top 50px'},
69 ]); 69 ]);
70 </script> 70 </script>
71 </body> 71 </body>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698