<!DOCTYPE html>
<title>Tests CSS animation of anchor(), dynamic position-anchor changes</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#cb {
border: 1px solid black;
width: 400px;
height: 400px;
position: relative;
}
#anchor1, #anchor2 {
width: 100px;
height: 100px;
background: tomato;
}
#anchor1 {
background: coral;
anchor-name: --a1;
}
#anchor2 {
background: seagreen;
anchor-name: --a2;
}
#anchored {
width: 50px;
height: 50px;
background: skyblue;
animation: --anim 9999s steps(2, start);
position: absolute;
position-anchor: --a1;
}
@keyframes --anim {
from { top: anchor(top); }
to { top: anchor(bottom); }
}
</style>
<div id=cb>
<div id=anchor1></div>
<div id=anchor2></div>
<div id=anchored></div>
</div>
<script>
test(() => {
assert_equals(anchored.offsetTop, 50);
anchored.style.positionAnchor = '--a2';
assert_equals(anchored.offsetTop, 150);
}, 'Animation with anchor() responds to position-anchor change');
</script>
Codebase Browser
chromium