blob: 9ad8ff8138b4102ca1bacc7339c9e91337aff99c (
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
|
<!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: position absolute and 'vertical-lr' - 'left' and 'right' are 'auto', 'width' is not 'auto' with 'direction: rtl' in initial containing block</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="abs-pos-non-replaced-icb-vrl-004-ref.xht" />
<meta content="image" name="flags" />
<meta content="This test checks that when the initial containing block's writing-mode is 'horizontal-tb' and its 'direction' is 'rtl', then an absolutely positioned box (with 'left' and 'right' are 'auto', 'width' is not 'auto') whose containing block is the initial containing block and whose direction is 'rtl' must set right to static position and then solve for 'left'. Whether such absolutely positioned box's 'writing-mode' is vertical or not is irrelevant." name="assert" />
<style type="text/css"><![CDATA[
html
{
direction: rtl;
}
img
{
vertical-align: top;
}
div#green-overlapping-test
{
background-color: green;
border-left: green solid 35px;
border-right: green solid 15px;
height: 100px;
left: auto;
position: absolute;
right: auto;
width: 50px;
writing-mode: vertical-lr;
}
/*
"
2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'rtl' set 'right' to the static position (...) Then solve for 'left' (if 'direction is 'rtl').
"
10.3.7 Absolutely positioned, non-replaced elements
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
So:
auto : left
+
0px : margin-left
+
35px : border-left-width
+
0px : padding-left
+
50px : width
+
0px : padding-right
+
15px : border-right-width
+
0px : margin-right
+
auto : right (set to static position)
====================
: width of containing block (width of Initial Containing Block)
becomes
solve : left
+
0px : margin-left
+
35px : border-left-width
+
0px : padding-left
+
50px : width
+
0px : padding-right
+
15px : border-right-width
+
0px : margin-right
+
8px : right (static position)
====================
: width of containing block (width of Initial Containing Block)
*/
div#red-overlapped-reference
{
background-color: red;
height: 100px;
width: 100px;
}
]]></style>
</head>
<body>
<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="green-overlapping-test"></div>
<div id="red-overlapped-reference"></div>
</body>
</html>
|
