blob: 3afb4a78f76b5085cfaf0563ef24a306ce7152b2 (
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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Multi-column Layout Test: '-moz-column-span: all' element with block children (complex)</title>
<link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 -->
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" />
<link rel="bookmark" title="[css3-multicol] spanning element with only block children" href="http://lists.w3.org/Archives/Public/www-style/2013Aug/0318.html" />
<link rel="match" href="multicol-span-all-child-002-ref.xht" />
<meta name="flags" content="may" />
<meta name="assert" content="This test checks how spanning elements with block children is rendered inside a multi-column element with a set height which is insufficient for rendering both spanning elements entirely. Since available space (height of 8em) is insufficient to render both spanning elements (4 times 4em plus 2em) entirely inside the multi-column element, then UA may treat '-moz-column-span: all' as '-moz-column-span: none'." />
<style type="text/css"><![CDATA[
html {background-color: white;}
body
{
background-color: black;
height: 8em;
orphans: 1;
widows: 1;
width: 10em;
-moz-column-count: 2;
-moz-column-gap: 0em;
/*
N == 2;
W == 5em;
*/
}
div, p
{
font: 1em/1 serif;
margin-top: 0em;
-moz-column-span: all;
}
span
{
color: black;
display: block;
height: 4em;
width: 5em;
}
]]></style>
</head>
<body>
<div>
<span>FAIL</span>
<span>FAIL</span>
<span>FAIL</span>
<span>FAIL</span>
</div>
<p>abc deg ghk mno</p>
<!--
Expected results:
************************
|FAIL |FAIL |abc deg
| | |ghk mno
| | |
| | |
|FAIL |FAIL |
| | |
| | |
| | |
************************
The test presumes, postulates that
"abc deg" occupies not more than 5em.
-->
</body>
</html>
|
