css/css-view-transitions/dynamic-stylesheet-animations-timing-function.html

<!DOCTYPE html>
<html>
<title>View transitions: Dynamic stylesheet sets correct animations with proper timing function</title>
<link rel="help" href="https://drafts.csswg.org/css-view-transitions/#setup-transition-pseudo-elements-algorithm">
<link rel="help" href="https://drafts.csswg.org/css-animations-1/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>

<style>
body { margin: 0; }
:root { view-transition-name: none; }
html::view-transition-group(*),
html::view-transition-old(*),
html::view-transition-new(*) {
  animation-duration: 10s;
  animation-delay: -5s;
  animation-play-state: paused;
}
#target { view-transition-name: target; }
.init {
  width: 100px;
  height: 100px;
}
.large {
  width: 300px;
  height: 300px;
}
.left {
  margin-left: 100px;
}
.right {
  margin-left: 300px;
}
/* For generating the transform with ease, as reference */
@keyframes anim {
  from { transform: translate(100px); }
  to { transform: translate(300px); }
}
</style>
<div id="target"></div>

<script>
promise_test(async t => {
  const ref = createDiv(t);
  ref.style.animation = "anim 10s -5s paused ease";
  target.classList.add("init", "left");

  const vt = document.startViewTransition(() => {
    target.classList.remove("left");
    target.classList.add("right");
  });
  await vt.ready;

  assert_equals(
    getComputedStyle(document.documentElement,
      "::view-transition-group(target)").animationTimingFunction,
    "ease",
    "The default timing function"
  );

  assert_equals(
    getComputedStyle(document.documentElement,
      "::view-transition-group(target)").transform,
    getComputedStyle(ref).transform,
    "transform with ease at 50%"
  );

  await vt.skipTransition();
  target.className = "";
}, "The transform property with ease on ::view-transition-group()");

promise_test(async t => {
  document.styleSheets[0].insertRule(
    "::view-transition-group(target) { animation-timing-function: linear; }",
    document.styleSheets[0].cssRules.length
  );
  t.add_cleanup(() => {
    document.styleSheets[0].deleteRule(
      document.styleSheets[0].cssRules.length - 1
    );
  });
  target.classList.add("init");

  let vt = document.startViewTransition(() => {
    target.classList.remove("init");
    target.classList.add("large");
  });
  await vt.ready;

  assert_equals(
    getComputedStyle(document.documentElement,
      "::view-transition-group(target)").width,
    "200px",
    "width at 50%"
  );
  assert_equals(
    getComputedStyle(document.documentElement,
      "::view-transition-group(target)").height,
    "200px",
    "height at 50%"
  );

  await vt.skipTransition();
  target.className = "";
}, "The sizing properties with linear on ::view-transition-group()");

promise_test(async t => {
  target.classList.add("init", "left");

  let vt = document.startViewTransition(() => {
    target.classList.remove("left");
    target.classList.add("right");
  });
  await vt.ready;

  document.styleSheets[0].insertRule(
    "::view-transition-group(target) { animation-timing-function: linear; }",
    document.styleSheets[0].cssRules.length
  );
  t.add_cleanup(() => {
    document.styleSheets[0].deleteRule(
      document.styleSheets[0].cssRules.length - 1
    );
  });

  assert_equals(
    getComputedStyle(document.documentElement,
      "::view-transition-group(target)").transform,
    "matrix(1, 0, 0, 1, 200, 0)",
    "transform at 50% with linear"
  );

  await vt.skipTransition();
  target.className = "";
}, "Changing the timing function of ::view-transition-group() when animating");
</script>

</body>
</html>