diff options
Diffstat (limited to 'layout/style/test/test_transitions_dynamic_changes.html')
| -rw-r--r-- | layout/style/test/test_transitions_dynamic_changes.html | 106 |
1 files changed, 106 insertions, 0 deletions
diff --git a/layout/style/test/test_transitions_dynamic_changes.html b/layout/style/test/test_transitions_dynamic_changes.html new file mode 100644 index 000000000..b74c50a49 --- /dev/null +++ b/layout/style/test/test_transitions_dynamic_changes.html @@ -0,0 +1,106 @@ +<!DOCTYPE HTML> +<html> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=525530 +--> +<head> + <title>Test for Bug 525530</title> + <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> +</head> +<body> +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=525530">Mozilla Bug 525530</a> +<p id="display" style="text-indent: 100px"></p> +<pre id="test"> +<script type="application/javascript"> + +/** Test for Bug 525530 **/ + +var p = document.getElementById("display"); +var cs = getComputedStyle(p, ""); +var utils = SpecialPowers.DOMWindowUtils; + +p.style.transitionProperty = "all"; +p.style.transitionDuration = "4s"; +p.style.transitionDelay = "-2s"; +p.style.transitionTimingFunction = "linear"; + +is(cs.textIndent, "100px", "initial value"); + +p.style.textIndent = "0"; +is(cs.textIndent, "50px", "transition is halfway"); +p.style.transitionDuration = "0s"; +is(cs.textIndent, "50px", "changing duration doesn't change transitioning"); +p.style.transitionDelay = "0s"; +is(cs.textIndent, "50px", "changing delay doesn't change transitioning"); +p.style.transitionProperty = "text-indent"; +is(cs.textIndent, "50px", + "irrelevant change to transition property doesn't change transitioning"); +p.style.transitionProperty = "font"; +is(cs.textIndent, "0px", + "relevant change to transition property does change transitioning"); + +/** Test for Bug 522643 */ +p.style.transitionDuration = "4s"; +p.style.transitionDelay = "-2s"; +p.style.transitionProperty = "text-indent"; +p.style.textIndent = "100px"; +is(cs.textIndent, "50px", "transition is halfway"); +p.style.transitionDuration = "0s"; +p.style.transitionDelay = "0s"; +is(cs.textIndent, "50px", + "changing duration and delay doesn't change transitioning"); +p.style.textIndent = "0px"; +is(cs.textIndent, "0px", + "changing property after changing duration and delay stops transition"); + +/** Test for Bug 1133375 */ +p.style.transitionDuration = "1s"; +p.style.transitionDelay = "-1s"; +p.style.transitionProperty = "text-indent"; +var endCount = 0; +function incrementEndCount(event) { ++endCount; } +p.addEventListener("transitionend", incrementEndCount, false); +utils.advanceTimeAndRefresh(0); +p.style.textIndent = "100px"; +is(cs.textIndent, "100px", "value should now be 100px"); +utils.advanceTimeAndRefresh(10); +is(endCount, 0, "should not have started transition when combined duration less than or equal to 0"); +p.style.transitionDelay = "-2s"; +p.style.textIndent = "0"; +is(cs.textIndent, "0px", "value should now be 0px"); +utils.advanceTimeAndRefresh(10); +is(endCount, 0, "should not have started transition when combined duration less than or equal to 0"); +utils.restoreNormalRefresh(); +p.style.textIndent = ""; + +/** Test for bug 1144410 */ +utils.advanceTimeAndRefresh(0); +p.style.transition = "opacity 200ms linear"; +p.style.opacity = "1"; +is(cs.opacity, "1", "bug 1144410 test - initial opacity"); +p.style.opacity = "0"; +is(cs.opacity, "1", "bug 1144410 test - opacity after starting transition"); +utils.advanceTimeAndRefresh(100); +is(cs.opacity, "0.5", "bug 1144410 test - opacity during transition"); +utils.advanceTimeAndRefresh(200); +is(cs.opacity, "0", "bug 1144410 test - opacity after transition"); +document.body.style.display = "none"; +is(cs.opacity, "0", "bug 1144410 test - opacity after display:none"); +p.style.opacity = "1"; +document.body.style.display = ""; +is(cs.opacity, "1", "bug 1144410 test - second transition, initial opacity"); +p.style.opacity = "0"; +is(cs.opacity, "1", "bug 1144410 test - opacity after starting second transition"); +utils.advanceTimeAndRefresh(100); +is(cs.opacity, "0.5", "bug 1144410 test - opacity during second transition"); +utils.advanceTimeAndRefresh(200); +is(cs.opacity, "0", "bug 1144410 test - opacity after second transition"); +utils.restoreNormalRefresh(); +p.style.opacity = ""; +p.style.transition = ""; + +</script> +</pre> +</body> +</html> |