OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <meta charset="UTF-8"> | |
3 <style> | |
4 .target { | |
5 width: 120px; | |
6 height: 120px; | |
7 display: inline-block; | |
8 background-image: url(), url(); | |
9 } | |
10 </style> | |
11 <body> | |
12 <script src="../interpolation/resources/interpolation-test.js"></script> | |
13 <script> | |
14 assertComposition({ | |
15 property: 'background-position', | |
16 underlying: '40px 140px', | |
17 addFrom: '60px 160px', | |
18 addTo: '160px 260px', | |
19 }, [ | |
20 {at: -0.25, is: '75px 275px, 75px 275px'}, | |
21 {at: 0, is: '100px 300px, 100px 300px'}, | |
22 {at: 0.25, is: '125px 325px, 125px 325px'}, | |
23 {at: 0.5, is: '150px 350px, 150px 350px'}, | |
24 {at: 0.75, is: '175px 375px, 175px 375px'}, | |
25 {at: 1, is: '200px 400px, 200px 400px'}, | |
26 {at: 1.25, is: '225px 425px, 225px 425px'}, | |
27 ]); | |
28 | |
29 assertComposition({ | |
30 property: 'background-position', | |
31 underlying: 'top 20% left 40%', | |
32 addFrom: 'left 60% top 80%', | |
33 addTo: 'right 80% bottom 40%', | |
34 }, [ | |
35 {at: -0.25, is: '110% 105%, 110% 105%'}, | |
36 {at: 0, is: '100% 100%, 100% 100%'}, | |
37 {at: 0.25, is: '90% 95%, 90% 95%'}, | |
38 {at: 0.5, is: '80% 90%, 80% 90%'}, | |
39 {at: 0.75, is: '70% 85%, 70% 85%'}, | |
40 {at: 1, is: '60% 80%, 60% 80%'}, | |
41 {at: 1.25, is: '50% 75%, 50% 75%'}, | |
42 ]); | |
43 | |
44 assertComposition({ | |
45 property: 'background-position', | |
46 underlying: 'top 20% left 40%', | |
47 addFrom: 'left 60% top 80%, top 180% left 160%', | |
48 addTo: 'right 80% bottom 40%', | |
49 }, [ | |
50 {at: -0.25, is: '110% 105%, 235% 230%'}, | |
51 {at: 0, is: '100% 100%, 200% 200%'}, | |
52 {at: 0.25, is: '90% 95%, 165% 170%'}, | |
53 {at: 0.5, is: '80% 90%, 130% 140%'}, | |
54 {at: 0.75, is: '70% 85%, 95% 110%'}, | |
55 {at: 1, is: '60% 80%, 60% 80%'}, | |
56 {at: 1.25, is: '50% 75%, 25% 50%'}, | |
57 ]); | |
58 | |
59 assertComposition({ | |
60 property: 'background-position', | |
61 underlying: '40px 140px', | |
62 replaceFrom: '100px 200px', | |
63 addTo: '160px 260px', | |
64 }, [ | |
65 {at: -0.25, is: '75px 150px, 75px 150px'}, | |
66 {at: 0, is: '100px 200px, 100px 200px'}, | |
67 {at: 0.25, is: '125px 250px, 125px 250px'}, | |
68 {at: 0.5, is: '150px 300px, 150px 300px'}, | |
69 {at: 0.75, is: '175px 350px, 175px 350px'}, | |
70 {at: 1, is: '200px 400px, 200px 400px'}, | |
71 {at: 1.25, is: '225px 450px, 225px 450px'}, | |
72 ]); | |
73 | |
74 assertComposition({ | |
75 property: 'background-position', | |
76 underlying: '40px 140px', | |
77 addFrom: '60px 160px', | |
78 replaceTo: '200px 400px', | |
79 }, [ | |
80 {at: -0.25, is: '75px 275px, 75px 275px'}, | |
81 {at: 0, is: '100px 300px, 100px 300px'}, | |
82 {at: 0.25, is: '125px 325px, 125px 325px'}, | |
83 {at: 0.5, is: '150px 350px, 150px 350px'}, | |
84 {at: 0.75, is: '175px 375px, 175px 375px'}, | |
85 {at: 1, is: '200px 400px, 200px 400px'}, | |
86 {at: 1.25, is: '225px 425px, 225px 425px'}, | |
87 ]); | |
88 </script> | |
89 </body> | |
OLD | NEW |