/
anchor-position-multicol-colspan-001.html
100 lines (100 loc) · 3.12 KB
/
anchor-position-multicol-colspan-001.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<title>Anchors in column spanners in multicol</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-name">
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos">
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-size">
<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>
<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="checkLayout('.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.
https://drafts.csswg.org/css-multicol/#column-span
-->
<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>