blob: c027826144e03dffd07b59e975a4cedcc37b9918 (
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.region, .content {
font: 50px/1 Ahem, sans-serif;
}
.region {
width: 100px;
height: 100px;
shape-inside: rectangle(0, 0, 100%, 100%);
}
.content * {
color: green;
width: 100px;
overflow-wrap: break-word;
}
.region.inline-block { -webkit-flow-from: inline-block-flow; }
.content.inline-block { -webkit-flow-into: inline-block-flow; }
.region.float { -webkit-flow-from: float-flow; }
.content.float { -webkit-flow-into: float-flow; }
.region.list { -webkit-flow-from: list-flow; }
.content.list { -webkit-flow-into: list-flow; }
.region.table { -webkit-flow-from: table-flow; }
.content.table { -webkit-flow-into: table-flow; }
.region.old-flexbox { -webkit-flow-from: old-flexbox-flow; }
.content.old-flexbox { -webkit-flow-into: old-flexbox-flow; }
.region.new-flexbox { -webkit-flow-from: new-flexbox-flow; }
.content.new-flexbox { -webkit-flow-into: new-flexbox-flow; }
.region.grid { -webkit-flow-from: grid-flow; }
.content.grid { -webkit-flow-into: grid-flow; }
.inline-block.content * {
display: inline-block;
}
.float.content * {
float: left;
}
.list.content ul {
margin: 0;
padding: 0;
display: inline-block;
list-style: none;
}
.table.content table {
display: inline-table;
border-collapse: collapse;
}
.table.content tr {
dispay: inline-table;
}
.table.content td, .table.content tr {
padding: 0; margin: 0;
}
.old-flexbox.content * {
display: -webkit-inline-box;
}
.new-flexbox.content * {
display: -webkit-inline-flex;
}
.grid.content * {
display: inline-grid;
grid-template-rows: 100px;
grid-template-columns: 100px;
}
.grid.content * {
grid-row-start: 1;
grid-column-start: 1;
}
</style>
</head>
<body>
<p>This test covers inline blocks and floats inside of regions with a shape-inside set.
It requires the Ahem font. For each test case, you should see a 2x2 green square.</p>
<p>Inline blocks</p>
<div class='region inline-block'></div>
<div class='content inline-block'>
<div>xxxx</div>
</div>
<p>Floats</p>
<div class='region float'></div>
<div class='content float'>
<div>xxxx</div>
</div>
<p>Lists</p>
<div class='region list'></div>
<div class='content list'>
<ul>
<li>xx</li>
<li>xx</li>
</ul>
</div>
<p>Tables</p>
<div class='region table'></div>
<div class='content table'>
<table>
<tr><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td></tr>
</table>
</div>
<p>Old FlexBox</p>
<div class='region old-flexbox'></div>
<div class='content old-flexbox'>
<div>xxxx</div>
</div>
<p>New FlexBox</p>
<div class='region new-flexbox'></div>
<div class='content new-flexbox'>
<div>xxxx</div>
</div>
<p>Grid</p>
<div class='region grid'></div>
<div class='content grid'>
<div>xxxx</div>
</div>
</body>
</html>
|
