зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1552259 [wpt PR 16829] - Initial implementation of WorkletAnimationEffect, a=testonly
Automatic update from web-platform-tests Initial implementation of WorkletAnimationEffect Includes read only .getTiming() function for use on animation worklet threads. Renamed old proxy files to match new structure. WorkletGroupEffectProxy -> WorkletGroupEffect EffectProxy -> WorkletAnimationEffect Design Doc: https://docs.google.com/document/d/1AoLLgrUzp11ZPlEztQ73M5PxIULVZrj6U2OZSMXeFOI/edit#heading=h.8kd6haf9q9ij Bug: 915344 Change-Id: Ib43d7225d47d145a8d1364472373a514407d5d3f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1568315 Reviewed-by: Robert Flack <flackr@chromium.org> Reviewed-by: Majid Valipour <majidvp@chromium.org> Reviewed-by: Jeremy Roman <jbroman@chromium.org> Reviewed-by: Yi Gu <yigu@chromium.org> Commit-Queue: Jordan Taylor <jortaylo@microsoft.com> Cr-Commit-Position: refs/heads/master@{#661400} -- wp5At-commits: 79708bb708191da351506a5a4e262ea08a617b31 wpt-pr: 16829
This commit is contained in:
Родитель
73ef54521a
Коммит
dc19714aeb
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for Animation Worklet should have access to effect timing from within the worklet thread</title>
|
||||
<style>
|
||||
#box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
transform: translateY(100px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box"></div>
|
|
@ -0,0 +1,54 @@
|
|||
<html class="reftest-wait">
|
||||
<title>Animation Worklet should have access to effect timing from within the worklet thread</title>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
|
||||
<meta name="assert" content="Animation Worklet should have access to effect timing from within the worklet thread">
|
||||
<link rel="match" href="worklet-animation-get-timing-on-worklet-thread-ref.html">
|
||||
|
||||
<script src="/web-animations/testcommon.js"></script>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="common.js"></script>
|
||||
|
||||
<style>
|
||||
#box{
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box"></div>
|
||||
|
||||
<script id="get_timing_animator" type="text/worklet">
|
||||
registerAnimator('get_timing', class {
|
||||
animate(currentTime, effect){
|
||||
effect.localTime = effect.getTiming().delay + (effect.getTiming().duration / 2);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
runInAnimationWorklet(
|
||||
document.getElementById('get_timing_animator').textContent
|
||||
).then(() => {
|
||||
const box = document.getElementById("box");
|
||||
const effect = new KeyframeEffect(
|
||||
box,
|
||||
[
|
||||
{transform: 'translateY(0)'},
|
||||
{transform: 'translateY(200px)'}
|
||||
],
|
||||
{
|
||||
delay: 2000,
|
||||
duration: 1000
|
||||
}
|
||||
);
|
||||
|
||||
const animation = new WorkletAnimation('get_timing', effect);
|
||||
animation.play();
|
||||
|
||||
waitForAsyncAnimationFrames(1).then(_ => {
|
||||
takeScreenshot();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</html>
|
Загрузка…
Ссылка в новой задаче