Blitz - WPT: pseudo-element-transform.html

wpt / css / css-transitions / pseudo-element-transform.html

/css/css-transitions/pseudo-element-transform.html

<!DOCTYPE html>
<html class="reftest-wait">
<title>Transition on pseudo-element</title>
<link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">
<link rel="match" href="pseudo-element-transform-ref.html">
<script src="/common/reftest-wait.js"></script>
<style>
div {
  width: 100px;
  height: 100px;
  background: rgb(255, 191, 0);
}
div::before {
  content: "";
  background: rgb(184, 115, 51);
  width: 100px;
  height: 100px;
  transition-property: transform;
  transition-duration: 10000s;
  /* This timing-function has zero-slope at progress = 0.5 preventing drift */
  transition-timing-function: cubic-bezier(0, 1, 1, 0);
  transform: ScaleX(0);
  /* Make the pseudo element "transformable" as per
   * https://www.w3.org/TR/css-transforms-1/#transformable-element.
   */
  display: block;
}

div.animated::before {
  transform: scaleX(1);
}
</style>
<div></div>
<script>
// This is a regression test for crbug.com/40475833
// Ported to WPT in an effort to prune browser-specific tests.
window.onload = async () => {
  requestAnimationFrame(() => {
    const target = document.querySelector('div');
    target.classList.add('animated');
    const anim = document.getAnimations()[0];
    anim.ready.then(() => {
      const duration = anim.effect.getTiming().duration;
      anim.currentTime = duration / 2;
      requestAnimationFrame(() => {
        requestAnimationFrame(takeScreenshot);
      });
    });
  });
};
</script>
</html>

/css/css-transitions/pseudo-element-transform-ref.html

<!DOCTYPE html>
<html>
<title>Reference for transition on pseudo-element</title>
<link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">
<style>
div {
  width: 100px;
  height: 100px;
  background: rgb(255, 191, 0);
}
div::before {
  content: "";
  background: rgb(184, 115, 51);
  width: 100px;
  height: 100px;
  transform: ScaleX(0.5);
  display: block;
  will-change: transform;
}
</style>
<div></div>