<!DOCTYPE html><html><head><metacharset="utf-8"><title>CSS Transitions Test: Parsing transition shorthand</title><metaname="assert"content="Test checks that transition shorthand values are parsed properly"><linkrel="help"title="2.5. The 'transition' Shorthand Property"href="http://www.w3.org/TR/css3-transitions/#transition-shorthand-property"><linkrel="author"title="Rodney Rehm"href="http://rodneyrehm.de/en/"><metaname="flags"content="dom"><scriptsrc="/resources/testharness.js"type="text/javascript"></script><scriptsrc="/resources/testharnessreport.js"type="text/javascript"></script><scriptsrc="./support/vendorPrefix.js"type="text/javascript"></script><scriptsrc="./support/helper.js"type="text/javascript"></script></head><body><!-- required by testharnessreport.js --><divid="log"></div><!-- elements used for testing --><divid="container"><divid="transition"></div></div><script>vartransition=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’>]]*varvalues={// [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"],'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"]};for(varkeyinvalues){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>
