The Tor Browser / file comparison
comparison: layout/reftests/pagination/abspos-overflow-01.xhtml
layout/reftests/pagination/abspos-overflow-01.xhtml
- branch
- TOR_BUG_9701
- changeset 8
- 97036ab72558
equal
deleted
inserted
replaced
| -1:000000000000 | 0:f5999978b1f7 |
|---|---|
| 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" class="reftest-print"> | |
| 3 <head> | |
| 4 <title>Multi-column Layout: AbsPos Pagination (Interlaced)</title> | |
| 5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> | |
| 6 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property"/> | |
| 7 <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#length-units"/> | |
| 8 <style type="text/css"> | |
| 9 /* If the reftest print size change, this needs to change too. */ | |
| 10 html, body { | |
| 11 margin: 0; | |
| 12 padding: 0; | |
| 13 } | |
| 14 | |
| 15 .container { | |
| 16 background: red; | |
| 17 height: 24pt; | |
| 18 position: relative; | |
| 19 } | |
| 20 .overflow { | |
| 21 width: 10pt; | |
| 22 border-bottom: lime 4px solid; | |
| 23 top: 0; | |
| 24 } | |
| 25 .following { | |
| 26 font-size: 10pt; | |
| 27 line-height: 10pt; | |
| 28 font-family: sans-serif; | |
| 29 text-align: center; | |
| 30 position: relative; | |
| 31 background: white; | |
| 32 width: 100pt; | |
| 33 } | |
| 34 #pageset { | |
| 35 width: 100pt; | |
| 36 border: silver 2pt; | |
| 37 border-style: none solid; | |
| 38 height: 6in; | |
| 39 } | |
| 40 .redline { | |
| 41 float: left; | |
| 42 margin-right: -103pt; | |
| 43 width: 103pt; | |
| 44 border-bottom: 8px solid red; | |
| 45 position: relative; | |
| 46 z-index: -1; | |
| 47 } | |
| 48 .r1 { | |
| 49 height: 50%; | |
| 50 } | |
| 51 .r2 { | |
| 52 height: 150%; | |
| 53 } | |
| 54 .r3 { | |
| 55 height: 250%; | |
| 56 } | |
| 57 | |
| 58 .ocontainer { | |
| 59 height: 0; | |
| 60 } | |
| 61 .o1 { /* 3rd page */ | |
| 62 height: 5in; | |
| 63 } | |
| 64 .a1 { /* 1st page */ | |
| 65 position: absolute; | |
| 66 height: 1in; | |
| 67 width: 33pt; | |
| 68 } | |
| 69 .a2 { /* 2nd page */ | |
| 70 position: absolute; | |
| 71 height: 3in; | |
| 72 width: 25pt; | |
| 73 margin-left: 25pt; | |
| 74 } | |
| 75 .a3 { /* 3rd page */ | |
| 76 position: absolute; | |
| 77 height: 5in; | |
| 78 margin-left: 10pt; | |
| 79 } | |
| 80 .a4 { /* 2nd page */ | |
| 81 width: 25pt; | |
| 82 height: 3in; | |
| 83 } | |
| 84 | |
| 85 .b1 { /* 3rd page */ | |
| 86 position: absolute; | |
| 87 height: 336pt; | |
| 88 margin-left: 20pt; | |
| 89 } | |
| 90 .b2 { /* 2nd page */ | |
| 91 position: absolute; | |
| 92 height: 192pt; | |
| 93 width: 25pt; | |
| 94 margin-left: 50pt; | |
| 95 } | |
| 96 .b3 { /* 3rd page */ | |
| 97 position: absolute; | |
| 98 height: 336pt; | |
| 99 margin-left: 30pt; | |
| 100 } | |
| 101 .b4 { /* 1st col, but no border */ | |
| 102 position: absolute; | |
| 103 height: 48pt; | |
| 104 border-bottom: none; | |
| 105 } | |
| 106 .b4 .child1 { /* 1st page */ | |
| 107 position: absolute; | |
| 108 height: 100%; | |
| 109 width: 33pt; | |
| 110 margin-left: 33pt; | |
| 111 } | |
| 112 .b4 .child2 { /* 3rd page */ | |
| 113 height: 336pt; | |
| 114 margin-left: 40pt; | |
| 115 | |
| 116 } | |
| 117 .b5 { /* 1st page */ | |
| 118 position: absolute; | |
| 119 height: 48pt; | |
| 120 width: 34pt; | |
| 121 margin-left: 66pt; | |
| 122 } | |
| 123 .b6 { /* 3rd page */ | |
| 124 height: 336pt; | |
| 125 margin-left: 50pt; | |
| 126 } | |
| 127 | |
| 128 .c1 { /* 3rd page */ | |
| 129 position: absolute; | |
| 130 height: 3in; | |
| 131 margin-left: 60pt; | |
| 132 } | |
| 133 .c2 { /* 2nd page */ | |
| 134 position: absolute; | |
| 135 height: 1in; | |
| 136 width: 25pt; | |
| 137 margin-left: 75pt; | |
| 138 } | |
| 139 .c3 { /* 3rd page */ | |
| 140 position: absolute; | |
| 141 height: 3in; | |
| 142 margin-left: 70pt; | |
| 143 } | |
| 144 .c4 { /* 3rd page */ | |
| 145 height: 3in; | |
| 146 width: 20pt; | |
| 147 margin-left: 80pt; | |
| 148 } | |
| 149 | |
| 150 .f1 { | |
| 151 margin-top: -48pt; | |
| 152 height: 48pt; | |
| 153 margin-bottom: 96pt; | |
| 154 } | |
| 155 .f2 { | |
| 156 margin-top: -24pt; | |
| 157 height: 24pt; | |
| 158 } | |
| 159 </style> | |
| 160 </head> | |
| 161 <body> | |
| 162 <div class="redline r1"></div> | |
| 163 <div class="redline r2"></div> | |
| 164 <div class="redline r3"></div> | |
| 165 | |
| 166 <div id="pageset"> | |
| 167 <div> | |
| 168 <div class="ocontainer"> | |
| 169 <div class="overflow o1"></div> | |
| 170 </div> | |
| 171 <div class="container"> | |
| 172 <div class="overflow a1"></div> | |
| 173 <div class="overflow a2"></div> | |
| 174 <div class="overflow a3"></div> | |
| 175 <div class="overflow a4"></div> | |
| 176 </div> | |
| 177 <div class="container"> | |
| 178 <div class="overflow b1"></div> | |
| 179 <div class="overflow b2"></div> | |
| 180 <div class="overflow b3"></div> | |
| 181 <div class="overflow b4"> | |
| 182 <div class="overflow child1"></div> | |
| 183 <div class="overflow child2"></div> | |
| 184 </div> | |
| 185 <div class="overflow b5"></div> | |
| 186 <div class="overflow b6"></div> | |
| 187 </div> | |
| 188 </div> | |
| 189 <p class="following f1"> | |
| 190 There must be 3 pages, a single green line on each page, and no red. | |
| 191 </p> | |
| 192 <div class="container"> | |
| 193 <div class="overflow c1"></div> | |
| 194 <div class="overflow c2"></div> | |
| 195 <div class="overflow c3"></div> | |
| 196 <div class="overflow c4"></div> | |
| 197 </div> | |
| 198 <div class="following f2"></div> | |
| 199 </div> | |
| 200 </body> | |
| 201 </html> |
