CSS21-t100303-simple.xhtml (11058B)
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 <!-- 6 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' 11 12 --> 13 <link rel="author" title="L. David Baron" href="https://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[ 18 19 body { direction: ltr; } 20 div { height: 1px; } 21 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 } 40 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; } 49 50 body > div.wauto > div > div { width: auto; } 51 body > div.wnarrow > div > div { width: 127px; } 52 body > div.wwide > div > div { width: 415px; } 53 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); } 64 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; } 74 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; } 79 80 /* Can only be atc when mlauto and mrauto and wnarrow. */ 81 body > div.atc.wnarrow { background-position: 92px 0; } 82 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; } 95 96 /* for debugging */ 97 /* body > div { background: transparent ! important; } */ 98 /* body > div > div > div { background: orange ! important; } */ 99 100 ]]></style> 101 </head> 102 <body> 103 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> 200 201 </body> 202 </html>