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-position-grid-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<link rel="author" href="mailto:kojii@chromium.org">
<link rel="author" href="mailto:mstensho@chromium.org">
<link rel="match" href="anchor-position-grid-001-ref.html">
<style>
.cb {
position: relative;
}
.columns {
column-count: 3;
column-fill: auto;
column-gap: 10px;
width: 620px;
height: 100px;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 100px);
grid-template-rows: 50px 100px;
}
.anchor1 {
anchor-name: --a1;
grid-column: 2;
grid-row: 2;
border: 2px solid red;
border-width: 5px 6px 7px 8px;
background: green;
}
.target {
grid-column: 2;
grid-row: 2;
position: absolute;
width: anchor-size(--a1 width);
height: anchor-size(--a1 height);
background: lime;
}
.target1-l {
left: anchor(--a1 left);
top: anchor(--a1 top);
width: 8px;
}
.target1-r {
right: anchor(--a1 right);
bottom: anchor(--a1 bottom);
width: 6px;
}
.target1-t {
left: anchor(--a1 left);
top: anchor(--a1 top);
height: 5px;
}
.target1-b {
right: anchor(--a1 right);
bottom: anchor(--a1 bottom);
height: 7px;
}
</style>
<p>There should be a green square with a lime border, split over two
columns. There should be no red.</p>
<div class="columns">
<div style="height: 10px"></div>
<div class="grid cb">
<div><br></div>
<div><br></div>
<div><br></div>
<div class="anchor1"></div>
<div class="target target1-l" data-offset-x=100 data-expected-height=100></div>
<div class="target target1-r" data-offset-x=194 data-expected-height=100></div>
<div class="target target1-t" data-offset-y=50 data-expected-width=100></div>
<div class="target target1-b" data-offset-y=145 data-expected-width=100></div>
</div>
</div>