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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/animations/interpolation/webkit-mask-size-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-position-interpolation.html ('k') | LayoutTests/animations/interpolation/webkit-mask-size-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 .parent {
5 width: 80px; 5 -webkit-mask-size: 30px;
6 height: 100px;
7 display: inline-block;
8 border: 2px solid black;
9 -webkit-mask-repeat: no-repeat;
10 -webkit-mask-image: url(../resources/stripes-100.png),
11 url(../resources/stripes-100.png),
12 url(../resources/blue-100.png),
13 url(../resources/green-100.png);
14 -webkit-mask-position: left top, right top, left bottom, right bottom;
15 } 6 }
16 */ 7 .target {
17 .wrapper {
18 border: 10px solid black;
19 width: 100px; 8 width: 100px;
20 height: 100px; 9 height: 100px;
21 display: inline-block; 10 display: inline-block;
22 margin-bottom: 10px; 11 background-color: black;
23 }
24 .wrapper:nth-child(2n) {
25 border-color: green;
26 }
27 .target {
28 background-color: blue;
29 -webkit-mask-repeat: no-repeat; 12 -webkit-mask-repeat: no-repeat;
30 -webkit-mask-image: url(../resources/blue-100.png), 13 -webkit-mask-image: url(../resources/blue-100.png),
31 url(../resources/green-100.png), 14 url(../resources/stripes-100.png),
32 url(../resources/stripes-100.png), 15 url(../resources/stripes-100.png),
33 url(../resources/stripes-100.png); 16 url(../resources/green-100.png);
34 -webkit-mask-position: left top, right top, left bottom, right bottom; 17 -webkit-mask-position: 20% 20%, 20% 80%, 80% 20%, 80% 80%;
35 height: 100%; 18 -webkit-mask-size: 10px;
19 margin-bottom: 100px;
20 }
21 .expected {
22 background-color: green;
23 margin-right: 100px;
36 } 24 }
37 </style> 25 </style>
38 <body> 26 <body>
39 <template id="target-template">
40 <div class="wrapper">
41 <div class="target"></div>
42 </div>
43 </template>
44 <script src="resources/interpolation-test.js"></script> 27 <script src="resources/interpolation-test.js"></script>
45 <script> 28 <script>
46 // Matched keywords in size value list. 29 assertInterpolation({
47 var from = '0px 0px, 0px 0px, contain, cover'; 30 property: '-webkit-mask-size',
48 var to = '20px 20px, 20px 20px, contain, cover'; 31 from: '',
32 to: '20px',
33 }, [
34 {at: -0.25, is: '7.5px, 7.5px, 7.5px, 7.5px'},
35 {at: 0, is: '10px, 10px, 10px, 10px'},
36 {at: 0.25, is: '12.5px, 12.5px, 12.5px, 12.5px'},
37 {at: 0.5, is: '15px, 15px, 15px, 15px'},
38 {at: 0.75, is: '17.5px, 17.5px, 17.5px, 17.5px'},
39 {at: 1, is: '20px, 20px, 20px, 20px'},
40 {at: 1.25, is: '22.5px, 22.5px, 22.5px, 22.5px'},
41 ]);
42
49 assertNoInterpolation({ 43 assertNoInterpolation({
50 property: '-webkit-mask-size', 44 property: '-webkit-mask-size',
51 from: from, 45 from: 'initial',
52 to: to, 46 to: '20px',
47 });
48
49 assertInterpolation({
50 property: '-webkit-mask-size',
51 from: 'inherit',
52 to: '20px',
53 }, [
54 {at: -0.25, is: '32.5px, 32.5px, 32.5px, 32.5px'},
55 {at: 0, is: '30px, 30px, 30px, 30px'},
56 {at: 0.25, is: '27.5px, 27.5px, 27.5px, 27.5px'},
57 {at: 0.5, is: '25px, 25px, 25px, 25px'},
58 {at: 0.75, is: '22.5px, 22.5px, 22.5px, 22.5px'},
59 {at: 1, is: '20px, 20px, 20px, 20px'},
60 {at: 1.25, is: '17.5px, 17.5px, 17.5px, 17.5px'},
61 ]);
62
63 assertNoInterpolation({
64 property: '-webkit-mask-size',
65 from: 'unset',
66 to: '20px',
67 });
68
69 // Matched keywords in size value list.
70 assertNoInterpolation({
71 property: '-webkit-mask-size',
72 from: '0px 0px, 0px 0px, contain, cover',
73 to: '20px 20px, 20px 20px, contain, cover',
53 }); 74 });
54 75
55 // Mismatched keywords in size value list. 76 // Mismatched keywords in size value list.
56 from = '0px 0px, 0px 0px, contain, cover';
57 to = '20px 20px, 20px 20px, cover, contain';
58 assertNoInterpolation({ 77 assertNoInterpolation({
59 property: '-webkit-mask-size', 78 property: '-webkit-mask-size',
60 from: from, 79 from: '0px 0px, 0px 0px, contain, cover',
61 to: to, 80 to: '20px 20px, 20px 20px, cover, contain',
62 }); 81 });
63 82
64 // Equal number of size values as mask images. 83 // Equal number of size values as mask images.
65 assertInterpolation({ 84 assertInterpolation({
66 property: '-webkit-mask-size', 85 property: '-webkit-mask-size',
67 from: '0px 0px, 0px 0px, 0px 0px, 0px 0px', 86 from: '0px 0px, 0px 0px, 0px 0px, 0px 0px',
68 to: '20px 20px, 40px 40px, 60px 60px, 100px 100px', 87 to: '20px 20px, 40px 40px, 60px 60px, 100px 100px',
69 }, [ 88 }, [
70 {at: -0.25, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, 89 {at: -0.25, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
71 {at: 0, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, 90 {at: 0, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'},
(...skipping 28 matching lines...) Expand all
100 {at: -0.25, is: ' 0px 0px, 80px 0px, 0px 0px, 90px 0px'}, 119 {at: -0.25, is: ' 0px 0px, 80px 0px, 0px 0px, 90px 0px'},
101 {at: 0, is: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'}, 120 {at: 0, is: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'},
102 {at: 0.25, is: '10px 10px, 80px 20px, 0px 20px, 70px 10px'}, 121 {at: 0.25, is: '10px 10px, 80px 20px, 0px 20px, 70px 10px'},
103 {at: 0.5, is: '20px 20px, 80px 40px, 0px 40px, 60px 20px'}, 122 {at: 0.5, is: '20px 20px, 80px 40px, 0px 40px, 60px 20px'},
104 {at: 0.75, is: '30px 30px, 80px 60px, 0px 60px, 50px 30px'}, 123 {at: 0.75, is: '30px 30px, 80px 60px, 0px 60px, 50px 30px'},
105 {at: 1, is: '40px 40px, 80px 80px, 0px 80px, 40px 40px'}, 124 {at: 1, is: '40px 40px, 80px 80px, 0px 80px, 40px 40px'},
106 {at: 1.25, is: '50px 50px, 80px 100px, 0px 100px, 30px 50px'}, 125 {at: 1.25, is: '50px 50px, 80px 100px, 0px 100px, 30px 50px'},
107 ]); 126 ]);
108 </script> 127 </script>
109 </body> 128 </body>
OLDNEW
« no previous file with comments | « LayoutTests/animations/interpolation/webkit-mask-position-interpolation.html ('k') | LayoutTests/animations/interpolation/webkit-mask-size-interpolation-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698