| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>CSS Transitions Test: Parsing transition shorthand</title> |
| <meta name="assert" content="Test checks that transition shorthand values are parsed properly"> |
| <link rel="help" title="2.5. The 'transition' Shorthand Property" href="http://www.w3.org/TR/css3-transitions/#transition-shorthand-property"> |
| <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'); |
| // Note that order is important in this property. The first value that can be parsed as a time is assigned to |
| // the transition-duration. The second value that can be parsed as a time is assigned to transition-delay. |
| // [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’> [, [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’>]]* |
| var values = { |
| // [property, duration, timing, delay] |
| // random order |
| '1s' : ["all", "1s", "ease", "0s"], |
| '1s 2s' : ["all", "1s", "ease", "2s"], |
| '1s 2s ease-in' : ["all", "1s", "ease-in", "2s"], |
| '1s ease-in 2s' : ["all", "1s", "ease-in", "2s"], |
| 'ease-in 1s 2s' : ["all", "1s", "ease-in", "2s"], |
| '1s width' : ["width", "1s", "ease", "0s"], |
| 'width 1s' : ["width", "1s", "ease", "0s"], |
| '1s width 2s' : ["width", "1s", "ease", "2s"], |
| '1s 2s width ease-in' : ["width", "1s", "ease-in", "2s"], |
| '1s ease-in 2s width' : ["width", "1s", "ease-in", "2s"], |
| 'width ease-in 1s 2s' : ["width", "1s", "ease-in", "2s"], |
| 'width .1s ease-in .2s' : ["width", "0.1s", "ease-in", "0.2s"] |
| }; |
| |
| for (var key in values) { |
| if (Object.prototype.hasOwnProperty.call(values, key)) { |
| test(function() { |
| setStyle('#transition', { |
| 'transition': key |
| }); |
| // WET much? |
| assert_equals(computedStyle(transition, 'transition-property'), values[key][0], "transition-property"); |
| assert_equals(computedStyle(transition, 'transition-duration'), values[key][1], "transition-duration"); |
| assert_equals(computedStyle(transition, 'transition-timing-function'), values[key][2], "transition-timing-function"); |
| assert_equals(computedStyle(transition, 'transition-delay'), values[key][3], "transition-delay"); |
| }, "parse '" + key + "'"); |
| } |
| } |
| </script> |
| </body> |
| </html> |
