<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Transitions Test: Parsing transition-duration</title> <meta name="assert" content="Test checks that transition-duration values are parsed properly"> <link rel="help" title="2.2. The 'transition-duration' Property" href="http://www.w3.org/TR/css3-transitions/#transition-duration-property"> <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"> <link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/"> <meta name="flags" content="dom"> <script src="/resources/testharness.js" type="text/javascript"></script> <script src="/resources/testharnessreport.js" type="text/javascript"></script> <script src="./support/vendorPrefix.js" type="text/javascript"></script> <script src="./support/helper.js" type="text/javascript"></script> </head> <body> <!-- required by testharnessreport.js --> <div id="log"></div> <!-- elements used for testing --> <div id="container"> <div id="transition"></div> </div> <script> var transition = document.getElementById('transition'); // <time> [, <time>]* var values = { // seconds '10.2s': '10.2s', '1s': '1s', '0.1s': '0.1s', '0.01s': '0.01s', '0.001s': '0.001s', '0.009s': '0.009s', '0s': '0s', '.0s': '0s', '0.0s': '0s', '.3s': '0.3s', '-5s' : '0s', // milliseconds '10200ms': '10.2s', '1000ms': '1s', '100ms': '0.1s', '10ms': '0.01s', '9ms': '0.009s', '1ms': '0.001s', '0ms': '0s', '-500ms' : '0s', // combination '1s, 0.1s, 10ms': '1s, 0.1s, 0.01s', // invalid 'foobar': '0s' }; // these tests are supposed to fail and // possibly make the engine issue a parser warning var invalidTests = { '-5s': true, '-500ms': true, 'foobar': true }; for (var key in values) { if (Object.prototype.hasOwnProperty.call(values, key)) { test(function() { setStyle('#transition', { 'transition-duration': key }); var result = computedStyle(transition, 'transition-duration'); assert_equals(result, values[key], "Expected computed value"); }, "parse '" + key + "'"); } } </script> </body> </html>