transition-001.html (3673B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Transitions Test: Parsing transition shorthand</title> 6 <meta name="assert" content="Test checks that transition shorthand values are parsed properly"> 7 <link rel="help" title="2.5. The 'transition' Shorthand Property" href="http://www.w3.org/TR/css3-transitions/#transition-shorthand-property"> 8 <link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/"> 9 <meta name="flags" content="dom"> 10 11 <script src="/resources/testharness.js" type="text/javascript"></script> 12 <script src="/resources/testharnessreport.js" type="text/javascript"></script> 13 14 <script src="./support/vendorPrefix.js" type="text/javascript"></script> 15 <script src="./support/helper.js" type="text/javascript"></script> 16 </head> 17 <body> 18 <!-- required by testharnessreport.js --> 19 <div id="log"></div> 20 <!-- elements used for testing --> 21 <div id="container"> 22 <div id="transition"></div> 23 </div> 24 25 <script> 26 var transition = document.getElementById('transition'); 27 // Note that order is important in this property. The first value that can be parsed as a time is assigned to 28 // the transition-duration. The second value that can be parsed as a time is assigned to transition-delay. 29 // [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’> [, [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’>]]* 30 var values = { 31 // [property, duration, timing, delay] 32 // random order 33 '1s' : ["all", "1s", "ease", "0s"], 34 '1s 2s' : ["all", "1s", "ease", "2s"], 35 '1s 2s ease-in' : ["all", "1s", "ease-in", "2s"], 36 '1s ease-in 2s' : ["all", "1s", "ease-in", "2s"], 37 'ease-in 1s 2s' : ["all", "1s", "ease-in", "2s"], 38 '1s width' : ["width", "1s", "ease", "0s"], 39 'width 1s' : ["width", "1s", "ease", "0s"], 40 '1s width 2s' : ["width", "1s", "ease", "2s"], 41 '1s 2s width ease-in' : ["width", "1s", "ease-in", "2s"], 42 '1s ease-in 2s width' : ["width", "1s", "ease-in", "2s"], 43 'width ease-in 1s 2s' : ["width", "1s", "ease-in", "2s"], 44 'width .1s ease-in .2s' : ["width", "0.1s", "ease-in", "0.2s"], 45 '1s width linear(0, .5 10% 20%, 1, .5 50%, 1) 2s' : ["width", "1s", "linear(0 0%, 0.5 10%, 0.5 20%, 1 35%, 0.5 50%, 1 100%)", "2s"]}; 46 47 for (var key in values) { 48 if (Object.prototype.hasOwnProperty.call(values, key)) { 49 test(function() { 50 setStyle('#transition', { 51 'transition': key 52 }); 53 // WET much? 54 assert_equals(computedStyle(transition, 'transition-property'), values[key][0], "transition-property"); 55 assert_equals(computedStyle(transition, 'transition-duration'), values[key][1], "transition-duration"); 56 assert_equals(computedStyle(transition, 'transition-timing-function'), values[key][2], "transition-timing-function"); 57 assert_equals(computedStyle(transition, 'transition-delay'), values[key][3], "transition-delay"); 58 }, "parse '" + key + "'"); 59 } 60 } 61 </script> 62 </body> 63 </html>