tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

file_smilWithTransition.html (2046B)

      1 <!doctype html>
      2 <html>
      3 <!--
      4 https://bugzilla.mozilla.org/show_bug.cgi?id=1315874
      5 -->
      6 <head>
      7  <meta charset="utf-8">
      8  <title>Test SMIL does not trigger CSS Transitions (bug 1315874)</title>
      9 </head>
     10 <body>
     11 <a target="_blank"
     12  href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315874">Mozilla Bug
     13  1315874</a>
     14 <svg>
     15  <rect width="100%" height="100%"
     16        style="fill: red; transition: fill 10s" id="rect">
     17    <animate attributeName="fill" to="lime" dur="1s" fill="freeze">
     18  </rect>
     19 </svg>
     20 <script  type="text/javascript">
     21  // Bring SimpleTest's function from opener.
     22  if (opener) {
     23    var is = opener.is.bind(opener);
     24    var ok = opener.ok.bind(opener);
     25    function finish() {
     26      var o = opener;
     27      self.close();
     28      o.SimpleTest.finish();
     29    }
     30  }
     31 
     32  window.addEventListener('load', runTests);
     33 
     34  var rect = document.getElementById('rect');
     35  var svg = document.getElementsByTagName('svg')[0];
     36  is(getComputedStyle(rect).fill, 'rgb(255, 0, 0)',
     37     'The initial color should be red.');
     38 
     39  function runTests() {
     40    waitForFrame().then(function() {
     41      svg.setCurrentTime(1);
     42      is(getComputedStyle(rect).fill, 'rgb(0, 255, 0)',
     43         'The end color should be lime.');
     44 
     45      return waitForAnimationFrames(2);
     46    }).then(function() {
     47      var anim = document.getAnimations()[0];
     48      ok(!anim, 'Transition should not be created by restyling for SMIL');
     49      finish();
     50    });
     51  }
     52 
     53  // Utility methods from testcommon.js
     54  // For detail, see dom/animation/test/testcommon.js.
     55 
     56  function waitForFrame() {
     57    return new Promise(function(resolve, reject) {
     58      requestAnimationFrame(function(time) {
     59        resolve();
     60      });
     61    });
     62  }
     63 
     64  function waitForAnimationFrames(frameCount) {
     65    return new Promise(function(resolve, reject) {
     66      function handleFrame() {
     67        if (--frameCount <= 0) {
     68          resolve();
     69        } else {
     70          window.requestAnimationFrame(handleFrame);
     71        }
     72      }
     73      window.requestAnimationFrame(handleFrame);
     74    });
     75  }
     76 </script>
     77 </pre>
     78 </body>
     79 </html>