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

Side by Side Diff: LayoutTests/animations/interpolation/svg-stroke-dasharray-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
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <meta charset="UTF-8"> 2 <meta charset="UTF-8">
3 <style> 3 <style>
4 .container {
5 display: inline-block;
6 }
7 .parent {
8 stroke-dasharray: 30 10;
9 }
4 .target { 10 .target {
5 font-size: 16px; 11 font-size: 16px;
12 stroke: black;
6 stroke-width: 10px; 13 stroke-width: 10px;
7 stroke: black; 14 stroke-dasharray: 10 30;
8 } 15 }
9 .expected { 16 .expected {
10 stroke: green; 17 stroke: green;
11 } 18 }
12 </style> 19 </style>
13 <body> 20 <body>
14 <template id="target-template"> 21 <template id="target-template">
15 <svg height="200" width="10"> 22 <svg height="400" width="5">
16 <path d="M5,0 l0,400" class="target"> 23 <path d="M0,0 l0,400" class="target">
17 </svg> 24 </svg>
18 </template> 25 </template>
19 <script src="resources/interpolation-test.js"></script> 26 <script src="resources/interpolation-test.js"></script>
20 <script> 27 <script>
28 assertInterpolation({
29 property: 'stroke-dasharray',
30 from: '',
31 to: '20 20',
32 }, [
33 {at: -0.6, is: '4px, 36px'},
34 {at: -0.4, is: '6px, 34px'},
35 {at: -0.2, is: '8px, 32px'},
36 {at: 0, is: '10px, 30px'},
37 {at: 0.2, is: '12px, 28px'},
38 {at: 0.4, is: '14px, 26px'},
39 {at: 0.6, is: '16px, 24px'},
40 {at: 0.8, is: '18px, 22px'},
41 {at: 1, is: '20px, 20px'},
42 {at: 1.2, is: '22px, 18px'},
43 ]);
44
45 assertInterpolation({
46 property: 'stroke-dasharray',
47 from: 'initial',
48 to: '20 20',
49 }, [
50 {at: -0.6, is: '0px, 0px'},
51 {at: -0.4, is: '0px, 0px'},
52 {at: -0.2, is: '0px, 0px'},
53 {at: 0, is: 'none'},
54 {at: 0.2, is: '4px, 4px'},
55 {at: 0.4, is: '8px, 8px'},
56 {at: 0.6, is: '12px, 12px'},
57 {at: 0.8, is: '16px, 16px'},
58 {at: 1, is: '20px, 20px'},
59 {at: 1.2, is: '24px, 24px'},
60 ]);
61
62 assertInterpolation({
63 property: 'stroke-dasharray',
64 from: 'inherit',
65 to: '20 20',
66 }, [
67 {at: -0.6, is: '36px, 4px'},
68 {at: -0.4, is: '34px, 6px'},
69 {at: -0.2, is: '32px, 8px'},
70 {at: 0, is: '30px, 10px'},
71 {at: 0.2, is: '28px, 12px'},
72 {at: 0.4, is: '26px, 14px'},
73 {at: 0.6, is: '24px, 16px'},
74 {at: 0.8, is: '22px, 18px'},
75 {at: 1, is: '20px, 20px'},
76 {at: 1.2, is: '18px, 22px'},
77 ]);
78
79 assertInterpolation({
80 property: 'stroke-dasharray',
81 from: 'unset',
82 to: '20 20',
83 }, [
84 {at: -0.6, is: '36px, 4px'},
85 {at: -0.4, is: '34px, 6px'},
86 {at: -0.2, is: '32px, 8px'},
87 {at: 0, is: '30px, 10px'},
88 {at: 0.2, is: '28px, 12px'},
89 {at: 0.4, is: '26px, 14px'},
90 {at: 0.6, is: '24px, 16px'},
91 {at: 0.8, is: '22px, 18px'},
92 {at: 1, is: '20px, 20px'},
93 {at: 1.2, is: '18px, 22px'},
94 ]);
95
21 // Basic case 96 // Basic case
22 assertInterpolation({ 97 assertInterpolation({
23 property: 'stroke-dasharray', 98 property: 'stroke-dasharray',
24 from: '5 10', 99 from: '5 10',
25 to: '15 20' 100 to: '15 20'
26 }, [ 101 }, [
27 {at: -0.6, is: ' 0 4'}, // Values must be non-negative. 102 {at: -0.6, is: ' 0 4'}, // Values must be non-negative.
28 {at: -0.4, is: ' 1 6'}, 103 {at: -0.4, is: ' 1 6'},
29 {at: -0.2, is: ' 3 8'}, 104 {at: -0.2, is: ' 3 8'},
30 {at: 0, is: ' 5 10'}, 105 {at: 0, is: ' 5 10'},
(...skipping 221 matching lines...) Expand 10 before | Expand all | Expand 10 after
252 {at: 0, is: '10em 20px 30em 40px 50em 60px 10em 20px 30em 40px 50em 60px'}, 327 {at: 0, is: '10em 20px 30em 40px 50em 60px 10em 20px 30em 40px 50em 60px'},
253 {at: 0.2, is: '28em 56px 84em 112px 60em 88px 68em 96px 44em 72px 100em 128px '}, 328 {at: 0.2, is: '28em 56px 84em 112px 60em 88px 68em 96px 44em 72px 100em 128px '},
254 {at: 0.4, is: '46em 92px 138em 184px 70em 116px 126em 172px 58em 104px 150em 196px'}, 329 {at: 0.4, is: '46em 92px 138em 184px 70em 116px 126em 172px 58em 104px 150em 196px'},
255 {at: 0.6, is: '64em 128px 192em 256px 80em 144px 184em 248px 72em 136px 200em 264px'}, 330 {at: 0.6, is: '64em 128px 192em 256px 80em 144px 184em 248px 72em 136px 200em 264px'},
256 {at: 0.8, is: '82em 164px 246em 328px 90em 172px 242em 324px 86em 168px 250em 332px'}, 331 {at: 0.8, is: '82em 164px 246em 328px 90em 172px 242em 324px 86em 168px 250em 332px'},
257 {at: 1, is: '100em 200px 300em 400px 100em 200px 300em 400px 100em 200px 30 0em 400px'}, 332 {at: 1, is: '100em 200px 300em 400px 100em 200px 300em 400px 100em 200px 30 0em 400px'},
258 {at: 1.2, is: '118em 236px 354em 472px 110em 228px 358em 476px 114em 232px 35 0em 468px'}, 333 {at: 1.2, is: '118em 236px 354em 472px 110em 228px 358em 476px 114em 232px 35 0em 468px'},
259 ]); 334 ]);
260 </script> 335 </script>
261 </body> 336 </body>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698