Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / animations / composition / margin-right-composition.html
blob00762fa3d9e99fba5a3a6d40a1259d267688dafd
1 <!DOCTYPE html>
2 <meta charset="UTF-8">
3 <body>
4 <script src="../interpolation/resources/interpolation-test.js"></script>
5 <script>
6 assertComposition({
7 property: 'margin-right',
8 underlying: '50px',
9 addFrom: '100px',
10 addTo: '200px',
11 }, [
12 {at: -0.3, is: '120px'},
13 {at: 0, is: '150px'},
14 {at: 0.5, is: '200px'},
15 {at: 1, is: '250px'},
16 {at: 1.5, is: '300px'},
17 ]);
19 assertComposition({
20 property: 'margin-right',
21 underlying: '100px',
22 addFrom: '10px',
23 addTo: '2px',
24 }, [
25 {at: -0.5, is: '114px'},
26 {at: 0, is: '110px'},
27 {at: 0.5, is: '106px'},
28 {at: 1, is: '102px'},
29 {at: 1.5, is: '98px'},
30 ]);
32 assertComposition({
33 property: 'margin-right',
34 underlying: '10%',
35 addFrom: '100px',
36 addTo: '20%',
37 }, [
38 {at: -0.3, is: 'calc(130px + 4%)'},
39 {at: 0, is: 'calc(100px + 10%)'},
40 {at: 0.5, is: 'calc(50px + 20%)'},
41 {at: 1, is: '30%'},
42 {at: 1.5, is: 'calc(-50px + 40%)'},
43 ]);
45 assertComposition({
46 property: 'margin-right',
47 underlying: '50px',
48 addFrom: '100px',
49 replaceTo: '200px',
50 }, [
51 {at: -0.3, is: '135px'},
52 {at: 0, is: '150px'},
53 {at: 0.5, is: '175px'},
54 {at: 1, is: '200px'},
55 {at: 1.5, is: '225px'},
56 ]);
58 assertComposition({
59 property: 'margin-right',
60 underlying: '100px',
61 addFrom: '100px',
62 addTo: 'auto',
63 }, [
64 {at: -0.3, is: '200px'},
65 {at: 0, is: '200px'},
66 {at: 0.5, is: 'auto'},
67 {at: 1, is: 'auto'},
68 {at: 1.5, is: 'auto'},
69 ]);
70 </script>
71 </body>