tor-browser

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

dynamic-stylesheet-animations-timing-function.html (3680B)

      1 <!DOCTYPE html>
      2 <html>
      3 <title>View transitions: Dynamic stylesheet sets correct animations with proper timing function</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions/#setup-transition-pseudo-elements-algorithm">
      5 <link rel="help" href="https://drafts.csswg.org/css-animations-1/">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <script src="/web-animations/testcommon.js"></script>
      9 
     10 <style>
     11 body { margin: 0; }
     12 :root { view-transition-name: none; }
     13 html::view-transition-group(*),
     14 html::view-transition-old(*),
     15 html::view-transition-new(*) {
     16  animation-duration: 10s;
     17  animation-delay: -5s;
     18  animation-play-state: paused;
     19 }
     20 #target { view-transition-name: target; }
     21 .init {
     22  width: 100px;
     23  height: 100px;
     24 }
     25 .large {
     26  width: 300px;
     27  height: 300px;
     28 }
     29 .left {
     30  margin-left: 100px;
     31 }
     32 .right {
     33  margin-left: 300px;
     34 }
     35 /* For generating the transform with ease, as reference */
     36 @keyframes anim {
     37  from { transform: translate(100px); }
     38  to { transform: translate(300px); }
     39 }
     40 </style>
     41 <div id="target"></div>
     42 
     43 <script>
     44 promise_test(async t => {
     45  const ref = createDiv(t);
     46  ref.style.animation = "anim 10s -5s paused ease";
     47  target.classList.add("init", "left");
     48 
     49  const vt = document.startViewTransition(() => {
     50    target.classList.remove("left");
     51    target.classList.add("right");
     52  });
     53  await vt.ready;
     54 
     55  assert_equals(
     56    getComputedStyle(document.documentElement,
     57      "::view-transition-group(target)").animationTimingFunction,
     58    "ease",
     59    "The default timing function"
     60  );
     61 
     62  assert_equals(
     63    getComputedStyle(document.documentElement,
     64      "::view-transition-group(target)").transform,
     65    getComputedStyle(ref).transform,
     66    "transform with ease at 50%"
     67  );
     68 
     69  await vt.skipTransition();
     70  target.className = "";
     71 }, "The transform property with ease on ::view-transition-group()");
     72 
     73 promise_test(async t => {
     74  document.styleSheets[0].insertRule(
     75    "::view-transition-group(target) { animation-timing-function: linear; }",
     76    document.styleSheets[0].cssRules.length
     77  );
     78  t.add_cleanup(() => {
     79    document.styleSheets[0].deleteRule(
     80      document.styleSheets[0].cssRules.length - 1
     81    );
     82  });
     83  target.classList.add("init");
     84 
     85  let vt = document.startViewTransition(() => {
     86    target.classList.remove("init");
     87    target.classList.add("large");
     88  });
     89  await vt.ready;
     90 
     91  assert_equals(
     92    getComputedStyle(document.documentElement,
     93      "::view-transition-group(target)").width,
     94    "200px",
     95    "width at 50%"
     96  );
     97  assert_equals(
     98    getComputedStyle(document.documentElement,
     99      "::view-transition-group(target)").height,
    100    "200px",
    101    "height at 50%"
    102  );
    103 
    104  await vt.skipTransition();
    105  target.className = "";
    106 }, "The sizing properties with linear on ::view-transition-group()");
    107 
    108 promise_test(async t => {
    109  target.classList.add("init", "left");
    110 
    111  let vt = document.startViewTransition(() => {
    112    target.classList.remove("left");
    113    target.classList.add("right");
    114  });
    115  await vt.ready;
    116 
    117  document.styleSheets[0].insertRule(
    118    "::view-transition-group(target) { animation-timing-function: linear; }",
    119    document.styleSheets[0].cssRules.length
    120  );
    121  t.add_cleanup(() => {
    122    document.styleSheets[0].deleteRule(
    123      document.styleSheets[0].cssRules.length - 1
    124    );
    125  });
    126 
    127  assert_equals(
    128    getComputedStyle(document.documentElement,
    129      "::view-transition-group(target)").transform,
    130    "matrix(1, 0, 0, 1, 200, 0)",
    131    "transform at 50% with linear"
    132  );
    133 
    134  await vt.skipTransition();
    135  target.className = "";
    136 }, "Changing the timing function of ::view-transition-group() when animating");
    137 </script>
    138 
    139 </body>
    140 </html>