The Tor Browser / file comparison
comparison: layout/reftests/pagination/dynamic-abspos-overflow-01-cols.xhtml
layout/reftests/pagination/dynamic-abspos-overflow-01-cols.xhtml
- branch
- TOR_BUG_3246
- changeset 6
- 8bccb770b82d
equal
deleted
inserted
replaced
| -1:000000000000 | 0:f3b262609ea5 |
|---|---|
| 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-wait"> | |
| 3 <head> | |
| 4 <title>Multi-column Layout: AbsPos Pagination (Interlaced Dynamic Height)</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 html { | |
| 10 background: white; | |
| 11 } | |
| 12 | |
| 13 .container { | |
| 14 background: red; | |
| 15 height: 24pt; | |
| 16 position: relative; | |
| 17 } | |
| 18 .overflow { | |
| 19 width: 10pt; | |
| 20 border-bottom: lime 8px solid; | |
| 21 top: 0; | |
| 22 } | |
| 23 .following { | |
| 24 position: relative; | |
| 25 background: white; | |
| 26 width: 100pt; | |
| 27 } | |
| 28 #colset { | |
| 29 padding-top: 1px; | |
| 30 width: 300pt; | |
| 31 height: 2in; | |
| 32 -moz-column-count: 3; | |
| 33 -moz-column-gap: 0; | |
| 34 border: silver 2pt; | |
| 35 border-style: none solid; | |
| 36 } | |
| 37 #redline { | |
| 38 width: 303pt; | |
| 39 border-top: 8px solid red; | |
| 40 margin-top: -1in; | |
| 41 position: relative; | |
| 42 z-index: -1; | |
| 43 } | |
| 44 | |
| 45 .ocontainer { | |
| 46 height: 0; | |
| 47 position: relative; | |
| 48 } | |
| 49 .o1 { /* 3rd col */ | |
| 50 height: 5in; | |
| 51 } | |
| 52 .a1 { /* 1st col */ | |
| 53 position: absolute; | |
| 54 height: 1in; | |
| 55 width: 33pt; | |
| 56 } | |
| 57 .a2 { /* 2nd col */ | |
| 58 position: absolute; | |
| 59 height: 3in; | |
| 60 width: 25pt; | |
| 61 margin-left: 25pt; | |
| 62 } | |
| 63 .a3 { /* 3rd col */ | |
| 64 position: absolute; | |
| 65 height: 5in; | |
| 66 margin-left: 10pt; | |
| 67 } | |
| 68 .a4 { /* 2nd col */ | |
| 69 width: 25pt; | |
| 70 height: 3in; | |
| 71 } | |
| 72 | |
| 73 .b1 { /* 3rd col */ | |
| 74 position: absolute; | |
| 75 height: 336pt; | |
| 76 margin-left: 20pt; | |
| 77 } | |
| 78 .b2 { /* 2nd col */ | |
| 79 position: absolute; | |
| 80 height: 192pt; | |
| 81 width: 25pt; | |
| 82 margin-left: 50pt; | |
| 83 } | |
| 84 .b3 { /* 3rd col */ | |
| 85 position: absolute; | |
| 86 height: 336pt; | |
| 87 margin-left: 30pt; | |
| 88 } | |
| 89 .b4 { /* 1st col, but no border */ | |
| 90 position: absolute; | |
| 91 height: 48pt; | |
| 92 border-bottom: none; | |
| 93 } | |
| 94 .b4 .child1 { /* 1st col */ | |
| 95 position: absolute; | |
| 96 height: 100%; | |
| 97 width: 33pt; | |
| 98 margin-left: 33pt; | |
| 99 } | |
| 100 .b4 .child2 { /* 3rd col */ | |
| 101 height: 336pt; | |
| 102 margin-left: 40pt; | |
| 103 | |
| 104 } | |
| 105 .b5 { /* 1st col */ | |
| 106 position: absolute; | |
| 107 height: 48pt; | |
| 108 width: 34pt; | |
| 109 margin-left: 66pt; | |
| 110 } | |
| 111 .b6 { /* 3rd col */ | |
| 112 height: 336pt; | |
| 113 margin-left: 50pt; | |
| 114 } | |
| 115 | |
| 116 .c1 { /* 3rd col */ | |
| 117 position: absolute; | |
| 118 height: 3in; | |
| 119 margin-left: 60pt; | |
| 120 } | |
| 121 .c2 { /* 2nd col */ | |
| 122 position: absolute; | |
| 123 height: 1in; | |
| 124 width: 25pt; | |
| 125 margin-left: 75pt; | |
| 126 } | |
| 127 .c3 { /* 3rd col */ | |
| 128 position: absolute; | |
| 129 height: 3in; | |
| 130 margin-left: 70pt; | |
| 131 } | |
| 132 .c4 { /* 3rd col */ | |
| 133 height: 3in; | |
| 134 width: 20pt; | |
| 135 margin-left: 80pt; | |
| 136 } | |
| 137 | |
| 138 .f1 { | |
| 139 margin-top: -48pt; | |
| 140 height: 48pt; | |
| 141 margin-bottom: 96pt; | |
| 142 } | |
| 143 .f2 { | |
| 144 margin-top: -24pt; | |
| 145 height: 24pt; | |
| 146 } | |
| 147 | |
| 148 .centerline { | |
| 149 margin: 0 auto; | |
| 150 top: 0; | |
| 151 left: 0; | |
| 152 right: 0; | |
| 153 position: absolute; | |
| 154 width: 8px; | |
| 155 height: 6in; | |
| 156 background: aqua; | |
| 157 } | |
| 158 | |
| 159 #dynamo { | |
| 160 background: transparent; | |
| 161 border-bottom: 8px solid orange; | |
| 162 z-index: 10; | |
| 163 height: 192pt; | |
| 164 } | |
| 165 | |
| 166 </style> | |
| 167 </head> | |
| 168 <body onload="document.getElementById('dynamo').style.height = '48pt'; | |
| 169 document.getElementById('dynamo').offsetHeight; | |
| 170 document.getElementById('dynamo').style.height = '336pt'; | |
| 171 document.getElementById('dynamo').offsetHeight; | |
| 172 document.getElementById('dynamo').style.height = '48pt'; | |
| 173 document.getElementById('dynamo').offsetHeight; | |
| 174 document.getElementById('dynamo').style.height = '192pt'; | |
| 175 document.getElementById('dynamo').offsetHeight; | |
| 176 document.getElementById('dynamo').style.height = '1500pt'; | |
| 177 document.getElementById('dynamo').offsetHeight; | |
| 178 document.getElementById('dynamo').style.height = '48pt'; | |
| 179 document.getElementById('dynamo').offsetHeight; | |
| 180 document.getElementById('dynamo').style.height = '192pt'; | |
| 181 document.getElementById('dynamo').offsetHeight; | |
| 182 document.getElementById('dynamo').style.height = '336pt'; | |
| 183 document.getElementById('dynamo').offsetHeight; | |
| 184 document.getElementById('dynamo').style.height = '192pt'; | |
| 185 document.getElementById('dynamo').offsetHeight; | |
| 186 document.getElementById('dynamo').style.height = '48pt'; | |
| 187 document.getElementById('dynamo').offsetHeight; | |
| 188 document.getElementById('dynamo').style.height = '192pt'; | |
| 189 document.documentElement.className = '' | |
| 190 "> | |
| 191 <p>There must be a single green line with an orange square where | |
| 192 it intersects with the middle aqua line, and no red. The following | |
| 193 links must move the orange square to the intersection with the | |
| 194 indicated aqua line:</p> | |
| 195 <p> | |
| 196 <a href="asdljlwjerlk-unvisited" onclick="document.getElementById('dynamo').style.height = '48pt'; return false;">Left</a> | |
| 197 <a href="asdljlwjerlk-unvisited" onclick="document.getElementById('dynamo').style.height = '192pt'; return false;">Center</a> | |
| 198 <a href="asdljlwjerlk-unvisited" onclick="document.getElementById('dynamo').style.height = '336pt'; return false;">Right</a> | |
| 199 </p> | |
| 200 <div id="colset"> | |
| 201 <div> | |
| 202 <div class="ocontainer"> | |
| 203 <div class="centerline"></div> | |
| 204 <div class="overflow o1"></div> | |
| 205 </div> | |
| 206 <div class="container"> | |
| 207 <div class="overflow a1"></div> | |
| 208 <div class="overflow a2"></div> | |
| 209 <div class="overflow a3"></div> | |
| 210 <div class="overflow a4"></div> | |
| 211 </div> | |
| 212 <div class="ocontainer"> | |
| 213 <div id="dynamo" class="centerline"></div> | |
| 214 </div> | |
| 215 <div class="container"> | |
| 216 <div class="overflow b1"></div> | |
| 217 <div class="overflow b2"></div> | |
| 218 <div class="overflow b3"></div> | |
| 219 <div class="overflow b4"> | |
| 220 <div class="overflow child1"></div> | |
| 221 <div class="overflow child2"></div> | |
| 222 </div> | |
| 223 <div class="overflow b5"></div> | |
| 224 <div class="overflow b6"></div> | |
| 225 </div> | |
| 226 </div> | |
| 227 <p class="following f1"> | |
| 228 </p> | |
| 229 <div class="container"> | |
| 230 <div class="overflow c1"></div> | |
| 231 <div class="overflow c2"></div> | |
| 232 <div class="overflow c3"></div> | |
| 233 <div class="overflow c4"></div> | |
| 234 </div> | |
| 235 <div class="following f2"></div> | |
| 236 </div> | |
| 237 <div id="redline"></div> | |
| 238 </body> | |
| 239 </html> |
