layout/reftests/box-properties/CSS21-t100303-simple.xhtml@7e26c7da4463
layout/reftests/box-properties/CSS21-t100303-simple.xhtml
Wed, 31 Dec 2014 06:55:50 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:55:50 +0100
- changeset 2
- 7e26c7da4463
- permissions
- -rw-r--r--
Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>CSS 2.1 Test Suite: Block-level, non-replaced elements in normal flow</title>
5 <!--
7 THIS IS NOT THE FULL TEST. IT HAS BEEN MODIFIED TO WORK
8 AROUND THE FOLLOWING BUG:
9 https://bugzilla.mozilla.org/show_bug.cgi?id=423306
10 BY MAKING THE INTERMEDIATE ELEMENT NOT HAVE CHANGING 'direction'
12 -->
13 <link rel="author" title="L. David Baron" href="http://dbaron.org/" />
14 <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
15 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth" />
16 <meta name="flags" content="" />
17 <style type="text/css"><![CDATA[
19 body { direction: ltr; }
20 div { height: 1px; }
22 /* containing block */
23 body > div {
24 margin: 0 17px 0 3px;
25 border: medium solid transparent;
26 border-width: 0 154px 0 157px;
27 padding: 0 6px 0 2px;
28 width: 350px;
29 }
30 /* parent that is not containing block */
31 /* COMMENTED OUT PER WORKAROUND DESCRIBED AT TOP */
32 /* body > div > div { display: inline; } */
33 /* test element */
34 body > div > div > div {
35 margin: 0 10px 0 6px;
36 border: medium solid transparent;
37 border-width: 0 12px 0 5px;
38 padding: 0 17px 0 9px;
39 }
41 /* COMMENTED OUT PER WORKAROUND DESCRIBED AT TOP */
42 body > div, /* body > div > div, */ body > div > div > div { direction: ltr; }
43 body > div.trtl > div > div { direction: rtl; }
44 /* COMMENTED OUT PER WORKAROUND DESCRIBED AT TOP */
45 /* body > div.prtl > div { direction: rtl; } */
46 body > div.cbrtl { direction: rtl; }
47 body > div.mlauto > div > div { margin-left: auto; }
48 body > div.mrauto > div > div { margin-right: auto; }
50 body > div.wauto > div > div { width: auto; }
51 body > div.wnarrow > div > div { width: 127px; }
52 body > div.wwide > div > div { width: 415px; }
54 /*
55 * make a background on the containing block that is red
56 * everywhere except where the test should draw its background
57 */
58 body > div.wnarrow { background-image: url(CSS21-t100303-green-outside-170px.png); }
59 body > div.wwide { background-image: url(CSS21-t100303-green-outside-458px.png); }
60 body > div.wauto { background-image: url(CSS21-t100303-green-outside-334px.png); }
61 body > div.wauto.mlauto { background-image: url(CSS21-t100303-green-outside-340px.png); }
62 body > div.wauto.mrauto { background-image: url(CSS21-t100303-green-outside-344px.png); }
63 body > div.wauto.mlauto.mrauto { background-image: url(CSS21-t100303-green-outside-350px.png); }
65 /*
66 * The only results in the markup rather than using selectors
67 * are whether the div ends up aligned to the left edge (atl),
68 * the right edge (atr), or centered (atc). Things with auto
69 * widths always count as atl, to make the style rules simpler
70 * (though they abut both edges).
71 */
72 body > div.atl { background-position: 8px 0; }
73 body > div.atl.mlauto { background-position: 2px 0; }
75 body > div.atr.wnarrow { background-position: 172px 0; }
76 body > div.atr.wnarrow.mrauto { background-position: 182px 0; }
77 body > div.atr.wwide { background-position: -116px 0; }
78 body > div.atr.wwide.mrauto { background-position: -106px 0; }
80 /* Can only be atc when mlauto and mrauto and wnarrow. */
81 body > div.atc.wnarrow { background-position: 92px 0; }
83 /*
84 * make a background on the test div that is green only within
85 * its desired width and red elsewhere
86 */
87 body > div.wnarrow > div > div { background-image: url(CSS21-t100303-green-in-170px.png); }
88 body > div.wwide > div > div { background-image: url(CSS21-t100303-green-in-458px.png); }
89 body > div.wauto > div > div { background-image: url(CSS21-t100303-green-in-334px.png); }
90 body > div.wauto.mlauto > div > div { background-image: url(CSS21-t100303-green-in-340px.png); }
91 body > div.wauto.mrauto > div > div { background-image: url(CSS21-t100303-green-in-344px.png); }
92 body > div.wauto.mlauto.mrauto > div > div { background-image: url(CSS21-t100303-green-in-350px.png); }
93 /* move position to border-edge */
94 body > div > div > div { background-position: -5px 0; }
96 /* for debugging */
97 /* body > div { background: transparent ! important; } */
98 /* body > div > div > div { background: orange ! important; } */
100 ]]></style>
101 </head>
102 <body>
104 <div class="atl wauto"><div><div></div></div></div>
105 <div class="atl wauto trtl"><div><div></div></div></div>
106 <div class="atl wauto prtl"><div><div></div></div></div>
107 <div class="atl wauto prtl trtl"><div><div></div></div></div>
108 <div class="atl wauto cbrtl"><div><div></div></div></div>
109 <div class="atl wauto cbrtl trtl"><div><div></div></div></div>
110 <div class="atl wauto cbrtl prtl"><div><div></div></div></div>
111 <div class="atl wauto cbrtl prtl trtl"><div><div></div></div></div>
112 <div class="atl wauto mlauto"><div><div></div></div></div>
113 <div class="atl wauto mlauto trtl"><div><div></div></div></div>
114 <div class="atl wauto mlauto prtl"><div><div></div></div></div>
115 <div class="atl wauto mlauto prtl trtl"><div><div></div></div></div>
116 <div class="atl wauto mlauto cbrtl"><div><div></div></div></div>
117 <div class="atl wauto mlauto cbrtl trtl"><div><div></div></div></div>
118 <div class="atl wauto mlauto cbrtl prtl"><div><div></div></div></div>
119 <div class="atl wauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
120 <div class="atl wauto mrauto"><div><div></div></div></div>
121 <div class="atl wauto mrauto trtl"><div><div></div></div></div>
122 <div class="atl wauto mrauto prtl"><div><div></div></div></div>
123 <div class="atl wauto mrauto prtl trtl"><div><div></div></div></div>
124 <div class="atl wauto mrauto cbrtl"><div><div></div></div></div>
125 <div class="atl wauto mrauto cbrtl trtl"><div><div></div></div></div>
126 <div class="atl wauto mrauto cbrtl prtl"><div><div></div></div></div>
127 <div class="atl wauto mrauto cbrtl prtl trtl"><div><div></div></div></div>
128 <div class="atl wauto mrauto mlauto"><div><div></div></div></div>
129 <div class="atl wauto mrauto mlauto trtl"><div><div></div></div></div>
130 <div class="atl wauto mrauto mlauto prtl"><div><div></div></div></div>
131 <div class="atl wauto mrauto mlauto prtl trtl"><div><div></div></div></div>
132 <div class="atl wauto mrauto mlauto cbrtl"><div><div></div></div></div>
133 <div class="atl wauto mrauto mlauto cbrtl trtl"><div><div></div></div></div>
134 <div class="atl wauto mrauto mlauto cbrtl prtl"><div><div></div></div></div>
135 <div class="atl wauto mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
136 <div class="atl wnarrow"><div><div></div></div></div>
137 <div class="atl wnarrow trtl"><div><div></div></div></div>
138 <div class="atl wnarrow prtl"><div><div></div></div></div>
139 <div class="atl wnarrow prtl trtl"><div><div></div></div></div>
140 <div class="atr wnarrow cbrtl"><div><div></div></div></div>
141 <div class="atr wnarrow cbrtl trtl"><div><div></div></div></div>
142 <div class="atr wnarrow cbrtl prtl"><div><div></div></div></div>
143 <div class="atr wnarrow cbrtl prtl trtl"><div><div></div></div></div>
144 <div class="atr wnarrow mlauto"><div><div></div></div></div>
145 <div class="atr wnarrow mlauto trtl"><div><div></div></div></div>
146 <div class="atr wnarrow mlauto prtl"><div><div></div></div></div>
147 <div class="atr wnarrow mlauto prtl trtl"><div><div></div></div></div>
148 <div class="atr wnarrow mlauto cbrtl"><div><div></div></div></div>
149 <div class="atr wnarrow mlauto cbrtl trtl"><div><div></div></div></div>
150 <div class="atr wnarrow mlauto cbrtl prtl"><div><div></div></div></div>
151 <div class="atr wnarrow mlauto cbrtl prtl trtl"><div><div></div></div></div>
152 <div class="atl wnarrow mrauto"><div><div></div></div></div>
153 <div class="atl wnarrow mrauto trtl"><div><div></div></div></div>
154 <div class="atl wnarrow mrauto prtl"><div><div></div></div></div>
155 <div class="atl wnarrow mrauto prtl trtl"><div><div></div></div></div>
156 <div class="atl wnarrow mrauto cbrtl"><div><div></div></div></div>
157 <div class="atl wnarrow mrauto cbrtl trtl"><div><div></div></div></div>
158 <div class="atl wnarrow mrauto cbrtl prtl"><div><div></div></div></div>
159 <div class="atl wnarrow mrauto cbrtl prtl trtl"><div><div></div></div></div>
160 <div class="atc wnarrow mrauto mlauto"><div><div></div></div></div>
161 <div class="atc wnarrow mrauto mlauto trtl"><div><div></div></div></div>
162 <div class="atc wnarrow mrauto mlauto prtl"><div><div></div></div></div>
163 <div class="atc wnarrow mrauto mlauto prtl trtl"><div><div></div></div></div>
164 <div class="atc wnarrow mrauto mlauto cbrtl"><div><div></div></div></div>
165 <div class="atc wnarrow mrauto mlauto cbrtl trtl"><div><div></div></div></div>
166 <div class="atc wnarrow mrauto mlauto cbrtl prtl"><div><div></div></div></div>
167 <div class="atc wnarrow mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
168 <div class="atl wwide"><div><div></div></div></div>
169 <div class="atl wwide trtl"><div><div></div></div></div>
170 <div class="atl wwide prtl"><div><div></div></div></div>
171 <div class="atl wwide prtl trtl"><div><div></div></div></div>
172 <div class="atr wwide cbrtl"><div><div></div></div></div>
173 <div class="atr wwide cbrtl trtl"><div><div></div></div></div>
174 <div class="atr wwide cbrtl prtl"><div><div></div></div></div>
175 <div class="atr wwide cbrtl prtl trtl"><div><div></div></div></div>
176 <div class="atl wwide mlauto"><div><div></div></div></div>
177 <div class="atl wwide mlauto trtl"><div><div></div></div></div>
178 <div class="atl wwide mlauto prtl"><div><div></div></div></div>
179 <div class="atl wwide mlauto prtl trtl"><div><div></div></div></div>
180 <div class="atr wwide mlauto cbrtl"><div><div></div></div></div>
181 <div class="atr wwide mlauto cbrtl trtl"><div><div></div></div></div>
182 <div class="atr wwide mlauto cbrtl prtl"><div><div></div></div></div>
183 <div class="atr wwide mlauto cbrtl prtl trtl"><div><div></div></div></div>
184 <div class="atl wwide mrauto"><div><div></div></div></div>
185 <div class="atl wwide mrauto trtl"><div><div></div></div></div>
186 <div class="atl wwide mrauto prtl"><div><div></div></div></div>
187 <div class="atl wwide mrauto prtl trtl"><div><div></div></div></div>
188 <div class="atr wwide mrauto cbrtl"><div><div></div></div></div>
189 <div class="atr wwide mrauto cbrtl trtl"><div><div></div></div></div>
190 <div class="atr wwide mrauto cbrtl prtl"><div><div></div></div></div>
191 <div class="atr wwide mrauto cbrtl prtl trtl"><div><div></div></div></div>
192 <div class="atl wwide mrauto mlauto"><div><div></div></div></div>
193 <div class="atl wwide mrauto mlauto trtl"><div><div></div></div></div>
194 <div class="atl wwide mrauto mlauto prtl"><div><div></div></div></div>
195 <div class="atl wwide mrauto mlauto prtl trtl"><div><div></div></div></div>
196 <div class="atr wwide mrauto mlauto cbrtl"><div><div></div></div></div>
197 <div class="atr wwide mrauto mlauto cbrtl trtl"><div><div></div></div></div>
198 <div class="atr wwide mrauto mlauto cbrtl prtl"><div><div></div></div></div>
199 <div class="atr wwide mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
201 </body>
202 </html>
