transition-property-002.html (2123B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Transitions Test: Parsing invalid transition-property</title> 6 <meta name="assert" content="Test checks that unrecognized or non-animatable properties must be kept in the list to preserve the matching of indices."> 7 <link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-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 28 // syntax: none | [ all | <IDENT> ] [ ‘,’ [ all | <IDENT> ] ]* 29 var values = { 30 'none, all' : 'all', 31 'all, none' : 'all', 32 'foobar' : 'foobar', 33 'all, foobar' : 'all, foobar', 34 'foobar, all' : 'foobar, all', 35 'inherit' : 'padding', 36 'initial' : 'all' 37 }; 38 39 for (var key in values) { 40 test(function() { 41 setStyle({ 42 '#container': {'transition-property': 'padding'}, 43 '#transition': {'transition-property': key} 44 }); 45 var result = computedStyle(transition, 'transition-property'); 46 assert_equals(result, values[key]); 47 }, "parse '" + key + "'"); 48 } 49 </script> 50 </body> 51 </html>