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-fixed-pos-descendant.html - WPT Dashboard Interop Dashboard
<!doctype html>
<title>Anchor positioning to your own descendant shouldn't work</title>
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="match" href="anchor-fixed-pos-descendant-ref.html">
<style>
p {
display: block;
outline: 1px solid;
height: 1lh;
anchor-name: --foo;
anchor-scope: --foo;
overflow: hidden;
resize: horizontal;
}
p > span {
position: fixed;
pointer-events: none;
inset: anchor(--foo inside);
left: anchor(--anchor right, 0);
right: anchor(--foo right, 0);
&::before {
content: "";
position: absolute;
inset: 0;
anchor-name: --anchor;
width: 10px;
background-color: pink;
}
}
</style>
<p style="width: 100px"><span></span></p>