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-size-function-chain-pseudo-elements.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Tests that chain of elements that anchor to each other using anchor-size() works.</title>
<link rel="author" title="Kiet Ho" href="mailto:kiet.ho@apple.com">
<link rel="match" href="anchor-size-function-chain-pseudo-elements-ref.html">
<style>
.containing-block {
border: 1px solid black;
position: relative;
width: 500px;
height: 200px;
}
.box-before::before, .box-after::after {
/* Can only use anchor-size() with position: absolute */
position: absolute;
anchor-name: --box;
width: calc(anchor-size(--box width) + 10px);
height: calc(anchor-size(--box height) + 20px);
background-color: green;
content: "";
}
#box1::before, #box1::after {
width: 50px;
height: 60px;
}
#box2::before, #box2::after { left: 60px; }
#box3::before, #box3::after { left: 130px; }
#box4::before, #box4::after { left: 210px; }
#box5::before, #box5::after { left: 300px; }
</style>
<p>You should see a row of five rectangles growing in size.</p>
<div class="containing-block">
<!--
The increasing size is to check that the boxes are anchoring to each other
in the correct order i.e box2 chains to box1, box3 chains to box2, ...
-->
<div class="box-after" id="box1"></div>
<div class="box-before" id="box2"></div>
<div class="box-before" id="box3"></div>
<div class="box-after" id="box4"></div>
<div class="box-before" id="box5"></div>
</div>