test_transitions_computed_values.html (3860B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=435441 5 --> 6 <head> 7 <title>Test for Bug 435441</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 10 </head> 11 <body> 12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=435441">Mozilla Bug 435441</a> 13 <div id="content" style="display: none"></div> 14 <pre id="test"> 15 <script type="application/javascript"> 16 17 /** Test for Bug 435441 */ 18 19 20 /* 21 * test that when transition properties are inherited, the length of the 22 * computed value stays the same 23 */ 24 25 var p = document.getElementById("content"); 26 var c = document.createElement("div"); 27 p.appendChild(c); 28 var cs = getComputedStyle(c, ""); 29 30 p.style.transitionProperty = "margin-left, margin-right"; 31 c.style.transitionProperty = "inherit"; 32 is(cs.transitionProperty, "margin-left, margin-right", 33 "computed style match with no other properties"); 34 c.style.transitionDuration = "5s"; 35 is(cs.transitionProperty, "margin-left, margin-right", 36 "computed style match with shorter property"); 37 is(cs.transitionDuration, "5s", 38 "shorter property not extended"); 39 c.style.transitionDuration = "5s, 4s, 3s, 2000ms"; 40 is(cs.transitionProperty, "margin-left, margin-right", 41 "computed style match with longer property"); 42 is(cs.transitionDuration, "5s, 4s, 3s, 2s", 43 "longer property computed correctly"); 44 p.style.transitionProperty = ""; 45 c.style.transitionProperty = ""; 46 c.style.transitionDuration = ""; 47 48 // and repeat the above set of tests with property and duration swapped 49 p.style.transitionDuration = "5s, 4s"; 50 c.style.transitionDuration = "inherit"; 51 is(cs.transitionDuration, "5s, 4s", 52 "computed style match with no other properties"); 53 c.style.transitionProperty = "margin-left"; 54 is(cs.transitionDuration, "5s, 4s", 55 "computed style match with shorter property"); 56 is(cs.transitionProperty, "margin-left", 57 "shorter property not extended"); 58 c.style.transitionProperty = 59 "margin-left, margin-right, margin-top, margin-bottom"; 60 is(cs.transitionDuration, "5s, 4s", 61 "computed style match with longer property"); 62 is(cs.transitionProperty, 63 "margin-left, margin-right, margin-top, margin-bottom", 64 "longer property computed correctly"); 65 p.style.transitionDuration = ""; 66 c.style.transitionDuration = ""; 67 c.style.transitionProperty = ""; 68 69 // And do the same pair of tests for animations: 70 71 p.style.animationName = "bounce, roll"; 72 c.style.animationName = "inherit"; 73 is(cs.animationName, "bounce, roll", 74 "computed style match with no other properties"); 75 c.style.animationDuration = "5s"; 76 is(cs.animationName, "bounce, roll", 77 "computed style match with shorter property"); 78 is(cs.animationDuration, "5s", 79 "shorter property not extended"); 80 c.style.animationDuration = "5s, 4s, 3s, 2000ms"; 81 is(cs.animationName, "bounce, roll", 82 "computed style match with longer property"); 83 is(cs.animationDuration, "5s, 4s, 3s, 2s", 84 "longer property computed correctly"); 85 p.style.animationName = ""; 86 c.style.animationName = ""; 87 c.style.animationDuration = ""; 88 89 // and repeat the above set of tests with name and duration swapped 90 p.style.animationDuration = "5s, 4s"; 91 c.style.animationDuration = "inherit"; 92 is(cs.animationDuration, "5s, 4s", 93 "computed style match with no other properties"); 94 c.style.animationName = "bounce"; 95 is(cs.animationDuration, "5s, 4s", 96 "computed style match with shorter property"); 97 is(cs.animationName, "bounce", 98 "shorter property not extended"); 99 c.style.animationName = 100 "bounce, roll, wiggle, spin"; 101 is(cs.animationDuration, "5s, 4s", 102 "computed style match with longer property"); 103 is(cs.animationName, 104 "bounce, roll, wiggle, spin", 105 "longer property computed correctly"); 106 p.style.animationDuration = ""; 107 c.style.animationDuration = ""; 108 c.style.animationName = ""; 109 110 </script> 111 </pre> 112 </body> 113 </html>