dom/events/test/test_bug1332699.html

   1 <!DOCTYPE html>
   2 <meta charset="utf-8">
   3 <title>Test for bug 1332699</title>
   4 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   5 <script src="/tests/SimpleTest/EventUtils.js"></script>
   6 <link rel="stylesheet" href="/tests/SimpleTest/test.css">
   7 <style>
   8 #test {
   9   color: red;
  10   transition: color 100ms;
  11 }
  12 #test.changed {
  13   color: green;
  14 }
  15 </style>
  16 <div id="test"></div>
  17 <script>
  18 SimpleTest.waitForExplicitFinish();
  19
  20 window.onload = function () {
  21   let $test = document.getElementById('test');
  22   is(getComputedStyle($test).color, 'rgb(255, 0, 0)',
  23      'color should be red before transition');
  24   let numEvents = 0;
  25   $test.addEventListener('webkitTransitionEnd', function() {
  26     ++numEvents;
  27     if (numEvents == 1) {
  28       is(getComputedStyle($test).color, 'rgb(0, 128, 0)',
  29          'color should be green after transition');
  30       $test.dispatchEvent(new TransitionEvent('transitionend'));
  31       is(numEvents, 1, "Shouldn't receive the prefixed event again");
  32       SimpleTest.finish();
  33     }
  34   });
  35   $test.className = 'changed';
  36 };
  37 </script>