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
133
134
135
136
|
<!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 Writing Modes Test: 'float' and 'shrink-to-fit' logical width (16 sub-tests)</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
<meta content="ahem" name="flags" />
<meta content="This test checks that 'shrink-to-fit' rule (CSS2.1, §10.3.5) is applied onto logical width in vertical writing-modes. This test thoroughly checks systematically the 16 combinations of 'writing-mode: vertical-rl', 'writing-mode: vertical-lr', with 'float: left', with 'float: right' and with left and/or right border(s). Not tested here is 'padding-left' and 'padding-right'." name="assert" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style type="text/css"><![CDATA[
div.test
{
background-color: red;
font: 100px/1 Ahem; /* computes to 100px/100px */
}
div.floated-right
{
float: right;
}
div.floated-left
{
float: left;
}
div.vrl
{
writing-mode: vertical-rl;
}
div.vlr
{
writing-mode: vertical-lr;
}
div.left-border
{
border-left: red solid 1em;
}
div.right-border
{
border-right: red solid 1em;
}
div#reference-overlapped-green
{
background-color: green;
height: 100px;
position: relative;
width: 100px;
z-index: -1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="test floated-right vlr">
<div class="left-border right-border"></div>
</div>
<div class="test floated-right vlr">
<div class="left-border right-border"></div>
</div>
<div class="test floated-right vrl">
<div class="left-border right-border"></div>
</div>
<div class="test floated-right vrl">
<div class="left-border right-border"></div>
</div>
<div class="test floated-right vlr">
<div class="left-border"></div>
</div>
<div class="test floated-right vlr">
<div class="right-border"></div>
</div>
<div class="test floated-right vrl">
<div class="left-border"></div>
</div>
<div class="test floated-right vrl">
<div class="right-border"></div>
</div>
<div class="test floated-left vlr">
<div class="left-border right-border"></div>
</div>
<div class="test floated-left vlr">
<div class="left-border right-border"></div>
</div>
<div class="test floated-left vrl">
<div class="left-border right-border"></div>
</div>
<div class="test floated-left vrl">
<div class="left-border right-border"></div>
</div>
<div class="test floated-left vlr">
<div class="left-border"></div>
</div>
<div class="test floated-left vlr">
<div class="right-border"></div>
</div>
<div class="test floated-left vrl">
<div class="left-border"></div>
</div>
<div class="test floated-left vrl">
<div class="right-border"></div>
</div>
<div id="reference-overlapped-green"></div>
</body>
</html>
|
