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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/animations/interpolation/offset-anchor-interpolation.html

Issue 2527303002: CSS Motion Path: offset-anchor should default to auto (Closed)
Patch Set: comments Created 4 years 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 | « no previous file | third_party/WebKit/LayoutTests/css3/motion-path/offset-anchor.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 .parent { 4 .parent {
5 offset-anchor: 30px 10px; 5 offset-anchor: 30px 10px;
6 } 6 }
7 .target { 7 .target {
8 offset-anchor: 10px 30px; 8 offset-anchor: 10px 30px;
9 } 9 }
10 </style> 10 </style>
11 <body> 11 <body>
12 <template id="target-template"> 12 <template id="target-template">
13 <div><div class="transformed"></div></div> 13 <div><div class="transformed"></div></div>
14 </template> 14 </template>
15 <script src="resources/interpolation-test.js"></script> 15 <script src="resources/interpolation-test.js"></script>
16 <script> 16 <script>
17 assertInterpolation({ 17 assertInterpolation({
18 property: 'offset-anchor', 18 property: 'offset-anchor',
19 from: neutralKeyframe, 19 from: neutralKeyframe,
20 to: '20px 20px', 20 to: '20px 20px',
21 }, [ 21 }, [
22 {at: -0.3, is: '7px 33px'}, 22 {at: -0.3, is: '7px 33px'},
23 {at: 0, is: '10px 30px'}, 23 {at: 0, is: '10px 30px'},
24 {at: 0.3, is: '13px 27px'}, 24 {at: 0.3, is: '13px 27px'},
25 {at: 0.6, is: '16px 24px'}, 25 {at: 0.6, is: '16px 24px'},
26 {at: 1, is: '20px 20px'}, 26 {at: 1, is: '20px 20px'},
27 {at: 1.5, is: '25px 15px'}, 27 {at: 1.5, is: '25px 15px'},
28 ]); 28 ]);
29 29
30 assertInterpolation({ 30 assertNoInterpolation({
31 property: 'offset-anchor', 31 property: 'offset-anchor',
32 from: 'initial', 32 from: 'initial',
33 to: '60% 40%', 33 to: '60% 40%',
34 }, [ 34 });
35 {at: -0.3, is: '47% 53%'},
36 {at: 0, is: '50% 50%'},
37 {at: 0.3, is: '53% 47%'},
38 {at: 0.6, is: '56% 44%'},
39 {at: 1, is: '60% 40%'},
40 {at: 1.5, is: '65% 35%'},
41 ]);
42 35
43 assertInterpolation({ 36 assertInterpolation({
44 property: 'offset-anchor', 37 property: 'offset-anchor',
45 from: 'inherit', 38 from: 'inherit',
46 to: '20px 20px', 39 to: '20px 20px',
47 }, [ 40 }, [
48 {at: -0.3, is: '33px 7px'}, 41 {at: -0.3, is: '33px 7px'},
49 {at: 0, is: '30px 10px'}, 42 {at: 0, is: '30px 10px'},
50 {at: 0.3, is: '27px 13px'}, 43 {at: 0.3, is: '27px 13px'},
51 {at: 0.6, is: '24px 16px'}, 44 {at: 0.6, is: '24px 16px'},
52 {at: 1, is: '20px 20px'}, 45 {at: 1, is: '20px 20px'},
53 {at: 1.5, is: '15px 25px'}, 46 {at: 1.5, is: '15px 25px'},
54 ]); 47 ]);
55 48
56 assertInterpolation({ 49 assertNoInterpolation({
57 property: 'offset-anchor', 50 property: 'offset-position',
58 from: 'unset', 51 from: 'unset',
59 to: '50% 10px', 52 to: '50% 10px',
60 }, [ 53 });
61 {at: -0.3, is: '50% calc(-3px + 65%)'},
62 {at: 0, is: '50% 50%'},
63 {at: 0.3, is: '50% calc(3px + 35%)'},
64 {at: 0.6, is: '50% calc(6px + 20%)'},
65 {at: 1, is: '50% 10px'},
66 {at: 1.5, is: '50% calc(15px - 25%)'},
67 ]);
68 54
69 assertInterpolation({ 55 assertInterpolation({
70 property: 'offset-anchor', 56 property: 'offset-anchor',
71 from: '0% 50%', 57 from: '0% 50%',
72 to: '100% 150%' 58 to: '100% 150%'
73 }, [ 59 }, [
74 {at: -0.3, is: '-30% 20%'}, 60 {at: -0.3, is: '-30% 20%'},
75 {at: 0, is: '0% 50%'}, 61 {at: 0, is: '0% 50%'},
76 {at: 0.3, is: '30% 80%'}, 62 {at: 0.3, is: '30% 80%'},
77 {at: 0.6, is: '60% 110%'}, 63 {at: 0.6, is: '60% 110%'},
78 {at: 1, is: '100% 150%'}, 64 {at: 1, is: '100% 150%'},
79 {at: 1.5, is: '150% 200%'} 65 {at: 1.5, is: '150% 200%'}
80 ]); 66 ]);
81 67
82 assertNoInterpolation({ 68 assertNoInterpolation({
83 property: 'offset-anchor', 69 property: 'offset-anchor',
84 from: 'auto', 70 from: 'auto',
85 to: '20px 20px', 71 to: '20px 20px',
86 }); 72 });
87 </script> 73 </script>
88 </body> 74 </body>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/css3/motion-path/offset-anchor.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698