summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/animation-worklet/worklet-animation-local-time-null-2.https.html
blob: 9c499bac0ee51b7b41c9cf1ca5f917d096c9a756 (plain)
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html class="reftest-wait">
<title>Setting localTime to null means effect does not apply (reftest)</title>
<link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
<link rel="match" href="worklet-animation-local-time-null-2-ref.html">
<meta name="timeout" content="long">

<script src="/common/reftest-wait.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="common.js"></script>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: green;
  display: inline-block;
}
</style>

<div>
<div class="box" id="target1"></div>
<div class="box" id="target2"></div>
<div class="box" id="target3"></div>
<div class="box" id="target4"></div>
<div class="box" id="control"></div>
</div>


<script>
runInAnimationWorklet(`
  registerAnimator("blank_animator", class {
    animate(currentTime, effect) {
      // Unset effect.localTime is equivalent to 'null'
    }
  });

  registerAnimator("null_animator", class {
    animate(currentTime, effect) {
      effect.localTime = null;
    }
  });

  registerAnimator("drop_animator", class {
    animate(currentTime, effect) {
      if (currentTime < 500)
        effect.localTime = 500;
      else if (currentTime < 1000)
        effect.localTime = 0;
      else
        effect.localTime = null;
    }
  });

  registerAnimator("add_animator", class {
    animate(currentTime, effect) {
      if (currentTime < 1000)
        effect.localTime = 500;
      else
        effect.localTime = 0;
    }
  });
`).then(() => {

  const start_animation = (animator, targetId, keyframes) => {
    const animation = new WorkletAnimation(animator,
      new KeyframeEffect(
        document.getElementById(targetId),
        keyframes,
        {duration: 1000}
      )
    );
    animation.play();
    return animation;
  };

  start_animation('blank_animator','target1', [
    { transform: 'translateY(100px)' },
    { transform: 'translateY(200px)' }
  ]);

  start_animation('null_animator','target2', [
    { transform: 'translateY(100px)' },
    { transform: 'translateY(200px)' }
  ]);

  start_animation('drop_animator','target3', [
    { transform: 'translateY(100px)' },
    { transform: 'translateY(200px)' }
  ]);

  start_animation('drop_animator','target4', [
    { backgroundColor: 'red' },
    { backgroundColor: 'blue' }
  ]);

  // check that animation worklets are running to stop accidental pass
  const control_anim = start_animation('add_animator','control', [
    { backgroundColor: 'red', transform: 'translateY(100px)' },
    { backgroundColor: 'blue', transform: 'translateY(200px)' }
  ]);

  waitForAnimationFrameWithCondition(() => control_anim.currentTime > 1000)
    // long timeout due to laggy compositor thread on debug build.
    .then(() => waitForAsyncAnimationFrames(120))
    .then(takeScreenshot);
});


</script>