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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/animations/interpolation/webkit-mask-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/webkit-mask-image-interpolation-expected.txt ('k') | LayoutTests/animations/interpolation/webkit-mask-size-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 .container { 4 .container {
5 display: inline-block; 5 display: inline-block;
6 border: 2px solid black; 6 border: 2px solid black;
7 } 7 }
8 .parent {
9 -webkit-mask-position: 30px 10px;
10 }
8 .target { 11 .target {
9 width: 120px; 12 width: 120px;
10 height: 120px; 13 height: 120px;
11 background-image: url(../resources/stripes-100.png), url(../resources/blue-100 .png); 14 background-image: url(../resources/stripes-100.png), url(../resources/blue-100 .png);
12 -webkit-mask-image: radial-gradient(20px circle at 20px 20px, black 18px, tran sparent), 15 -webkit-mask-image: radial-gradient(20px circle at 20px 20px, black 18px, tran sparent),
13 radial-gradient(20px circle at 20px 20px, black 18px, tran sparent), 16 radial-gradient(20px circle at 20px 20px, black 18px, tran sparent),
14 radial-gradient(20px circle at 20px 20px, black 18px, tran sparent), 17 radial-gradient(20px circle at 20px 20px, black 18px, tran sparent),
15 radial-gradient(20px circle at 20px 20px, black 18px, tran sparent); 18 radial-gradient(20px circle at 20px 20px, black 18px, tran sparent);
19 -webkit-mask-position: 10px 30px;
16 } 20 }
17 </style> 21 </style>
18 <body> 22 <body>
19 <template id="target-template"> 23 <template id="target-template">
20 <div class="container"> 24 <div class="container">
21 <div class="target"></div> 25 <div class="target"></div>
22 </div> 26 </div>
23 </template> 27 </template>
24 <script src="resources/interpolation-test.js"></script> 28 <script src="resources/interpolation-test.js"></script>
25 <script> 29 <script>
30 // neutral
31 assertInterpolation({
32 property: '-webkit-mask-position',
33 from: '',
34 to: '20px 20px',
35 }, [
36 {at: -0.25, is: '7.5px 32.5px, 7.5px 32.5px, 7.5px 32.5px, 7.5px 32.5px'},
37 {at: 0, is: '10px 30px, 10px 30px, 10px 30px, 10px 30px'},
38 {at: 0.25, is: '12.5px 27.5px, 12.5px 27.5px, 12.5px 27.5px, 12.5px 27.5px'},
39 {at: 0.5, is: '15px 25px, 15px 25px, 15px 25px, 15px 25px'},
40 {at: 0.75, is: '17.5px 22.5px, 17.5px 22.5px, 17.5px 22.5px, 17.5px 22.5px'},
41 {at: 1, is: '20px 20px, 20px 20px, 20px 20px, 20px 20px'},
42 {at: 1.25, is: '22.5px 17.5px, 22.5px 17.5px, 22.5px 17.5px, 22.5px 17.5px'},
43 ]);
44
45 // initial
46 assertInterpolation({
47 property: '-webkit-mask-position',
48 from: 'initial',
49 to: '20px 20px',
50 }, [
51 {at: -0.25, is: '-5px -5px, -5px -5px, -5px -5px, -5px -5px'},
52 {at: 0, is: '0% 0%, 0% 0%, 0% 0%, 0% 0%'},
53 {at: 0.25, is: '5px 5px, 5px 5px, 5px 5px, 5px 5px'},
54 {at: 0.5, is: '10px 10px, 10px 10px, 10px 10px, 10px 10px'},
55 {at: 0.75, is: '15px 15px, 15px 15px, 15px 15px, 15px 15px'},
56 {at: 1, is: '20px 20px, 20px 20px, 20px 20px, 20px 20px'},
57 {at: 1.25, is: '25px 25px, 25px 25px, 25px 25px, 25px 25px'},
58 ]);
59
60 // inherit
61 assertInterpolation({
62 property: '-webkit-mask-position',
63 from: 'inherit',
64 to: '20px 20px',
65 }, [
66 {at: -0.25, is: '32.5px 7.5px, 32.5px 7.5px, 32.5px 7.5px, 32.5px 7.5px'},
67 {at: 0, is: '30px 10px, 30px 10px, 30px 10px, 30px 10px'},
68 {at: 0.25, is: '27.5px 12.5px, 27.5px 12.5px, 27.5px 12.5px, 27.5px 12.5px'},
69 {at: 0.5, is: '25px 15px, 25px 15px, 25px 15px, 25px 15px'},
70 {at: 0.75, is: '22.5px 17.5px, 22.5px 17.5px, 22.5px 17.5px, 22.5px 17.5px'},
71 {at: 1, is: '20px 20px, 20px 20px, 20px 20px, 20px 20px'},
72 {at: 1.25, is: '17.5px 22.5px, 17.5px 22.5px, 17.5px 22.5px, 17.5px 22.5px'},
73 ]);
74
75 // unset
76 assertInterpolation({
77 property: '-webkit-mask-position',
78 from: 'unset',
79 to: '20px 20px',
80 }, [
81 {at: -0.25, is: '-5px -5px, -5px -5px, -5px -5px, -5px -5px'},
82 {at: 0, is: '0% 0%, 0% 0%, 0% 0%, 0% 0%'},
83 {at: 0.25, is: '5px 5px, 5px 5px, 5px 5px, 5px 5px'},
84 {at: 0.5, is: '10px 10px, 10px 10px, 10px 10px, 10px 10px'},
85 {at: 0.75, is: '15px 15px, 15px 15px, 15px 15px, 15px 15px'},
86 {at: 1, is: '20px 20px, 20px 20px, 20px 20px, 20px 20px'},
87 {at: 1.25, is: '25px 25px, 25px 25px, 25px 25px, 25px 25px'},
88 ]);
89
26 // Test equal number of position values as background images. 90 // Test equal number of position values as background images.
27 assertInterpolation({ 91 assertInterpolation({
28 property: '-webkit-mask-position', 92 property: '-webkit-mask-position',
29 from: '0px 0px, 0px 0px, 0px 0px, 0px 0px', 93 from: '0px 0px, 0px 0px, 0px 0px, 0px 0px',
30 to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', 94 to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
31 }, [ 95 }, [
32 {at: -0.25, is: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'}, 96 {at: -0.25, is: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'},
33 {at: 0, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, 97 {at: 0, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
34 {at: 0.25, is: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'}, 98 {at: 0.25, is: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'},
35 {at: 0.5, is: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'}, 99 {at: 0.5, is: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'},
(...skipping 26 matching lines...) Expand all
62 {at: -0.25, is: '-10px -10px, 80px -20px, 0px -20px, 90px -10px'}, 126 {at: -0.25, is: '-10px -10px, 80px -20px, 0px -20px, 90px -10px'},
63 {at: 0, is: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'}, 127 {at: 0, is: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'},
64 {at: 0.25, is: ' 10px 10px, 80px 20px, 0px 20px, 70px 10px'}, 128 {at: 0.25, is: ' 10px 10px, 80px 20px, 0px 20px, 70px 10px'},
65 {at: 0.5, is: ' 20px 20px, 80px 40px, 0px 40px, 60px 20px'}, 129 {at: 0.5, is: ' 20px 20px, 80px 40px, 0px 40px, 60px 20px'},
66 {at: 0.75, is: ' 30px 30px, 80px 60px, 0px 60px, 50px 30px'}, 130 {at: 0.75, is: ' 30px 30px, 80px 60px, 0px 60px, 50px 30px'},
67 {at: 1, is: ' 40px 40px, 80px 80px, 0px 80px, 40px 40px'}, 131 {at: 1, is: ' 40px 40px, 80px 80px, 0px 80px, 40px 40px'},
68 {at: 1.25, is: ' 50px 50px, 80px 100px, 0px 100px, 30px 50px'}, 132 {at: 1.25, is: ' 50px 50px, 80px 100px, 0px 100px, 30px 50px'},
69 ]); 133 ]);
70 </script> 134 </script>
71 </body> 135 </body>
OLDNEW
« no previous file with comments | « LayoutTests/animations/interpolation/webkit-mask-image-interpolation-expected.txt ('k') | LayoutTests/animations/interpolation/webkit-mask-size-interpolation.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698