tor-browser

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

reparent-animating-element-001.html (1036B)

      1 <!DOCTYPE html>
      2 <html class="test-wait">
      3 <title>CSS Test (Animations): Reparenting an element with a web animation on the compositor</title>
      4 <link rel="author" title="L. David Baron" href="https://dbaron.org/">
      5 <link rel="author" title="Google" href="http://www.google.com/">
      6 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1301838">
      7 <meta name="assert" content="This should not crash.">
      8 
      9 <style>
     10 #animate {
     11  width: 100px;
     12  height: 100px;
     13  background: blue;
     14 }
     15 </style>
     16 <div id="animate"></div>
     17 <div id="newparent"></div>
     18 <script>
     19 
     20 document.getElementById("animate").animate(
     21  [
     22    { transform: "rotate(0deg)" },
     23    { transform: "rotate(360deg)" }
     24  ],
     25  {
     26    duration: 5000,
     27    iterations: Infinity
     28  }
     29 );
     30 
     31 requestAnimationFrame(function() {
     32  requestAnimationFrame(function() {
     33    document.getElementById("newparent").appendChild(document.getElementById("animate"));
     34    requestAnimationFrame(function() {
     35      document.documentElement.classList.remove("test-wait");
     36    });
     37  });
     38 });
     39 
     40 </script>