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
137
138
139
140
141
142
143
144
145
146
147
148
|
<!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: non-replaced block in normal flow with 'direction: rtl' in vertical-rl (overconstrained)</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/#logical-direction-layout" title="7.4 Flow-Relative Mappings" />
<link rel="match" href="abs-pos-non-replaced-vrl-012-ref.xht" />
<meta name="flags" content="ahem image" />
<meta name="assert" content="This test checks that when an inline dimension of a non-replaced block in normal flow is over-constrained, the inline-end margin is dropped and recalculated so that the equation involving inline-size is balanced; such equation takes under account the inline's direction (ltr or rtl). In this test, the inline-end margin (physical margin-top) is recalculated." />
<!--
"
the margin that is dropped when a box’s inline dimension is over-constrained is the end margin as determined by the writing mode of the containing block.
"
7.4 Flow-Relative Mappings
http://www.w3.org/TR/css-writing-modes-3/#logical-direction-layout
"
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead.
"
CSS 2.1, section 10.3.3 Block-level, non-replaced elements in normal flow
http://www.w3.org/TR/CSS21/visudet.html#blockwidth
-->
<meta name="DC.date.created" content="2015-10-16T09:54:03+11:00" scheme="W3CDTF" />
<meta name="DC.date.modified" content="2017-02-18T09:54:03+11:00" scheme="W3CDTF" />
<style type="text/css"><![CDATA[
html
{
writing-mode: vertical-rl;
background-image: url("support/bg-red-3col-2row-320x320.png");
background-position: -152px 8px;
/* first value represents the horizontal position and the second represents the vertical position */
/*
8px (body's margin-left)
-
80px (4th column width)
-
80px (3rd column width)
========
-152px
*/
background-repeat: no-repeat;
}
#containing-block
{
direction: rtl;
height: 320px;
}
p
{
direction: ltr;
margin-left: 16px;
margin-right: 16px;
}
#test
{
background-color: green;
margin-top: 160px;
border-top: green solid 20px;
padding-top: 20px;
height: 0px;
padding-bottom: 20px;
border-bottom: green solid 20px;
margin-bottom: 160px;
margin-right: 96px; /* 80px + 16px necessary so that we can reuse an already created and available reference file */
width: 80px;
}
/*
"
Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to the horizontal dimension in horizontal writing modes instead apply to the vertical dimension in vertical writing modes.
"
7.1 Principles of Layout in Vertical Writing Modes
http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
So here, *-top and *-bottom properties are input into the §10.3.3 algorithms where *-top properties refer to *-left properties in the layout rules and where *-bottom properties refer to *-right properties in the layout rules.
'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' = height of containing block
So:
160px : margin-top
+
20px : border-top-width
+
20px : padding-top
+
0px : height
+
20px : padding-bottom
+
20px : border-bottom-width
+
160px : margin-bottom
========================
400px : while the height of containing block of div is 320px
So, here, the specified value of 'margin-top' is ignored and the value is calculated so as to make the equality true
(solve) : margin-top
+
20px : border-top-width
+
20px : padding-top
+
0px : height
+
20px : padding-bottom
+
20px : border-bottom-width
+
160px : margin-bottom
========================
320px : height of containing block
And so computed margin-top value must be 80px .
*/
]]></style>
</head>
<body>
<div id="containing-block">
<p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="36" alt="Image download support must be enabled" /></p>
<!--
The image says:
Test passes if there is a filled
green square and <strong>no red</strong>.
-->
<div id="test"></div>
</div>
</body>
</html>
|
