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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/animations/interpolation/webkit-mask-size-interpolation.html

Issue 1689383002: Add additive animation support for CSS property background-size (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@_transformOriginInterpolationType
Patch Set: Rebased Created 4 years, 9 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
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/composition/background-size-composition.html ('k') | third_party/WebKit/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 .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
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>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/composition/background-size-composition.html ('k') | third_party/WebKit/LayoutTests/animations/interpolation/webkit-mask-size-interpolation-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698