Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-anchor-position/anchor-animation-iacvt.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Tests CSS animation of anchor(), IACVT behavior</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;
}
#anchored {
width: 50px;
height: 50px;
background: skyblue;
animation: --anim 9999s linear;
position: absolute;
top: 42px; /* This should be overwritten by the anim. effect value. */
}
@keyframes --anim {
from { top: anchor(--unknown top); }
to { top: anchor(--unknown bottom); }
}
</style>
<div id=cb>
<div id=anchored></div>
</div>
<script>
test(() => {
assert_equals(anchored.offsetTop, 0); // auto
}, 'Animation of invalid anchor() with no fallback');
</script>