tor-browser

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

dialog-animation.html (1271B)

      1 <!doctype html>
      2 <meta charset=utf-8>
      3 <title>CSS Animations on a &lt;dialog></title>
      4 <link rel="help" href="https://drafts.csswg.org/css-animations-1/">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script src="support/testcommon.js"></script>
      8 <style>
      9 
     10 dialog[open] {
     11    animation: dialog-open-animation 1ms;
     12 }
     13 
     14 @keyframes dialog-open-animation {
     15    from { opacity: 0 }
     16 }
     17 
     18 </style>
     19 <div id="log"></div>
     20 <script>
     21 
     22 "use strict";
     23 
     24 promise_test(async t => {
     25  const dialog = addElement(t, "dialog");
     26 
     27  // Open the dialog a first time, this should trigger a CSS Animation.
     28  dialog.open = true;
     29  const animations = dialog.getAnimations();
     30  assert_equals(animations.length, 1, "As the <dialog> is shown intially an animation is started");
     31 
     32  await animations[0].finished;
     33 
     34  await waitForNextFrame();
     35 
     36  dialog.open = false;
     37  assert_equals(dialog.getAnimations().length, 0, "As the <dialog> is closed the animation is removed");
     38 
     39  await waitForNextFrame();
     40 
     41  dialog.open = true;
     42  assert_equals(dialog.getAnimations().length, 1, "As the <dialog> is shown again an animation is started again");
     43 }, "CSS Animations tied to <dialog open> are canceled and restarted as the dialog is hidden and shown");
     44 </script>