transition-delay-001.html (3003B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Transitions Test: Parsing transition-delay</title> 6 <meta name="assert" content="Test checks that transition-delay values are parsed properly"> 7 <link rel="help" title="2.4. The 'transition-delay' Property" href="http://www.w3.org/TR/css3-transitions/#transition-delay-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 '.0s': '0s', 40 '0.0s': '0s', 41 '.3s': '0.3s', 42 '-5s' : '-5s', 43 // milliseconds 44 '10200ms': '10.2s', 45 '1000ms': '1s', 46 '100ms': '0.1s', 47 '10ms': '0.01s', 48 '9ms': '0.009s', 49 '1ms': '0.001s', 50 '0ms': '0s', 51 '-500ms' : '-0.5s', 52 // combination 53 '1s, 0.1s, 10ms': '1s, 0.1s, 0.01s', 54 // invalid 55 'foobar': '0s' 56 }; 57 58 // these tests are supposed to fail and 59 // possibly make the engine issue a parser warning 60 var invalidTests = { 61 'foobar': true 62 }; 63 64 for (var key in values) { 65 if (Object.prototype.hasOwnProperty.call(values, key)) { 66 test(function() { 67 setStyle('#transition', { 68 'transition-delay': key 69 }); 70 var result = computedStyle(transition, 'transition-delay'); 71 assert_equals(result, values[key], "Expected computed value"); 72 }, "parse '" + key + "'"); 73 } 74 } 75 </script> 76 </body> 77 </html>