Morten Stenshorne
9c941a81ba
Automatic update from web-platform-tests [anchor] Main thread animation if first frame doesn't change anything. This is a follow-up to https://crrev.com/c/7123703 , but it was blocked on other problems, which got fixed by https://crrev.com/c/7239030 . We can now get anchor animations that don't change any styles right away (i.e. no visual updates until further into the animation) to trigger relayout of anchor-positioned elements when needed. If the very first animation frame actually has style changes that affect layout (e.g. transforms that affect an anchor), we still haven't moved the work off the main thread, and we'll therefore lay out, and by doing that, HasRunningAnchorTransformAnimation() in PhysicalFragment will return true, which in turn will make sure that the animation keeps running on the main thread. This was already working. On the other hand, if the first frame of an animation *doesn't* change style that affects layout, the animation would be moved to the compositor thread, and we'd never hear from it again, not even when any style changes actually occur later on. To fix this, detect that a transform-related animation wants to run on the compositor, mark for layout, so that the physical fragments get updated for HasRunningAnchorTransformAnimation(), so that we'll be able to keep the animation on the main thread Note: The test included would only fail with run_wpt_tests, not run_web_tests. Bug: 382294252 Change-Id: I193c354f0e28b4b908d75ce1b200c2c8142be43c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7451459 Commit-Queue: Morten Stenshorne <mstensho@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/main@{#1571069} -- wpt-commits: ce54b1820458ba1da5554e3d41a73d89afe2a345 wpt-pr: 57230
55 lines
1.6 KiB
HTML
55 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<title>Animated anchor transform, animation effect not changing computed value initially</title>
|
|
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
|
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#determining-position">
|
|
<style>
|
|
#anchor {
|
|
anchor-name: --a;
|
|
width: 200px;
|
|
height: 200px;
|
|
transform: translateX(0);
|
|
background: hotpink;
|
|
}
|
|
#anchored {
|
|
position: absolute;
|
|
position-anchor: --a;
|
|
position-area: bottom right;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: cyan;
|
|
}
|
|
@keyframes anim {
|
|
0% { transform: translateX(0) }
|
|
50% { transform: translateX(0) }
|
|
100% { transform: translateX(200px) }
|
|
}
|
|
</style>
|
|
<div style="contain:layout; width:400px; height:400px;">
|
|
<div id="anchor"></div>
|
|
<div id="anchored"></div>
|
|
</div>
|
|
|
|
<script src="support/test-common.js"></script>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script>
|
|
const done = Promise.withResolvers();
|
|
let got_halfway = false;
|
|
const observer = new ResizeObserver((entries)=> {
|
|
assert_equals(entries.length, 1);
|
|
const inlineSize = entries[0].contentBoxSize[0].inlineSize;
|
|
if (inlineSize > 30 && inlineSize < 170) {
|
|
got_halfway = true;
|
|
done.resolve();
|
|
}
|
|
});
|
|
anchor.onanimationend = ()=> { done.reject(); }
|
|
|
|
promise_test(async t => {
|
|
anchor.style.animation = "2000ms linear anim";
|
|
observer.observe(anchored);
|
|
await done.promise;
|
|
assert_true(got_halfway, "animation frame somewhere in the middle");
|
|
}, "Animation being updated");
|
|
</script>
|