Morten Stenshorne
57441af46b
Automatic update from web-platform-tests [anchor] Request main frame animation if anchors animate transforms. If transforms on an anchor affects layout of its anchored elements, animations cannot run on the compositor thread without involving the main thread. Without this fix, if a transform change on an anchor was animated, we'd rely on main frame animations being triggered by something else (e.g. by moving the mouse cursor), which was bad for correctness. With this fix, such animations will correctly cause anchored elements to be relaid out during the animation, although this layout may be behind by a frame or two. Bug: 382294252 Change-Id: Ib6c94077ed44ada7d5f1afd7bbda6f4e774ed9ba Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7123703 Reviewed-by: Robert Flack <flackr@chromium.org> Commit-Queue: Morten Stenshorne <mstensho@chromium.org> Reviewed-by: Chris Harrelson <chrishtr@chromium.org> Reviewed-by: Stefan Zager <szager@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1546313} -- wpt-commits: 384f438c011fc68f333c6acb48f077d3eec1d515 wpt-pr: 56080
68 lines
1.9 KiB
HTML
68 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<title>Animated anchor transform in iframe</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">
|
|
<iframe id="iframe" style="width:300px; height:400px;" srcdoc='
|
|
<style>
|
|
#anchor {
|
|
anchor-name: --a;
|
|
width: 200px;
|
|
height: 200px;
|
|
translate: 0;
|
|
background: hotpink;
|
|
}
|
|
#anchored {
|
|
position: absolute;
|
|
position-anchor: --a;
|
|
position-area: bottom right;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: cyan;
|
|
}
|
|
@keyframes anim {
|
|
from { translate: 0; }
|
|
to { translate: 100px; }
|
|
}
|
|
body { margin: 0; }
|
|
</style>
|
|
<div id="anchor"></div>
|
|
<div id="anchored"></div>
|
|
<script>
|
|
const done = Promise.withResolvers();
|
|
let got_halfway = false;
|
|
const observer = new ResizeObserver((entries)=> {
|
|
const inlineSize = entries[0].contentBoxSize[0].inlineSize;
|
|
if (inlineSize > 30 && inlineSize < 90) {
|
|
got_halfway = true;
|
|
done.resolve();
|
|
}
|
|
});
|
|
anchor.onanimationend = ()=> { done.reject(); }
|
|
|
|
async function runTest() {
|
|
await new Promise(resolve => { window.onmessage = resolve; });
|
|
anchor.style.animation = "2000ms linear anim";
|
|
try {
|
|
observer.observe(anchored);
|
|
await done.promise;
|
|
observer.unobserve(anchored);
|
|
anchor.style.animation = "none";
|
|
} catch (e) {}
|
|
window.top.postMessage(got_halfway);
|
|
}
|
|
runTest();
|
|
</script>
|
|
'></iframe>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script>
|
|
promise_test(async t => {
|
|
await new Promise(resolve => { window.onload = resolve; });
|
|
iframe.contentWindow.postMessage("go");
|
|
let success = await new Promise(resolve => {
|
|
window.onmessage = function(e) { resolve(e.data); };
|
|
});
|
|
assert_true(success, "animation frame somewhere in the middle");
|
|
}, "Animation being updated");
|
|
</script>
|