transition-duration-001.html (3050B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Transitions Test: Parsing transition-duration</title> 6 <meta name="assert" content="Test checks that transition-duration values are parsed properly"> 7 <link rel="help" title="2.2. The 'transition-duration' Property" href="http://www.w3.org/TR/css3-transitions/#transition-duration-property"> 8 <link rel="help" title="CSS Values and Units Module Level 3 - 6.2. Times: the ‘<time>’ type and ‘s’, ‘ms’ units" href="http://www.w3.org/TR/css3-values/#time"> 9 <link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/"> 10 <meta name="flags" content="dom"> 11 12 <script src="/resources/testharness.js" type="text/javascript"></script> 13 <script src="/resources/testharnessreport.js" type="text/javascript"></script> 14 15 <script src="./support/vendorPrefix.js" type="text/javascript"></script> 16 <script src="./support/helper.js" type="text/javascript"></script> 17 </head> 18 <body> 19 <!-- required by testharnessreport.js --> 20 <div id="log"></div> 21 <!-- elements used for testing --> 22 <div id="container"> 23 <div id="transition"></div> 24 </div> 25 26 <script> 27 var transition = document.getElementById('transition'); 28 // <time> [, <time>]* 29 var values = { 30 // seconds 31 '10.2s': '10.2s', 32 '1s': '1s', 33 '0.1s': '0.1s', 34 '0.01s': '0.01s', 35 '0.001s': '0.001s', 36 '0.009s': '0.009s', 37 '0s': '0s', 38 '.0s': '0s', 39 '0.0s': '0s', 40 '.3s': '0.3s', 41 '-5s' : '0s', 42 // milliseconds 43 '10200ms': '10.2s', 44 '1000ms': '1s', 45 '100ms': '0.1s', 46 '10ms': '0.01s', 47 '9ms': '0.009s', 48 '1ms': '0.001s', 49 '0ms': '0s', 50 '-500ms' : '0s', 51 // combination 52 '1s, 0.1s, 10ms': '1s, 0.1s, 0.01s', 53 // invalid 54 'foobar': '0s' 55 }; 56 57 // these tests are supposed to fail and 58 // possibly make the engine issue a parser warning 59 var invalidTests = { 60 '-5s': true, 61 '-500ms': true, 62 'foobar': true 63 }; 64 65 for (var key in values) { 66 if (Object.prototype.hasOwnProperty.call(values, key)) { 67 test(function() { 68 setStyle('#transition', { 69 'transition-duration': key 70 }); 71 var result = computedStyle(transition, 'transition-duration'); 72 assert_equals(result, values[key], "Expected computed value"); 73 }, "parse '" + key + "'"); 74 } 75 } 76 </script> 77 </body> 78 </html>