wpt/css/css-transitions/pseudo-element-transform.html at master · web-platform-tests/wpt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html class="reftest-wait">
<title>Transition on pseudo-element</title>
<link rel="help" href="https://umn0mtkzgkj46tygt32g.julianrbryant.com/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://un5gmtkzgkj46tygt32g.julianrbryant.com/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>