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-function-in-calc-number-crash.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS Anchor Positioning: Crash with anchor functions in calc() with number fallback</title>
<style>
.anchor {
anchor-name: --a;
width: 100px;
height: 100px;
background: magenta;
}
.positioned {
position: absolute;
position-anchor: --a;
width: 10px;
height: 10px;
background: purple;
}
</style>
<div class=anchor></div>
<div class=positioned style="left: calc(anchor(left, Infinity) + 1px);"></div>
<div class=positioned style="left: calc(anchor(left, 0) + 1px);"></div>
<div class=positioned style="left: calc(anchor(left, 1) + 1px);"></div>
<div class=positioned style="width: calc(anchor-size(width, Infinity) + 1px);"></div>
<div class=positioned style="width: calc(anchor-size(width, 0) + 1px);"></div>
<div class=positioned style="width: calc(anchor-size(width, 1) + 1px);"></div>