dom/smil/test/file_smilWithTransition.html
author Neil Deakin <neil@mozilla.com>
Tue, 04 Dec 2018 11:25:41 -0500
changeset 453075 c1cfc595892fe24cccb8989a850e6556be6a778f
parent 442534 eee0effaa1f00aeb017a2c7bf107425e64222faa
child 491145 8459bff03c9544c8ad7dbe396fa66909635fec50
permissions -rw-r--r--
Bug 1482389, remove methods of XULTreeElement that return unused nsresults. In addition, change GetView to return the nsITreeView instead of using an out-parameter, r=paolo

<!doctype html>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1315874
-->
<head>
  <meta charset="utf-8">
  <title>Test SMIL does not trigger CSS Transitions (bug 1315874)</title>
</head>
<body>
<a target="_blank"
  href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315874">Mozilla Bug
  1315874</a>
<svg>
  <rect width="100%" height="100%"
        style="fill: red; transition: fill 10s" id="rect">
    <animate attributeName="fill" to="lime" dur="1s" fill="freeze">
  </rect>
</svg>
<script  type="text/javascript">
  // Bring SimpleTest's function from opener.
  if (opener) {
    var is = opener.is.bind(opener);
    var ok = opener.ok.bind(opener);
    function finish() {
      var o = opener;
      self.close();
      o.SimpleTest.finish();
    }
  }

  window.addEventListener('load', runTests, false);

  var rect = document.getElementById('rect');
  var svg = document.getElementsByTagName('svg')[0];
  is(getComputedStyle(rect).fill, 'rgb(255, 0, 0)',
     'The initial color should be red.');

  function runTests() {
    waitForFrame().then(function() {
      svg.setCurrentTime(1);
      is(getComputedStyle(rect).fill, 'rgb(0, 255, 0)',
         'The end color should be lime.');

      return waitForAnimationFrames(2);
    }).then(function() {
      var anim = document.getAnimations()[0];
      ok(!anim, 'Transition should not be created by restyling for SMIL');
      finish();
    });
  }

  // Utility methods from testcommon.js
  // For detail, see dom/animation/test/testcommon.js.

  function waitForFrame() {
    return new Promise(function(resolve, reject) {
      requestAnimationFrame(function(time) {
        resolve();
      });
    });
  }

  function waitForAnimationFrames(frameCount) {
    return new Promise(function(resolve, reject) {
      function handleFrame() {
        if (--frameCount <= 0) {
          resolve();
        } else {
          window.requestAnimationFrame(handleFrame);
        }
      }
      window.requestAnimationFrame(handleFrame);
    });
  }
</script>
</pre>
</body>
</html>