Kiet Ho
aaa3d7bd11
Automatic update from web-platform-tests WebKit export of https://bugs.webkit.org/show_bug.cgi?id=313698 -- wpt-commits: 974e0108b6533dee56f967b11e3ce382eac41a53 wpt-pr: 59706
62 lines
1.7 KiB
HTML
62 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<title>Anchor with transformed opacity and translate</title>
|
|
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
|
<link rel="author" title="Kiet Ho" href="mailto:kiet.ho@apple.com">
|
|
<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);
|
|
opacity: 0.2;
|
|
background: hotpink;
|
|
}
|
|
#anchored {
|
|
position: absolute;
|
|
position-anchor: --a;
|
|
position-area: bottom right;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: cyan;
|
|
}
|
|
@keyframes anim {
|
|
from {
|
|
transform: translateX(0);
|
|
opacity: 0.2;
|
|
}
|
|
|
|
to {
|
|
transform: translateX(200px);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
<div style="contain:layout; width:400px; height:400px;">
|
|
<div id="anchor"></div>
|
|
<div id="anchored"></div>
|
|
</div>
|
|
|
|
<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);
|
|
try { await done.promise; } catch(e) {}
|
|
assert_true(got_halfway, "animation frame somewhere in the middle");
|
|
}, "Animation being updated");
|
|
</script>
|