Add test for transitionend events firing for transitions that, prior to bug 613888, were canceled right before completing. r=bzbarsky a2.0=blocking
authorSHIMODA Hiroshi <shimoda@clear-code.com>, L. David Baron <dbaron@dbaron.org>
Fri, 14 Jan 2011 19:57:53 -0800
changeset 60639 fe3f812af314da1e34eab655acb88326d4716516
parent 60638 ea7bedcd069cea4e676deb43e5f788447269ed04
child 60640 3d46204494379ba37443ee54bcf3c9b2d6f8a239
push id1
push userroot
push dateTue, 26 Apr 2011 22:38:44 +0000
treeherdermozilla-beta@bfdb6e623a36 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbzbarsky
bugs613888
milestone2.0b10pre
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Add test for transitionend events firing for transitions that, prior to bug 613888, were canceled right before completing. r=bzbarsky a2.0=blocking
layout/style/test/Makefile.in
layout/style/test/test_transitions_cancel_near_end.html
--- a/layout/style/test/Makefile.in
+++ b/layout/style/test/Makefile.in
@@ -166,16 +166,17 @@ GARBAGE += css_properties.js
 		test_priority_preservation.html \
 		test_property_syntax_errors.html \
 		test_rem_unit.html \
 		test_selectors.html \
 		test_selectors_on_anonymous_content.html \
 		test_shorthand_property_getters.html \
 		test_style_struct_copy_constructors.html \
 		test_system_font_serialization.html \
+		test_transitions_cancel_near_end.html \
 		test_transitions_computed_values.html \
 		test_transitions_computed_value_combinations.html \
 		test_transitions_events.html \
 		test_transitions.html \
 		test_transitions_per_property.html \
 		test_transitions_dynamic_changes.html \
 		test_transitions_bug537151.html \
 		test_unclosed_parentheses.html \
new file mode 100644
--- /dev/null
+++ b/layout/style/test/test_transitions_cancel_near_end.html
@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=613888
+-->
+<head>
+  <title>Test for Bug 613888</title>
+  <script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
+  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+  <style type="text/css">
+    #animated-elements-container > span {
+      color: black;
+      background: white;
+      -moz-transition:
+        color 10s ease-out,
+        background 1s ease-out;
+    }
+    #animated-elements-container > span.another {
+      color: white;
+      background: black;
+    }
+  </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=613888">Mozilla Bug 613888</a>
+<pre id="animated-elements-container">
+  <span should-restyle="true">canceled on a half of the animation</span>
+  <span should-restyle="true">canceled too fast, and restyled on transitionend</span>
+  <span>canceled too fast, but not restyled on transitionend</span>
+</pre>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+
+/** Test for Bug 613888: that we don't cancel transitions when they're
+    about to end (current interpolated value rounds to ending value) and
+    they get an unrelated style change.  **/
+
+var count_remaining = 6;
+
+window.addEventListener('load', function() {
+  var cases = Array.slice(document.querySelectorAll('#animated-elements-container > span'));
+
+  cases.forEach(function(aTarget) {
+    aTarget.addEventListener('transitionend', function(aEvent) {
+      if (aTarget.hasAttribute('should-restyle'))
+        aTarget.style.outline = '1px solid';
+      aTarget.setAttribute('transitionend-'+aEvent.propertyName, true);
+      if (--count_remaining == 0) {
+        cases.forEach(function(aCase, aIndex) {
+          ok(aCase.hasAttribute('transitionend-color'),
+             "transitionend for color was fired for case "+aIndex);
+          ok(aCase.hasAttribute('transitionend-background-color'),
+             "transitionend for background-color was fired for case "+aIndex);
+        });
+        SimpleTest.finish();
+      }
+    }, false);
+  });
+
+  cases.forEach(function(aCase) aCase.className = 'another' );
+
+  window.setTimeout(function() cases[0].className = '', 500);
+  window.setTimeout(function() cases[1].className = cases[2].className = '', 250);
+
+}, false);
+
+SimpleTest.waitForExplicitFinish();
+
+</script>
+</pre>
+</body>
+</html>