Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 4 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-anchor-position/anchor-position-multicol-colspan-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Anchors in column spanners in multicol</title>
<link rel="author" href="mailto:kojii@chromium.org">
<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>
.relpos {
position: relative;
}
.columns {
column-count: 2;
column-fill: auto;
column-gap: 10px;
column-width: 100px;
width: 210px;
height: 100px;
}
.colspan {
column-span: all;
}
.spacer {
height: 10px;
background: pink;
}
.anchor1 {
anchor-name: --a1;
margin-left: 10px;
width: 40px;
height: 20px;
background: orange;
}
.target {
position: absolute;
left: anchor(--a1 left);
top: anchor(--a1 top);
width: anchor-size(--a1 width);
height: anchor-size(--a1 height);
background: lime;
opacity: .3;
}
</style>
<body onload="checkLayoutForAnchorPos('.target')">
<div class="relpos">
<div class="spacer" style="height: 10px"></div>
<div class="columns relpos">
<div class="spacer" style="height: 40px"></div>
<div class="relpos">
<div class="colspan">
<div class="relpos">
<!--
The containing block chain of this anchor is `relpos`, `colspan`,
and `columns`, skipping the 2nd `relpos`, because the containing
block of the spanner is the multicol container.
-->
<div class="anchor1"></div>
<!--
The containing block of this target is inside a spanner.
-->
<div class="target"
data-offset-x=10 data-offset-y=0
data-expected-width=40 data-expected-height=20></div>
</div>
<!--
The containing block of this target is the multicol container.
-->
<div class="target"
data-offset-x=10 data-offset-y=20
data-expected-width=40 data-expected-height=20></div>
</div>
<!--
The containing block of this target is in the multicol,
but outside of the spanner.
This should not find the anchor, because the containing block of the
spanner is the multicol container.
-->
<div class="target"
data-offset-x=0 data-offset-y=0
data-expected-width=0 data-expected-height=0></div>
</div>
<div class="spacer" style="height: 80px"></div>
<!--
The containing block of this target is the multicol container.
-->
<div class="target"
data-offset-x=10 data-offset-y=20
data-expected-width=40 data-expected-height=20></div>
</div>
<!--
The containing block of this target is outside of the multicol.
-->
<div class="target"
data-offset-x=10 data-offset-y=30
data-expected-width=40 data-expected-height=20></div>
</div>
</body>