blob: 4cd0f42bcae84b3df5e925363423781a0dcaa292 (
plain)
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: column-gap supports percentages</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#column-gap">
<meta name="assert" content="This test checks the behavior of precentage column-gap in different situations depending on the multicol container size.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.multicol {
position: relative;
font: 20px/1 Ahem;
margin: 10px;
column-count: 2;
column-gap: 25%;
background: yellow;
}
.fixed200 {
width: 200px;
}
.inlineBlock {
display: inline-block;
}
.wrapper200 {
width: 200px;
}
.wrapper8 {
width: 8px;
}
.marginTopBottom {
margin: 10px 0;
}
.multicol > :nth-child(1) { background: magenta; }
.multicol > :nth-child(2) { background: cyan; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.multicol')">
<div id="log"></div>
<h3>Multicol container: fixed width</h3>
<div class="multicol fixed200" data-expected-width="200" data-expected-height="20">
<div data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="20">X</div>
<div data-offset-x="125" data-offset-y="0" data-expected-width="75" data-expected-height="20">X</div>
</div>
<div class="multicol fixed200"
data-expected-width="200" data-expected-height="40">
<div data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="40">XX X X</div>
<div data-offset-x="125" data-offset-y="0" data-expected-width="75" data-expected-height="40">XX X X</div>
</div>
<div class="multicol fixed200"
data-expected-width="200" data-expected-height="20">
<div data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="20">XXXXX</div>
<div data-offset-x="125" data-offset-y="0" data-expected-width="75" data-expected-height="20">XXXXX</div>
</div>
<h3>Multicol container: intrinsic width</h3>
<div class="multicol inlineBlock"
data-expected-width="40" data-expected-height="20">
<div data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="20">X</div>
<div data-offset-x="25" data-offset-y="0" data-expected-width="15" data-expected-height="20">X</div>
</div>
<div class="multicol inlineBlock"
data-expected-width="240" data-expected-height="40">
<div data-offset-x="0" data-offset-y="0" data-expected-width="90" data-expected-height="40">XX X X</div>
<div data-offset-x="150" data-offset-y="0" data-expected-width="90" data-expected-height="40">XX X X</div>
</div>
<div class="multicol inlineBlock"
data-expected-width="200" data-expected-height="20">
<div data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="20">XXXXX</div>
<div data-offset-x="125" data-offset-y="0" data-expected-width="75" data-expected-height="20">XXXXX</div>
</div>
<h3>Multicol container: auto width</h3>
<div class="wrapper200">
<div class="multicol marginTopBottom"
data-expected-width="200" data-expected-height="20">
<div data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="20">X</div>
<div data-offset-x="125" data-offset-y="0" data-expected-width="75" data-expected-height="20">X</div>
</div>
<div class="multicol marginTopBottom"
data-expected-width="200" data-expected-height="40">
<div data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="40">XX X X</div>
<div data-offset-x="125" data-offset-y="0" data-expected-width="75" data-expected-height="40">XX X X</div>
</div>
<div class="multicol marginTopBottom"
data-expected-width="200" data-expected-height="20">
<div data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="20">XXXXX</div>
<div data-offset-x="125" data-offset-y="0" data-expected-width="75" data-expected-height="20">XXXXX</div>
</div>
</div>
<div class="wrapper8">
<div class="multicol marginTopBottom"
data-expected-width="8" data-expected-height="20">
<div data-offset-x="0" data-offset-y="0" data-expected-width="3" data-expected-height="20">X</div>
<div data-offset-x="5" data-offset-y="0" data-expected-width="3" data-expected-height="20">X</div>
</div>
<div class="multicol marginTopBottom"
data-expected-width="8" data-expected-height="60">
<div data-offset-x="0" data-offset-y="0" data-expected-width="3" data-expected-height="60">XX X X</div>
<div data-offset-x="5" data-offset-y="0" data-expected-width="3" data-expected-height="60">XX X X</div>
</div>
<div class="multicol marginTopBottom"
data-expected-width="8" data-expected-height="20">
<div data-offset-x="0" data-offset-y="0" data-expected-width="3" data-expected-height="20">XXXXX</div>
<div data-offset-x="5" data-offset-y="0" data-expected-width="3" data-expected-height="20">XXXXX</div>
</div>
</div>
|
