|
1 <!DOCTYPE HTML> |
|
2 <html> |
|
3 <!-- |
|
4 https://bugzilla.mozilla.org/show_bug.cgi?id=435441 |
|
5 --> |
|
6 <head> |
|
7 <title>Test for Bug 435441</title> |
|
8 <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> |
|
9 <script type="application/javascript" src="animation_utils.js"></script> |
|
10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> |
|
11 <style type="text/css"> |
|
12 |
|
13 p.transition { |
|
14 transition: margin-top 100s linear; |
|
15 } |
|
16 |
|
17 </style> |
|
18 </head> |
|
19 <body> |
|
20 <div id="display"> |
|
21 |
|
22 </div> |
|
23 <pre id="test"> |
|
24 <script type="application/javascript"> |
|
25 |
|
26 /** Test for transition step functions **/ |
|
27 |
|
28 var display = document.getElementById("display"); |
|
29 |
|
30 function run_test(tf, percent, value) |
|
31 { |
|
32 var p = document.createElement("p"); |
|
33 p.className = "transition"; |
|
34 p.style.marginTop = "0px"; |
|
35 // be this percent of the way through a 100s transition |
|
36 p.style.transitionDelay = (percent * -100) + "s"; |
|
37 p.style.transitionTimingFunction = tf; |
|
38 display.appendChild(p); |
|
39 var cs = getComputedStyle(p, ""); |
|
40 var flush1 = cs.marginTop; |
|
41 |
|
42 p.style.marginTop = "1000px"; |
|
43 var result = px_to_num(cs.marginTop) / 1000 |
|
44 |
|
45 is(result, value, 100 * percent + "% of the way through " + tf); |
|
46 |
|
47 display.removeChild(p); |
|
48 } |
|
49 |
|
50 run_test("step-start", 0, 0); |
|
51 run_test("step-start", 0.001, 1); |
|
52 run_test("step-start", 0.999, 1); |
|
53 run_test("step-start", 1, 1); |
|
54 run_test("step-end", 0, 0); |
|
55 run_test("step-end", 0.001, 0); |
|
56 run_test("step-end", 0.999, 0); |
|
57 run_test("step-end", 1, 1); |
|
58 |
|
59 run_test("steps(2)", 0.00, 0.0); |
|
60 run_test("steps(2)", 0.49, 0.0); |
|
61 run_test("steps(2)", 0.50, 0.5); |
|
62 run_test("steps(2)", 0.99, 0.5); |
|
63 run_test("steps(2)", 1.00, 1.0); |
|
64 |
|
65 run_test("steps(2, end)", 0.00, 0.0); |
|
66 run_test("steps(2, end)", 0.49, 0.0); |
|
67 run_test("steps(2, end)", 0.50, 0.5); |
|
68 run_test("steps(2, end)", 0.99, 0.5); |
|
69 run_test("steps(2, end)", 1.00, 1.0); |
|
70 |
|
71 run_test("steps(2, start)", 0.00, 0.0); |
|
72 run_test("steps(2, start)", 0.01, 0.5); |
|
73 run_test("steps(2, start)", 0.50, 0.5); |
|
74 run_test("steps(2, start)", 0.51, 1.0); |
|
75 run_test("steps(2, start)", 1.00, 1.0); |
|
76 |
|
77 run_test("steps(8,end)", 0.00, 0.0); |
|
78 run_test("steps(8,end)", 0.10, 0.0); |
|
79 run_test("steps(8,end)", 0.20, 0.125); |
|
80 run_test("steps(8,end)", 0.30, 0.25); |
|
81 run_test("steps(8,end)", 0.40, 0.375); |
|
82 run_test("steps(8,end)", 0.49, 0.375); |
|
83 run_test("steps(8,end)", 0.50, 0.5); |
|
84 run_test("steps(8,end)", 0.60, 0.5); |
|
85 run_test("steps(8,end)", 0.70, 0.625); |
|
86 run_test("steps(8,end)", 0.80, 0.75); |
|
87 run_test("steps(8,end)", 0.90, 0.875); |
|
88 run_test("steps(8,end)", 1.00, 1.0); |
|
89 |
|
90 </script> |
|
91 </pre> |
|
92 </body> |
|
93 </html> |