-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Handle inactive timelines for main-thread worklet animations.
Whenever start or current time is queried or calculated, check if the timeline becomes newly active or inactive and cache the last calculated current time. - When the timeline becomes newly inactive, make the start time unresolved and apply previous current time to the hold time. - When the timeline becomes newly active, calculate start time from the hold time if resolved and make the hold time unresolved. Bug: 906050 Change-Id: I3cf8e45b9ab0edd13f3108d1a375e95409a0c1e7 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1512789 Commit-Queue: Olga Gerchikov <gerchiko@microsoft.com> Reviewed-by: Majid Valipour <majidvp@chromium.org> Reviewed-by: Stephen McGruer <smcgruer@chromium.org> Cr-Commit-Position: refs/heads/master@{#643534}
- Loading branch information
1 parent
4807015
commit 18f4c6b
Showing
1 changed file
with
98 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,98 @@ | ||
<!DOCTYPE html> | ||
<meta charset=utf-8> | ||
<title>Correctness of worklet animation state when timeline becomes newly | ||
active or inactive.</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> | ||
.scroller { | ||
overflow: auto; | ||
height: 100px; | ||
width: 100px; | ||
} | ||
.contents { | ||
height: 1000px; | ||
width: 100%; | ||
} | ||
</style> | ||
<body> | ||
<div id="log"></div> | ||
<script> | ||
'use strict'; | ||
|
||
function createScroller(test) { | ||
var scroller = createDiv(test); | ||
scroller.innerHTML = "<div class='contents'></div>"; | ||
scroller.classList.add('scroller'); | ||
return scroller; | ||
} | ||
|
||
function createScrollLinkedWorkletAnimation(test) { | ||
const timeline = new ScrollTimeline({ | ||
scrollSource: createScroller(test), | ||
timeRange: 1000 | ||
}); | ||
const DURATION = 10000; // ms | ||
const KEYFRAMES = { transform: ['translateY(100px)', 'translateY(200px)'] }; | ||
return new WorkletAnimation('passthrough', new KeyframeEffect(createDiv(test), | ||
KEYFRAMES, DURATION), timeline); | ||
} | ||
|
||
setup(setupAndRegisterTests, {explicit_done: true}); | ||
|
||
function setupAndRegisterTests() { | ||
registerPassthroughAnimator().then(() => { | ||
|
||
promise_test(async t => { | ||
const animation = createScrollLinkedWorkletAnimation(t); | ||
const scroller = animation.timeline.scrollSource; | ||
const maxScroll = scroller.scrollHeight - scroller.clientHeight; | ||
const timeRange = animation.timeline.timeRange; | ||
scroller.scrollTop = 0.2 * maxScroll; | ||
|
||
// Make the timeline inactive. | ||
scroller.style.display = "none" | ||
// Force relayout. | ||
scroller.scrollTop; | ||
|
||
animation.play(); | ||
assert_equals(animation.currentTime, null, | ||
'Initial current time must be unresolved in idle state.'); | ||
assert_equals(animation.startTime, null, | ||
'Initial start time must be unresolved in idle state.'); | ||
waitForAnimationFrameWithCondition(_=> { | ||
return animation.playState == "running" | ||
}); | ||
assert_equals(animation.currentTime, null, | ||
'Initial current time must be unresolved in playing state.'); | ||
assert_equals(animation.startTime, null, | ||
'Initial start time must be unresolved in playing state.'); | ||
|
||
// Make the timeline active. | ||
scroller.style.display = "" | ||
scroller.scrollTop; | ||
|
||
assert_times_equal(animation.currentTime, 200, | ||
'Current time must be initialized.'); | ||
assert_times_equal(animation.startTime, 0, | ||
'Start time must be initialized.'); | ||
|
||
// Make the timeline inactive again. | ||
scroller.style.display = "none" | ||
scroller.scrollTop; | ||
|
||
assert_times_equal(animation.currentTime, 200, | ||
'Current time must be the previous current time.'); | ||
assert_equals(animation.startTime, null, | ||
'Initial start time must be unresolved.'); | ||
|
||
}, 'When timeline time becomes inactive previous current time must be ' + | ||
'the current time and start time unresolved'); | ||
done(); | ||
}); | ||
} | ||
</script> | ||
</body> |