3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
8 <title>CSS Test: Testing definite placement with non-existent line names
</title>
9 <link rel=
"author" title=
"Mats Palmgren" href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=1146051">
10 <style type=
"text/css">
13 font-family: monospace
;
24 top:0; left:0; width:20px; height:20px;
26 border: 1px solid black
;
27 box-sizing: border-box
;
30 .XeN { left: 20px; width: 80px; }
31 .XsN { width: 80px; } .XsN
~ span
{ top:20px; left:60px; }
32 .NeX { left: 20px; width: 80px; }
33 .NsX { width: 80px; } .NsX
~ span
{ left: 60px; top: 20px; }
34 .XeA { width: 100px; } .XeA
~ span
{ top: 20px; }
35 .XsA { width: 60px; } .XsA
~ span
{ left: 60px; }
36 .XsA2 { width: 80px; } .XsA2
~ span
{ left: 60px; top: 20px; }
37 .XsA3 { width: 120px; } .XsA3
~ span
{ left: 60px; top: 20px; }
38 .AsX { width: 60px;} .AsX
~ span
{ left: 60px; }
39 .xsN { } .xsN
~ span
{ left: 20px; }
40 .x2sN { width: 40px; } .x2sN
~ span
{ left: 40px; }
41 .xsN2 { width: 40px; } .xsN2
~ span
{ left: 20px; top: 20px; }
42 .xXs { } .xXs
~ span
{ left: 60px;}
43 .aXs { } .aXs
~ span
{ left: 60px;}
44 .aXe { left: 20px; width: 60px; }
45 .xXe { width: 100px; } .xXe
~ span
{ left: 20px; top: 20px; }
47 .AXe { width: 80px; } .AXe
~ span
{ top: 20px; }
48 .A2Xe { left: 20px; width: 60px; }
50 .XX3e { left: 60px; width: 40px; }
51 .XbXe { width: 100px; } .XbXe
~ span
{ top: 20px; left: 40px; }
52 .XX0b { } .XX0b
~ span
{ left: 60px; }
53 .XX1b { } .XX1b
~ span
{ left: 60px; }
54 .XX2b { width: 40px; } .XX2b
~ span
{ left: 60px; }
55 .XbN1 { width: 60px; } .XbN1
~ span
{ left: 60px; }
56 .XbN2 { width: 80px; } .XbN2
~ span
{ top: 20px; left: 60px; }
57 .Xbb { } .Xbb
~ span
{ left: 80px; }
58 .Xee { left: 60px; width:40px; }
59 .nX2s { width: 40px; } .nX2s
~ span
{ left: 80px; }
60 .nXs { width: 40px; } .nXs
~ span
{ left: 60px; }
61 .nXe { left: 20px; width: 40px; }
62 .nX2e { left: 40px; width: 40px; }
64 .nX3e { left: 60px; width: 40px; }
65 .n3Xe { width: 60px; } .n3Xe
~ span
{ top: 20px; }
66 .n4Xe { width: 80px; } .n4Xe
~ span
{ top: 20px; left: 20px; }
67 .Xen3 { left: 60px; width: 60px; }
69 .Xea2 { left: 60px; width: 40px; }
70 .Xea3 { left: 60px; width: 60px; }
71 .Xsa { } .Xsa
~ span
{ left: 20px; }
72 .Xsa2 { width: 40px; } .Xsa2
~ span
{ left: 20px; top: 20px; }
73 .Xsa4 { width: 100px; } .Xsa4
~ span
{ left: 20px; top: 20px; }
74 .Xs2a { width: 40px; } .Xs2a
~ span
{ left: 40px; }
75 .Xs2a2 { width: 60px; } .Xs2a2
~ span
{ left: 40px; top: 20px; }
76 .Xs2a4 { width: 120px; } .Xs2a4
~ span
{ left: 40px; top: 20px; }
77 .Xs3a { width: 60px; } .Xs3a
~ span
{ left: 60px; }
78 .Xs3a2 { width: 80px; } .Xs3a2
~ span
{ left: 60px; top: 20px; }
79 .Xs3a4 { width: 140px; } .Xs3a4
~ span
{ left: 60px; top: 20px; }
81 .nxe { width: 60px; } .nxe
~ span
{ top: 20px; }
82 .nx3e { width: 100px; } .nx3e
~ span
{ top: 20px; }
83 .n2x3e { left: 20px; width: 80px; }
84 .Axe { width: 60px; } .Axe
~ span
{ top: 20px; }
85 .A2xe { left: 20px; width: 40px; }
86 .Ax3e { width: 100px; } .Ax3e
~ span
{ top: 20px; }
87 .A2x3e { left: 20px; width: 80px; }
88 .Aa { } .Aa
~ span
{ top: 20px; }
89 .A2a { left: 20px; width: 40px; }
90 .Aa3 { width: 80px; } .Aa3
~ span
{ top: 20px; }
91 .AXs { width: 40px; } .AXs
~ span
{ left:40px; }
92 .A2Xs { width: 60px; } .A2Xs
~ span
{ left: 40px; top:20px; }
93 ._Xs { } ._Xs
~ span
{ left: 60px; }
95 ._xe { } ._xe
~ span
{ top: 20px; }
96 ._x3e { } ._x3e
~ span
{ top: 20px; }
98 ._xa { } ._xa
~ span
{ top: 20px; }
99 ._xa3 { } ._xa3
~ span
{ top: 20px; }
100 ._xn3 { width: 60px; } ._xn3
~ span
{ top: 20px; }
101 ._xn5 { width: 100px; } ._xn5
~ span
{ top: 20px; }
102 .Xs_ { } .Xs_
~ span
{ left: 20px; }
103 .X2s_ { } .X2s_
~ span
{ left: 40px; }
104 .X2e_ { left: 80px; }
105 .A_ { } .A_
~ span
{ top: 20px; }
107 .x3_ { } .x3_
~ span
{ top: 20px; }
108 .a2_ { } .a2_
~ span
{ top: 20px; }
109 .a-2_ { } .a-2_
~ span
{ top: 20px; }
110 ._n { } ._n
~ span
{ left: 20px; }
111 ._n2 { } ._n2
~ span
{ top: 20px; }
112 .A3Xe { left: 60px; }
113 .asA { } .asA
~ span
{ left: 20px; }
114 .asA2 { } .asA2
~ span
{ top: 20px; }
115 .a2sA2 { width: 40px; } .a2sA2
~ span
{ left: 20px; top: 20px; }
116 .as1 { } .as1
~ span
{ left: 20px; }
117 .as2 { } .as2
~ span
{ top: 20px; }
120 .c1 { background:grey
; }
127 <div style=
"float:left; width:140px">
128 <div class=
"grid"><span class=
"XeN" ></span><span class=
"c1"></span></div>
129 <div class=
"grid"><span class=
"XsN" ></span><span class=
"c1"></span></div>
130 <div class=
"grid"><span class=
"NeX" ></span><span class=
"c1"></span></div>
131 <div class=
"grid"><span class=
"NsX" ></span><span class=
"c1"></span></div>
132 <div class=
"grid"><span class=
"XeA" ></span><span class=
"c1"></span></div>
133 <div class=
"grid"><span class=
"XsA" ></span><span class=
"c1"></span></div>
134 <div class=
"grid"><span class=
"XsA2"></span><span class=
"c1"></span></div>
135 <div class=
"grid"><span class=
"XsA3"></span><span class=
"c1"></span></div>
136 <div class=
"grid"><span class=
"AsX" ></span><span class=
"c1"></span></div>
137 <div class=
"grid"><span class=
"xsN" ></span><span class=
"c1"></span></div>
138 <div class=
"grid"><span class=
"x2sN"></span><span class=
"c1"></span></div>
139 <div class=
"grid"><span class=
"xsN2"></span><span class=
"c1"></span></div>
140 <div class=
"grid"><span class=
"xXs" ></span><span class=
"c1"></span></div>
141 <div class=
"grid"><span class=
"aXs" ></span><span class=
"c1"></span></div>
142 <div class=
"grid"><span class=
"aXe" ></span><span class=
"c1"></span></div>
143 <div class=
"grid"><span class=
"xXe" ></span><span class=
"c1"></span></div>
146 <div style=
"float:left; width:140px">
147 <div class=
"grid"><span class=
"AXe" ></span><span class=
"c1"></span></div>
148 <div class=
"grid"><span class=
"A2Xe"></span><span class=
"c1"></span></div>
149 <div class=
"grid"><span class=
"XXe" ></span><span class=
"c1"></span></div>
150 <div class=
"grid"><span class=
"XX3e"></span><span class=
"c1"></span></div>
151 <div class=
"grid"><span class=
"XbXe"></span><span class=
"c1"></span></div>
152 <div class=
"grid"><span class=
"XX0b"></span><span class=
"c1"></span></div>
153 <div class=
"grid"><span class=
"XX1b"></span><span class=
"c1"></span></div>
154 <div class=
"grid"><span class=
"XX2b"></span><span class=
"c1"></span></div>
155 <div class=
"grid"><span class=
"XbN1"></span><span class=
"c1"></span></div>
156 <div class=
"grid"><span class=
"XbN2"></span><span class=
"c1"></span></div>
157 <div class=
"grid"><span class=
"Xbb" ></span><span class=
"c1"></span></div>
158 <div class=
"grid"><span class=
"Xee" ></span><span class=
"c1"></span></div>
159 <div class=
"grid"><span class=
"nX2s"></span><span class=
"c1"></span></div>
160 <div class=
"grid"><span class=
"nXs" ></span><span class=
"c1"></span></div>
161 <div class=
"grid"><span class=
"nXe" ></span><span class=
"c1"></span></div>
162 <div class=
"grid"><span class=
"nX2e"></span><span class=
"c1"></span></div>
165 <div style=
"float:left; width:140px">
166 <div class=
"grid"><span class=
"nX3e" ></span><span class=
"c1"></span></div>
167 <div class=
"grid"><span class=
"n3Xe" ></span><span class=
"c1"></span></div>
168 <div class=
"grid"><span class=
"n4Xe" ></span><span class=
"c1"></span></div>
169 <div class=
"grid"><span class=
"Xen3" ></span><span class=
"c1"></span></div>
170 <div class=
"grid"><span class=
"Xea" ></span><span class=
"c1"></span></div>
171 <div class=
"grid"><span class=
"Xea2" ></span><span class=
"c1"></span></div>
172 <div class=
"grid"><span class=
"Xea3" ></span><span class=
"c1"></span></div>
173 <div class=
"grid"><span class=
"Xsa" ></span><span class=
"c1"></span></div>
174 <div class=
"grid"><span class=
"Xsa2" ></span><span class=
"c1"></span></div>
175 <div class=
"grid"><span class=
"Xsa4" ></span><span class=
"c1"></span></div>
176 <div class=
"grid"><span class=
"Xs2a" ></span><span class=
"c1"></span></div>
177 <div class=
"grid"><span class=
"Xs2a2"></span><span class=
"c1"></span></div>
178 <div class=
"grid"><span class=
"Xs2a4"></span><span class=
"c1"></span></div>
179 <div class=
"grid"><span class=
"Xs3a" ></span><span class=
"c1"></span></div>
180 <div class=
"grid"><span class=
"Xs3a2"></span><span class=
"c1"></span></div>
181 <div class=
"grid"><span class=
"Xs3a4"></span><span class=
"c1"></span></div>
184 <div style=
"float:left; width:140px">
185 <div class=
"grid"><span class=
"nxe" ></span><span class=
"c1"></span></div>
186 <div class=
"grid"><span class=
"nx3e" ></span><span class=
"c1"></span></div>
187 <div class=
"grid"><span class=
"n2x3e"></span><span class=
"c1"></span></div>
188 <div class=
"grid"><span class=
"Axe" ></span><span class=
"c1"></span></div>
189 <div class=
"grid"><span class=
"A2xe" ></span><span class=
"c1"></span></div>
190 <div class=
"grid"><span class=
"Ax3e" ></span><span class=
"c1"></span></div>
191 <div class=
"grid"><span class=
"A2x3e"></span><span class=
"c1"></span></div>
192 <div class=
"grid"><span class=
"Aa" ></span><span class=
"c1"></span></div>
193 <div class=
"grid"><span class=
"A2a" ></span><span class=
"c1"></span></div>
194 <div class=
"grid"><span class=
"Aa3" ></span><span class=
"c1"></span></div>
195 <div class=
"grid"><span class=
"AXs" ></span><span class=
"c1"></span></div>
196 <div class=
"grid"><span class=
"A2Xs" ></span><span class=
"c1"></span></div>
197 <div class=
"grid"><span class=
"_Xs" ></span><span class=
"c1"></span></div>
198 <div class=
"grid"><span class=
"_Xe" ></span><span class=
"c1"></span></div>
199 <div class=
"grid"><span class=
"_xe" ></span><span class=
"c1"></span></div>
200 <div class=
"grid"><span class=
"_x3e" ></span><span class=
"c1"></span></div>
203 <div style=
"float:left; width:140px">
204 <div class=
"grid"><span class=
"_xa" ></span><span class=
"c1"></span></div>
205 <div class=
"grid"><span class=
"_xa3"></span><span class=
"c1"></span></div>
206 <div class=
"grid"><span class=
"_xn3"></span><span class=
"c1"></span></div>
207 <div class=
"grid"><span class=
"_xn5"></span><span class=
"c1"></span></div>
208 <div class=
"grid"><span class=
"Xs_" ></span><span class=
"c1"></span></div>
209 <div class=
"grid"><span class=
"X2s_"></span><span class=
"c1"></span></div>
210 <div class=
"grid"><span class=
"X2e_"></span><span class=
"c1"></span></div>
211 <div class=
"grid"><span class=
"A_" ></span><span class=
"c1"></span></div>
212 <div class=
"grid"><span class=
"A2_" ></span><span class=
"c1"></span></div>
213 <div class=
"grid"><span class=
"x3_" ></span><span class=
"c1"></span></div>
214 <div class=
"grid"><span class=
"a2_" ></span><span class=
"c1"></span></div>
215 <div class=
"grid"><span class=
"a-2_"></span><span class=
"c1"></span></div>
216 <div class=
"grid"><span class=
"_n" ></span><span class=
"c1"></span></div>
217 <div class=
"grid"><span class=
"_n2" ></span><span class=
"c1"></span></div>
218 <div class=
"grid"><span class=
"A3Xe"></span><span class=
"c1"></span></div>
219 <div class=
"grid"><span class=
"asA"></span><span class=
"c1"></span></div>
222 <div style=
"float:left; width:140px; clear:both">
223 <div class=
"grid"><span class=
"asA2"></span><span class=
"c1"></span></div>
224 <div class=
"grid"><span class=
"a2sA2"></span><span class=
"c1"></span></div>
225 <div class=
"grid"><span class=
"as1"></span><span class=
"c1"></span></div>
226 <div class=
"grid"><span class=
"as2"></span><span class=
"c1"></span></div>
227 <div class=
"grid"><span class=
"as3"></span><span class=
"c1"></span></div>