| <!DOCTYPE html> |
| <html> |
| <!-- Submitted from TestTWF Paris --> |
| <head> |
| <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type"> |
| <title> CSS Transitions: Animatable CSS properties </title> |
| <meta name="assert" content="Check that all animatable CSS properties are animatable and then accepted by the 'transition-property' property"> |
| <link rel="author" title="Daniel Glazman" href="mailto:daniel.glazman@disruptive-innovations.com"> |
| <link rel="help" href="http://www.w3.org/TR/css3-transitions/#transitions"> |
| <link rel="help" href="http://www.w3.org/TR/css3-transitions/#animatable-properties"> |
| <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> |
| |
| <style type="text/css"> |
| |
| html, body { margin: 0px; padding: 0px; } |
| |
| .w50vw { width: 50vw; ) |
| .h50vh { height: 50vh; } |
| |
| .w50vm { width: 50vm; } |
| .h50vm { height: 50vm; } |
| </style> |
| |
| <script src="/resources/testharness.js" type="text/javascript"></script> |
| <script src="/resources/testharnessreport.js" type="text/javascript"></script> |
| |
| <style type="text/css" id="newStyles"></style> |
| </head> |
| <body> |
| <p>Check that all animatable CSS properties are animatable and |
| then accepted by the 'transition-property' property.<br> |
| </p> |
| |
| <p id="testP">THIS PROSE NEEDED FOR TEST ITSELF</p> |
| |
| <div id="log"></div><a href="transitions-animatable-properties-01.html" id="" title="transitions-animatable-properties-01">transitions-animatable-properties-01</a> |
| |
| <script type="text/javascript"> |
| var kANIMATABLE_CSS_PROPERTIES = [ |
| ["background-color", "white", "rgb(0, 128, 0)", "", false], |
| ["background-position", "0px 0px", "100% 100%", "", false], |
| ["border-color", "white", "rgb(0, 128, 0)", "", false], |
| ["border-bottom-color", "white", "rgb(0, 128, 0)", "", false], |
| ["border-bottom-width", "0px", "10px", "border-style: solid; border-color: black", false], |
| ["border-left-color", "white", "rgb(0, 128, 0)", "", false], |
| ["border-left-width", "0px", "10px", "border-style: solid; border-color: black", false], |
| ["border-right-color", "white", "rgb(0, 128, 0)", "", false], |
| ["border-right-width", "0px", "10px", "border-style: solid; border-color: black", false], |
| ["border-spacing", "0px", "10px 15px", "", false], |
| ["border-top-color", "white", "rgb(0, 128, 0)", "", false], |
| ["border-top-width", "0px", "10px", "border-style: solid; border-color: black", false], |
| ["bottom", "0px", "10px", "", false], |
| ["clip", "rect(0px, 0px, 10px, 10px)", "rect(10px, 10px, 20px, 20px)", "", false], |
| ["color", "white", "rgb(0, 128, 0)", "", false], |
| ["crop", "rect(0px, 0px, 10px, 10px)", "rect(10px 10px 20px 20px)", "", false], |
| ["font-size", "12pt", "32px", "", false], |
| ["font-weight", "400", "900", "", false], |
| ["height", "1em", "64px", "", false], |
| ["left", "0px", "10px", "", false], |
| ["letter-spacing", "1em", "64px", "", false], |
| ["line-height", "1em", "64px", "", false], |
| ["margin-bottom", "0px", "10px", "", false], |
| ["margin-left", "0px", "10px", "", false], |
| ["margin-right", "0px", "10px", "", false], |
| ["margin-top", "0px", "10px", "", false], |
| ["max-height", "0px", "10px", "", false], |
| ["max-width", "0px", "10px", "", false], |
| ["min-height", "0px", "10px", "", false], |
| ["min-width", "0px", "10px", "", false], |
| ["opacity", "0", "1", "", false], |
| ["outline-color", "white", "rgb(0, 128, 0)", "", false], |
| ["outline-offset", "0px", "10px", "", false], |
| ["outline-width", "0px", "10px", "outline-style: solid; outline-style: black", false], |
| ["padding-bottom", "0px", "10px", "", false], |
| ["padding-left", "0px", "10px", "", false], |
| ["padding-right", "0px", "10px", "", false], |
| ["padding-top", "0px", "10px", "", false], |
| ["right", "0px", "10px", "", false], |
| ["text-indent", "0px", "10px", "", false], |
| ["text-shadow", "orange 0 -2px", "rgb(0, 128, 0) 0px 2px 0px", "", false], |
| ["top", "0px", "10px", "", false], |
| ["vertical-align", "0px", "10px", "", false], |
| ["visibility", "visible", "hidden", "", true], |
| ["width", "0px", "10px", "", false], |
| ["word-spacing", "0px", "10px", "", false], |
| ["z-index", "1", "10", "", false] |
| ]; |
| |
| // page timeout |
| var kTIMEOUT = 3000000; |
| |
| var p = document.getElementById("testP"); |
| var style = document.getElementById("newStyles"); |
| |
| var testsIntermediate = []; |
| var testsEnd = []; |
| |
| setup({timeout: kTIMEOUT}); |
| |
| // create all the tests we need |
| for (var i = 0; i < kANIMATABLE_CSS_PROPERTIES.length; i++) { |
| testsIntermediate.push(async_test(kANIMATABLE_CSS_PROPERTIES[i][0] + " intermediate", |
| { timeout: 2000, assert: "property " + kANIMATABLE_CSS_PROPERTIES[i][0] + " is animatable" })); |
| testsEnd.push(async_test(kANIMATABLE_CSS_PROPERTIES[i][0] + " end", |
| { timeout: 2000, assert: "property " + kANIMATABLE_CSS_PROPERTIES[i][0] + " has correct value after transition's end" })); |
| } |
| |
| // getComputedStyle helper |
| function gCS(aProperty) |
| { |
| return document.defaultView |
| .getComputedStyle(p, "") |
| .getPropertyValue(aProperty); |
| } |
| |
| function Scheduler(aIndex) |
| { |
| if (aIndex >= kANIMATABLE_CSS_PROPERTIES.length) // we're done here |
| return; |
| |
| var property = kANIMATABLE_CSS_PROPERTIES[aIndex][0]; |
| var startValue = kANIMATABLE_CSS_PROPERTIES[aIndex][1]; |
| var endValue = kANIMATABLE_CSS_PROPERTIES[aIndex][2]; |
| var extras = kANIMATABLE_CSS_PROPERTIES[aIndex][3]; |
| var discrete = kANIMATABLE_CSS_PROPERTIES[aIndex][4]; |
| |
| // create a style rule |
| var s = "#testP { "; |
| s += property + ": " + startValue + ";\n"; |
| s += "transition-property: " + property + ";\n"; |
| s += "transition-duration: 0.5s;\n"; |
| s += "transition-delay: 0s;\n"; |
| s += "transition-timing-function: linear;\n"; |
| s += extras; |
| s += "}"; |
| style.textContent = s; |
| |
| // flush styles |
| gCS(property); |
| |
| // set property to endValue |
| p.setAttribute("style", property + ": " + endValue + "; "); |
| |
| // test for intermediate value |
| setTimeout(function() |
| { |
| testsIntermediate[aIndex].step(function() |
| { |
| var cs = gCS(property); |
| if (discrete) { |
| assert_equals(cs, startValue); |
| } |
| else { |
| assert_true((cs != startValue) && (null != cs)); |
| } |
| }); |
| testsIntermediate[aIndex].done(); |
| }, 250); |
| |
| // test for final value |
| setTimeout(function() |
| { |
| testsEnd[aIndex].step(function() |
| { |
| var cs = gCS(property); |
| assert_equals(cs, endValue); |
| } |
| ); |
| testsEnd[aIndex].done(); |
| Scheduler(aIndex + 1); |
| }, 600); |
| |
| } |
| |
| // let's start |
| Scheduler(0); |
| |
| </script> |
| </body> |
| </html> |
