tor-browser

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

pseudo-element-animations.html (4862B)

      1 <!doctype html>
      2 <meta charset=utf-8>
      3 <title>CSS Animations and Web Animations on view transition pseudos</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-animations-1/">
      5 <link rel="help" href="https://drafts.csswg.org/web-animations-1/#dom-animatable-animate">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <script src="../css-animations/support/testcommon.js"></script>
      9 <style>
     10 /* Override UA stylesheet to avoid any impact on our tests */
     11 :root {
     12  view-transition-name: none;
     13 }
     14 :root::view-transition,
     15 :root::view-transition-group(*),
     16 :root::view-transition-image-pair(*),
     17 :root::view-transition-old(*),
     18 :root::view-transition-new(*) {
     19  animation: unset;
     20 }
     21 
     22 @keyframes css-anim {
     23  from { margin-left: 100px; }
     24  to { margin-left: 100px; }
     25 }
     26 </style>
     27 <div id="log"></div>
     28 <script>
     29 "use strict";
     30 
     31 promise_test(async t => {
     32  document.documentElement.style.viewTransitionName = "test";
     33  const ruleText =
     34    ":root::view-transition, :root::view-transition-group(test) {" +
     35    "  animation: css-anim 10s;"
     36    "}";
     37  const index = document.styleSheets[0].cssRules.length;
     38  document.styleSheets[0].insertRule(ruleText, index);
     39 
     40  let viewTransition = document.startViewTransition(() => {});
     41  await viewTransition.ready;
     42 
     43  let anims = document.documentElement.getAnimations({ subtree: true });
     44  assert_equals(anims.length, 2, "Has 2 CSS Animations.");
     45  let style = getComputedStyle(document.documentElement,
     46    "::view-transition-group(test)");
     47  assert_equals(style.marginLeft, "100px");
     48 
     49  viewTransition.skipTransition();
     50  document.styleSheets[0].deleteRule(index);
     51  document.documentElement.style.viewTransitionName = "none";
     52 }, "The specified CSS Animations work on view transition pseudos.");
     53 
     54 promise_test(async t => {
     55  document.documentElement.style.viewTransitionName = "test";
     56  const ruleText =
     57    ":root::view-transition, :root::view-transition-group(test) {" +
     58    "animation: css-anim 10s;"
     59    "}";
     60  const index = document.styleSheets[0].cssRules.length;
     61  document.styleSheets[0].insertRule(ruleText, index);
     62 
     63  let viewTransition = document.startViewTransition(() => {});
     64  await viewTransition.ready;
     65 
     66  let anim1 = document.documentElement.animate(
     67    { opacity: [0.5, 0.5] },
     68    { duration: 10000, pseudoElement: '::view-transition-group(test)' }
     69  );
     70  await anim1.ready;
     71 
     72  let kf = new KeyframeEffect(
     73    document.documentElement,
     74    { translate: ["200px", "200px"] },
     75    { duration: 10000, pseudoElement: '::view-transition-old(test)' }
     76  );
     77  let anim2 = new Animation(kf, document.timeline);
     78  anim2.play();
     79  await anim2.ready;
     80 
     81  let anims = document.documentElement.getAnimations({ subtree: true });
     82  assert_equals(anims.length, 4,
     83    "Has 2 CSS Animations and 2 script animations.");
     84 
     85  let style = getComputedStyle(document.documentElement,
     86    "::view-transition-group(test)");
     87  assert_equals(style.marginLeft, "100px");
     88  assert_equals(style.opacity, "0.5");
     89  assert_equals(
     90    getComputedStyle(document.documentElement,
     91      "::view-transition-old(test)").translate,
     92    "200px"
     93  );
     94 
     95  anim1.finish();
     96  anim2.finish();
     97  viewTransition.skipTransition();
     98  document.styleSheets[0].deleteRule(index);
     99  document.documentElement.style.viewTransitionName = "none";
    100 }, "The specified CSS Animations and script animations work on view "+
    101   "transition pseudos");
    102 
    103 promise_test(async t => {
    104  document.documentElement.style.viewTransitionName = "test";
    105  let ruleText =
    106    ":root::view-transition, " +
    107    ":root::view-transition-group(test), " +
    108    ":root::view-transition-image-pair(test) {" +
    109    "  animation: css-anim 10s;"
    110    "}";
    111  const index = document.styleSheets[0].cssRules.length;
    112  document.styleSheets[0].insertRule(ruleText, index);
    113 
    114  let viewTransition = document.startViewTransition(() => {});
    115  await viewTransition.ready;
    116 
    117  let anims = document.documentElement.getAnimations({ subtree: true });
    118  assert_equals(anims.length, 3, "Has 3 CSS Animations.");
    119 
    120  // Make the pseudo-element display:none.
    121  ruleText = ":root::view-transition-image-pair(test) { display: none; }";
    122  document.styleSheets[0].insertRule(ruleText, index + 1);
    123  anims = document.documentElement.getAnimations({ subtree: true });
    124  assert_equals(anims.length, 2, "One CSS Animation was removed.");
    125 
    126  // Destroy all frames.
    127  document.documentElement.style.display = "none";
    128  anims = document.documentElement.getAnimations({ subtree: true });
    129  assert_equals(anims.length, 0, "All CSS Animation were removed.");
    130 
    131  viewTransition.skipTransition();
    132  document.styleSheets[0].deleteRule(index + 1);
    133  document.styleSheets[0].deleteRule(index);
    134  document.documentElement.style.viewTransitionName = "none";
    135  document.documentElement.style.display = "inline";
    136 }, "The specified CSS Animations are removed if setting display:none.");
    137 
    138 </script>