test_transitions_dynamic_changes.html (3921B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=525530 5 --> 6 <head> 7 <title>Test for Bug 525530</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=525530">Mozilla Bug 525530</a> 13 <p id="display" style="text-indent: 100px"></p> 14 <pre id="test"> 15 <script type="application/javascript"> 16 17 /** Test for Bug 525530 */ 18 19 var p = document.getElementById("display"); 20 var cs = getComputedStyle(p, ""); 21 var utils = SpecialPowers.DOMWindowUtils; 22 23 p.style.transitionProperty = "all"; 24 p.style.transitionDuration = "4s"; 25 p.style.transitionDelay = "-2s"; 26 p.style.transitionTimingFunction = "linear"; 27 28 is(cs.textIndent, "100px", "initial value"); 29 30 p.style.textIndent = "0"; 31 is(cs.textIndent, "50px", "transition is halfway"); 32 p.style.transitionDuration = "0s"; 33 is(cs.textIndent, "50px", "changing duration doesn't change transitioning"); 34 p.style.transitionDelay = "0s"; 35 is(cs.textIndent, "50px", "changing delay doesn't change transitioning"); 36 p.style.transitionProperty = "text-indent"; 37 is(cs.textIndent, "50px", 38 "irrelevant change to transition property doesn't change transitioning"); 39 p.style.transitionProperty = "letter-spacing"; 40 is(cs.textIndent, "0px", 41 "relevant change to transition property does change transitioning"); 42 43 /** Test for Bug 522643 */ 44 p.style.transitionDuration = "4s"; 45 p.style.transitionDelay = "-2s"; 46 p.style.transitionProperty = "text-indent"; 47 p.style.textIndent = "100px"; 48 is(cs.textIndent, "50px", "transition is halfway"); 49 p.style.transitionDuration = "0s"; 50 p.style.transitionDelay = "0s"; 51 is(cs.textIndent, "50px", 52 "changing duration and delay doesn't change transitioning"); 53 p.style.textIndent = "0px"; 54 is(cs.textIndent, "0px", 55 "changing property after changing duration and delay stops transition"); 56 57 /** Test for Bug 1133375 */ 58 p.style.transitionDuration = "1s"; 59 p.style.transitionDelay = "-1s"; 60 p.style.transitionProperty = "text-indent"; 61 var endCount = 0; 62 function incrementEndCount(event) { ++endCount; } 63 p.addEventListener("transitionend", incrementEndCount); 64 utils.advanceTimeAndRefresh(0); 65 p.style.textIndent = "100px"; 66 is(cs.textIndent, "100px", "value should now be 100px"); 67 utils.advanceTimeAndRefresh(10); 68 is(endCount, 0, "should not have started transition when combined duration less than or equal to 0"); 69 p.style.transitionDelay = "-2s"; 70 p.style.textIndent = "0"; 71 is(cs.textIndent, "0px", "value should now be 0px"); 72 utils.advanceTimeAndRefresh(10); 73 is(endCount, 0, "should not have started transition when combined duration less than or equal to 0"); 74 utils.restoreNormalRefresh(); 75 p.style.textIndent = ""; 76 77 /** Test for bug 1144410 */ 78 utils.advanceTimeAndRefresh(0); 79 p.style.transition = "opacity 200ms linear"; 80 p.style.opacity = "1"; 81 is(cs.opacity, "1", "bug 1144410 test - initial opacity"); 82 p.style.opacity = "0"; 83 is(cs.opacity, "1", "bug 1144410 test - opacity after starting transition"); 84 utils.advanceTimeAndRefresh(100); 85 is(cs.opacity, "0.5", "bug 1144410 test - opacity during transition"); 86 utils.advanceTimeAndRefresh(200); 87 is(cs.opacity, "0", "bug 1144410 test - opacity after transition"); 88 document.body.style.display = "none"; 89 is(cs.opacity, "0", "bug 1144410 test - opacity after display:none"); 90 p.style.opacity = "1"; 91 document.body.style.display = ""; 92 is(cs.opacity, "1", "bug 1144410 test - second transition, initial opacity"); 93 p.style.opacity = "0"; 94 is(cs.opacity, "1", "bug 1144410 test - opacity after starting second transition"); 95 utils.advanceTimeAndRefresh(100); 96 is(cs.opacity, "0.5", "bug 1144410 test - opacity during second transition"); 97 utils.advanceTimeAndRefresh(200); 98 is(cs.opacity, "0", "bug 1144410 test - opacity after second transition"); 99 utils.restoreNormalRefresh(); 100 p.style.opacity = ""; 101 p.style.transition = ""; 102 103 </script> 104 </pre> 105 </body> 106 </html>