Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-anchor-position/anchor-size-animation.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Tests CSS animation of anchor-size()</title>
<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;
width: 200px;
}
#anchored {
width: 50px;
height: 50px;
background: skyblue;
animation: --anim 9999s steps(2, start);
position: absolute;
}
@keyframes --anim {
from { width: anchor-size(--a1 width); }
to { width: anchor-size(--a2 width); }
}
</style>
<div id=cb>
<div id=anchor1></div>
<div id=anchor2></div>
<div id=anchored></div>
</div>
<script>
test(() => {
assert_equals(anchored.offsetWidth, 150);
}, 'Animation with anchor-size()');
</script>