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-chain.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Tests that chain of elements that anchor to each other using anchor() works.</title>
<link rel="author" title="Kiet Ho" href="mailto:kiet.ho@apple.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script src="support/test-common.js"></script>
<style>
.containing-block {
border: 1px solid black;
position: relative;
width: 500px;
height: 200px;
}
.box {
position: absolute;
left: calc(anchor(--box right) + 10px);
anchor-name: --box;
width: 50px;
height: 50px;
background-color: green;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
</style>
<body onload="checkLayoutForAnchorPos('.target')">
<p>You should see a row of five boxes in order.</p>
<div class="containing-block">
<div class="box target" data-offset-x="0" data-offset-y="0">1</div>
<div class="box target" data-offset-x="60" data-offset-y="0">2</div>
<div class="box target" data-offset-x="120" data-offset-y="0">3</div>
<div class="box target" data-offset-x="180" data-offset-y="0">4</div>
<div class="box target" data-offset-x="240" data-offset-y="0">5</div>
</div>
</body>