import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo

layout/style/test/test_transitions_cancel_near_end.html

@@ -0,0 +1,82 @@
+<!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;
+      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';
+      var attr = 'transitionend-' + aEvent.propertyName;
+      if (aTarget.hasAttribute(attr)) {
+        // It's possible, given bad timers, that we might get a
+        // transition that completed before we reversed it, which could
+        // lead to two transitionend events for the same thing.  We
+        // don't want to decrement count_remaining in this case.
+        return;
+      }
+      aTarget.setAttribute(attr, "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(aCase => aCase.className = 'another' );
+
+  window.setTimeout(() => cases[0].className = '', 500);
+  window.setTimeout(() => cases[1].className = cases[2].className = '', 250);
+
+}, false);
+
+SimpleTest.waitForExplicitFinish();
+SimpleTest.requestFlakyTimeout("untriaged");
+
+</script>
+</pre>
+</body>
+</html>