test_transitions_step_functions.html (3878B)
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 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, 1); 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.5); 72 run_test("steps(2, start)", 0.49, 0.5); 73 run_test("steps(2, start)", 0.50, 1.0); 74 run_test("steps(2, start)", 0.99, 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 // steps(_, jump-*) 91 run_test("steps(2, jump-start)", 0.00, 0.5); 92 run_test("steps(2, jump-start)", 0.49, 0.5); 93 run_test("steps(2, jump-start)", 0.50, 1.0); 94 run_test("steps(2, jump-start)", 0.99, 1.0); 95 run_test("steps(2, jump-start)", 1.00, 1.0); 96 97 run_test("steps(2, jump-end)", 0.00, 0.0); 98 run_test("steps(2, jump-end)", 0.49, 0.0); 99 run_test("steps(2, jump-end)", 0.50, 0.5); 100 run_test("steps(2, jump-end)", 0.99, 0.5); 101 run_test("steps(2, jump-end)", 1.00, 1.0); 102 103 run_test("steps(1, jump-both)", 0.00, 0.5); 104 run_test("steps(1, jump-both)", 0.10, 0.5); 105 run_test("steps(1, jump-both)", 0.99, 0.5); 106 run_test("steps(1, jump-both)", 1.00, 1.0); 107 108 run_test("steps(3, jump-both)", 0.00, 0.25); 109 run_test("steps(3, jump-both)", 0.33, 0.25); 110 run_test("steps(3, jump-both)", 0.34, 0.5); 111 run_test("steps(3, jump-both)", 0.66, 0.5); 112 run_test("steps(3, jump-both)", 0.67, 0.75); 113 run_test("steps(3, jump-both)", 0.99, 0.75); 114 run_test("steps(3, jump-both)", 1.00, 1.0); 115 116 run_test("steps(2, jump-none)", 0.00, 0.0); 117 run_test("steps(2, jump-none)", 0.49, 0.0); 118 run_test("steps(2, jump-none)", 0.50, 1.0); 119 run_test("steps(2, jump-none)", 1.00, 1.0); 120 121 run_test("steps(3, jump-none)", 0.00, 0.0); 122 run_test("steps(3, jump-none)", 0.33, 0.0); 123 run_test("steps(3, jump-none)", 0.34, 0.5); 124 run_test("steps(3, jump-none)", 0.66, 0.5); 125 run_test("steps(3, jump-none)", 0.67, 1.0); 126 run_test("steps(3, jump-none)", 1.00, 1.0); 127 128 </script> 129 </pre> 130 </body> 131 </html>