Skip to content

GitLab

T
tangled
Commit 214cc983 authored by George Steel's avatar George Steel Committed by Commit Bot
Browse files
Options

Move worklet-animation-local-time-null to WPT and add cases 

Add case for setting localTime to null after having it set to a number.
Port to WPT infrastructure (testharness + reftest).

Bug: 870711
Change-Id: Iae22083f63004153666f4e119cf350f86c65eb55
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2348008
Commit-Queue: George Steel <gtsteel@chromium.org>
Reviewed-by: default avatarKevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#796887}
parent 032800a6
Hide whitespace changes
Inline Side-by-side
Showing with 298 additions and 79 deletions
third_party/blink/web_tests/animations/animationworklet/worklet-animation-local-time-undefined-expected.html deleted 100644 → 0
View file @ 032800a6
<!DOCTYPE html>
<style>
.box {
width: 100px;
height: 100px;
background-color: #0f0;
transform: translateY(0px);
}
</style>
<div id="first" class="box"></div>
<div id="second" class="box"></div>
<div id="third" class="box" style="transform: translateY(150px)"></div>
third_party/blink/web_tests/animations/animationworklet/worklet-animation-local-time-undefined.html deleted 100644 → 0
View file @ 032800a6
<!DOCTYPE html>
<style>
.box {
width: 100px;
height: 100px;
background-color: #0f0;
}
</style>
<div id="first" class="box"></div>
<div id="second" class="box"></div>
<div id="third" class="box"></div>
<script type="text/worklet">
registerAnimator("first_animator", class {
animate(currentTime, effect) {
// Unset effect.localTime is equivalent to 'null'
}
});
registerAnimator("second_animator", class {
animate(currentTime, effect) {
// explicitly set the localtime to null.
effect.localTime = null;
}
});
registerAnimator("third_animator", class {
animate(currentTime, effect) {
// Here to ensure we actually are producing frames.
effect.localTime = 500;
}
});
</script>
<script src="resources/animation-worklet-tests.js"></script>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
runInAnimationWorklet(
document.querySelector('script[type*=worklet]').textContent
).then(_ => {
for (let testcase of ['first', 'second', 'third']) {
const animation = new WorkletAnimation(`${testcase}_animator`,
new KeyframeEffect(document.getElementById(testcase),
[
{ transform: 'translateY(200px)' },
{ transform: 'translateY(100px)' }
], {
duration: 1000,
}
)
);
animation.play();
}
if (window.testRunner) {
waitTwoAnimationFrames(_ => {
testRunner.notifyDone();
});
}
});
</script>
third_party/blink/web_tests/external/wpt/animation-worklet/worklet-animation-local-time-null-1.https.html 0 → 100644
View file @ 214cc983
<!DOCTYPE html>
<title>Setting localTime to null means effect does not apply</title>
<link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.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>
<script>
promise_test(async t => {
await runInAnimationWorklet(`
registerAnimator("blank_animator", class {
animate(currentTime, effect) {
// Unset effect.localTime is equivalent to 'null'
}
});
`);
const target = document.getElementById('target1');
const animation = new WorkletAnimation('blank_animator',
new KeyframeEffect(target,
[
{ transform: 'translateY(100px)' },
{ transform: 'translateY(200px)' }
], {
duration: 1000,
}
)
);
animation.play();
await waitForAsyncAnimationFrames(1);
assert_equals(getComputedStyle(target).transform, "matrix(1, 0, 0, 1, 0, 0)");
}, "A worklet which never sets localTime has no effect.");
promise_test(async t => {
await runInAnimationWorklet(`
registerAnimator("null_animator", class {
animate(currentTime, effect) {
effect.localTime = null;
}
});
`);
const target = document.getElementById('target2');
const animation = new WorkletAnimation('null_animator',
new KeyframeEffect(target,
[
{ transform: 'translateY(100px)' },
{ transform: 'translateY(200px)' }
], {
duration: 1000,
}
)
);
animation.play();
await waitForAsyncAnimationFrames(1);
assert_equals(getComputedStyle(target).transform, "matrix(1, 0, 0, 1, 0, 0)");
}, "A worklet which sets localTime to null has no effect.");
promise_test(async t => {
await runInAnimationWorklet(`
registerAnimator("drop_animator", class {
animate(currentTime, effect) {
if (currentTime < 500)
effect.localTime = 500;
else if (currentTime < 1000)
effect.localTime = 0;
else
effect.localTime = null;
}
});
`);
const target = document.getElementById('target3');
const animation = new WorkletAnimation('drop_animator',
new KeyframeEffect(target,
[
{ transform: 'translateY(100px)' },
{ transform: 'translateY(200px)' }
], {
duration: 1000,
}
)
);
animation.play();
await waitForAsyncAnimationFrames(5);
assert_equals(getComputedStyle(target).transform, "matrix(1, 0, 0, 1, 0, 150)",
"The animation has an effect at first");
await waitForAnimationFrameWithCondition(() => animation.currentTime > 500);
await waitForAsyncAnimationFrames(1);
assert_equals(getComputedStyle(target).transform, "matrix(1, 0, 0, 1, 0, 100)",
"The effect correctly changes");
await waitForAnimationFrameWithCondition(() => animation.currentTime > 1000);
await waitForAsyncAnimationFrames(1);
assert_equals(getComputedStyle(target).transform, "matrix(1, 0, 0, 1, 0, 0)",
"The effect stops on nulling of localTime");
}, "A worklet which changes localTime to from a number to null has no effect on transform.");
promise_test(async t => {
await runInAnimationWorklet(`
registerAnimator("drop2_animator", class {
animate(currentTime, effect) {
if (currentTime < 500)
effect.localTime = 500;
else if (currentTime < 1000)
effect.localTime = 0;
else
effect.localTime = null;
}
});
`);
const target = document.getElementById('target4');
const animation = new WorkletAnimation('drop2_animator',
new KeyframeEffect(target,
[
{ backgroundColor: 'red' },
{ backgroundColor: 'blue' }
], {
duration: 1000,
}
)
);
animation.play();
await waitForAsyncAnimationFrames(5);
assert_equals(getComputedStyle(target).backgroundColor, "rgb(128, 0, 128)",
"The animation has an effect at first");
await waitForAnimationFrameWithCondition(() => animation.currentTime > 500);
await waitForAsyncAnimationFrames(1);
assert_equals(getComputedStyle(target).backgroundColor, "rgb(255, 0, 0)",
"The effect correctly changes");
await waitForAnimationFrameWithCondition(() => animation.currentTime > 1000);
await waitForAsyncAnimationFrames(1);
assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 128, 0)",
"The effect stops on nulling of localTime");
}, "A worklet which changes localTime to from a number to null has no effect on backgroundColor.");
</script>
third_party/blink/web_tests/external/wpt/animation-worklet/worklet-animation-local-time-null-2-ref.html 0 → 100644
View file @ 214cc983
<!DOCTYPE html>
<title>Setting localTime to null means effect does not apply (reftest)</title>
<link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
<style>
.box {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
#control {
background-color: red;
transform: translateY(100px);
}
</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>
third_party/blink/web_tests/external/wpt/animation-worklet/worklet-animation-local-time-null-2.https.html 0 → 100644
View file @ 214cc983
<!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">
<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)
.then(() => waitForAsyncAnimationFrames(1))
.then(takeScreenshot);
});
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment