OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <meta charset="UTF-8"> | 2 <meta charset="UTF-8"> |
3 <style> | 3 <style> |
4 .parent { | 4 .parent { |
5 -webkit-mask-size: 30px; | 5 -webkit-mask-size: 300px 300px; |
6 } | 6 } |
7 .target { | 7 .target { |
8 width: 100px; | 8 width: 100px; |
9 height: 100px; | 9 height: 100px; |
10 display: inline-block; | 10 display: inline-block; |
11 background-color: black; | 11 background-color: black; |
12 -webkit-mask-repeat: no-repeat; | 12 -webkit-mask-repeat: no-repeat; |
13 -webkit-mask-image: url(../resources/blue-100.png), | 13 -webkit-mask-image: url(../resources/blue-100.png), |
14 url(../resources/stripes-100.png), | 14 url(../resources/stripes-100.png), |
15 url(../resources/stripes-100.png), | 15 url(../resources/stripes-100.png), |
16 url(../resources/green-100.png); | 16 url(../resources/green-100.png); |
17 -webkit-mask-position: 20% 20%, 20% 80%, 80% 20%, 80% 80%; | 17 -webkit-mask-position: 20% 20%, 20% 80%, 80% 20%, 80% 80%; |
18 -webkit-mask-size: 10px; | 18 -webkit-mask-size: 100px 100px; |
19 margin-bottom: 100px; | 19 margin-bottom: 100px; |
20 } | 20 } |
21 .expected { | 21 .expected { |
22 background-color: green; | 22 background-color: green; |
23 margin-right: 100px; | 23 margin-right: 100px; |
24 } | 24 } |
25 </style> | 25 </style> |
26 <body> | 26 <body> |
27 <script src="resources/interpolation-test.js"></script> | 27 <script src="resources/interpolation-test.js"></script> |
28 <script> | 28 <script> |
29 assertInterpolation({ | 29 assertInterpolation({ |
30 property: '-webkit-mask-size', | 30 property: '-webkit-mask-size', |
31 from: '', | 31 from: '', |
32 to: '20px', | 32 to: '200px 250px', |
33 }, [ | 33 }, [ |
34 {at: -0.25, is: '7.5px, 7.5px, 7.5px, 7.5px'}, | 34 {at: -0.25, is: '75px 62.5px, 75px 62.5px, 75px 62.5px, 75px 62.5px'}, |
35 {at: 0, is: '10px, 10px, 10px, 10px'}, | 35 {at: 0, is: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, |
36 {at: 0.25, is: '12.5px, 12.5px, 12.5px, 12.5px'}, | 36 {at: 0.25, is: '125px 137.5px, 125px 137.5px, 125px 137.5px, 125px 137.5px'}, |
37 {at: 0.5, is: '15px, 15px, 15px, 15px'}, | 37 {at: 0.5, is: '150px 175px, 150px 175px, 150px 175px, 150px 175px'}, |
38 {at: 0.75, is: '17.5px, 17.5px, 17.5px, 17.5px'}, | 38 {at: 0.75, is: '175px 212.5px, 175px 212.5px, 175px 212.5px, 175px 212.5px'}, |
39 {at: 1, is: '20px, 20px, 20px, 20px'}, | 39 {at: 1, is: '200px 250px, 200px 250px, 200px 250px, 200px 250px'}, |
40 {at: 1.25, is: '22.5px, 22.5px, 22.5px, 22.5px'}, | 40 {at: 1.25, is: '225px 287.5px, 225px 287.5px, 225px 287.5px, 225px 287.5px'}, |
41 ]); | 41 ]); |
42 | 42 |
43 assertNoInterpolation({ | 43 assertNoInterpolation({ |
44 property: '-webkit-mask-size', | 44 property: '-webkit-mask-size', |
45 from: 'initial', | 45 from: 'initial', |
46 to: '20px', | 46 to: '200px 250px', |
47 }); | 47 }); |
48 | 48 |
49 assertInterpolation({ | 49 assertInterpolation({ |
50 property: '-webkit-mask-size', | 50 property: '-webkit-mask-size', |
51 from: 'inherit', | 51 from: 'inherit', |
52 to: '20px', | 52 to: '200px 250px', |
53 }, [ | 53 }, [ |
54 {at: -0.25, is: '32.5px, 32.5px, 32.5px, 32.5px'}, | 54 {at: -0.25, is: '325px 312.5px, 325px 312.5px, 325px 312.5px, 325px 312.5px'}, |
55 {at: 0, is: '30px, 30px, 30px, 30px'}, | 55 {at: 0, is: '300px 300px, 300px 300px, 300px 300px, 300px 300px'}, |
56 {at: 0.25, is: '27.5px, 27.5px, 27.5px, 27.5px'}, | 56 {at: 0.25, is: '275px 287.5px, 275px 287.5px, 275px 287.5px, 275px 287.5px'}, |
57 {at: 0.5, is: '25px, 25px, 25px, 25px'}, | 57 {at: 0.5, is: '250px 275px, 250px 275px, 250px 275px, 250px 275px'}, |
58 {at: 0.75, is: '22.5px, 22.5px, 22.5px, 22.5px'}, | 58 {at: 0.75, is: '225px 262.5px, 225px 262.5px, 225px 262.5px, 225px 262.5px'}, |
59 {at: 1, is: '20px, 20px, 20px, 20px'}, | 59 {at: 1, is: '200px 250px, 200px 250px, 200px 250px, 200px 250px'}, |
60 {at: 1.25, is: '17.5px, 17.5px, 17.5px, 17.5px'}, | 60 {at: 1.25, is: '175px 237.5px, 175px 237.5px, 175px 237.5px, 175px 237.5px'}, |
61 ]); | 61 ]); |
62 | 62 |
63 assertNoInterpolation({ | 63 assertNoInterpolation({ |
64 property: '-webkit-mask-size', | 64 property: '-webkit-mask-size', |
65 from: 'unset', | 65 from: 'unset', |
66 to: '20px', | 66 to: '200px 250px', |
67 }); | 67 }); |
68 | 68 |
69 // Matched keywords in size value list. | 69 // Matched keywords in size value list. |
70 assertNoInterpolation({ | 70 assertNoInterpolation({ |
71 property: '-webkit-mask-size', | 71 property: '-webkit-mask-size', |
72 from: '0px 0px, 0px 0px, contain, cover', | 72 from: '0px 0px, 0px 0px, contain, cover', |
73 to: '20px 20px, 20px 20px, contain, cover', | 73 to: '20px 20px, 20px 20px, contain, cover', |
74 }); | 74 }); |
75 | 75 |
76 // Mismatched keywords in size value list. | 76 // Mismatched keywords in size value list. |
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
119 {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'}, |
120 {at: 0, is: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'}, | 120 {at: 0, is: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'}, |
121 {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'}, |
122 {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'}, |
123 {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'}, |
124 {at: 1, is: '40px 40px, 80px 80px, 0px 80px, 40px 40px'}, | 124 {at: 1, is: '40px 40px, 80px 80px, 0px 80px, 40px 40px'}, |
125 {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'}, |
126 ]); | 126 ]); |
127 </script> | 127 </script> |
128 </body> | 128 </body> |
OLD | NEW |