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