| OLD | NEW |
|---|
| (Empty) |
| 1 <html> | |
| 2 <head> | |
| 3 <style type="text/css"> | |
| 4 /* Make sure the console and the description don't interfere wit
h the rest of the layout. */ | |
| 5 #description { | |
| 6 position: absolute; | |
| 7 top: 0px; | |
| 8 } | |
| 9 | |
| 10 #console { | |
| 11 position: absolute; | |
| 12 top: 100px; | |
| 13 } | |
| 14 | |
| 15 #divMain1 { | |
| 16 border: 2px solid blue; | |
| 17 height: 105px; | |
| 18 margin: 10px; | |
| 19 position: relative; | |
| 20 -webkit-flow-into: flow1; | |
| 21 } | |
| 22 | |
| 23 #divMain2 { | |
| 24 border: 2px solid blue; | |
| 25 height: 120px; | |
| 26 margin: 10px; | |
| 27 -webkit-flow-into: flow2; | |
| 28 } | |
| 29 | |
| 30 #divMain3 { | |
| 31 border: 2px solid blue; | |
| 32 width: 211px; | |
| 33 height: 146px; | |
| 34 padding-left: 5px; | |
| 35 margin: 5px; | |
| 36 margin-left: 10px; | |
| 37 left: 40px; | |
| 38 -webkit-flow-into: flow3; | |
| 39 } | |
| 40 | |
| 41 #divMain4 { | |
| 42 border: 2px solid blue; | |
| 43 width: 225px; | |
| 44 height: 120px; | |
| 45 padding-left: 5px; | |
| 46 padding-top: 5px; | |
| 47 margin: 8px; | |
| 48 -webkit-flow-into: flow4; | |
| 49 } | |
| 50 | |
| 51 .divText { | |
| 52 border: 1px solid green; | |
| 53 color: green; | |
| 54 font-size: 14px; | |
| 55 } | |
| 56 | |
| 57 #divText1 { | |
| 58 width: 250px; | |
| 59 position: absolute; | |
| 60 left: 10px; | |
| 61 top: 10px; | |
| 62 } | |
| 63 | |
| 64 #divText2 { | |
| 65 width: 200px; | |
| 66 position: absolute; | |
| 67 left: 20px; | |
| 68 top: 20px; | |
| 69 } | |
| 70 | |
| 71 #divText3 { | |
| 72 border-color: #009999; | |
| 73 color: #009999; | |
| 74 margin: 10px; | |
| 75 width: 180px; | |
| 76 height: 90px; | |
| 77 position: -webkit-sticky; | |
| 78 top: 50px; | |
| 79 } | |
| 80 | |
| 81 #divText4 { | |
| 82 border-color: #009999; | |
| 83 color: #009999; | |
| 84 width: 180px; | |
| 85 height: 100px; | |
| 86 position: fixed; | |
| 87 left: 50px; | |
| 88 top: 20px; | |
| 89 } | |
| 90 | |
| 91 #dummy { | |
| 92 width: 100px; | |
| 93 height: 25px; | |
| 94 border: 1px solid black; | |
| 95 margin: 5px; | |
| 96 margin-left: 20px; | |
| 97 } | |
| 98 | |
| 99 #region1 { | |
| 100 -webkit-flow-from: flow1; | |
| 101 border: 1px solid red; | |
| 102 position: relative; | |
| 103 left: 59px; | |
| 104 top: 335px; | |
| 105 width: 304px; | |
| 106 height: 125px; | |
| 107 } | |
| 108 | |
| 109 #region2 { | |
| 110 -webkit-flow-from: flow2; | |
| 111 border: 1px solid red; | |
| 112 position: relative; | |
| 113 left: 71px; | |
| 114 top: 344px; | |
| 115 width: 304px; | |
| 116 height: 140px; | |
| 117 } | |
| 118 | |
| 119 #region3 { | |
| 120 -webkit-flow-from: flow3; | |
| 121 border: 1px solid red; | |
| 122 position: relative; | |
| 123 margin-top: 20px; | |
| 124 left: 564px; | |
| 125 top: 53px; | |
| 126 width: 250px; | |
| 127 height: 160px; | |
| 128 overflow: hidden; | |
| 129 } | |
| 130 | |
| 131 #region4 { | |
| 132 -webkit-flow-from: flow4; | |
| 133 border: 1px solid red; | |
| 134 position: relative; | |
| 135 margin-top: 20px; | |
| 136 left: 450px; | |
| 137 top: 53px; | |
| 138 width: 250px; | |
| 139 height: 140px; | |
| 140 } | |
| 141 | |
| 142 .grid { | |
| 143 position: absolute; | |
| 144 top: 750px; | |
| 145 width: 100px; | |
| 146 height: 100px; | |
| 147 border-right: 1px solid blue; | |
| 148 text-align: right; | |
| 149 font-size: 14px; | |
| 150 color: blue; | |
| 151 } | |
| 152 | |
| 153 .vgrid { | |
| 154 position: absolute; | |
| 155 left: 900px; | |
| 156 width: 100px; | |
| 157 height: 100px; | |
| 158 border-bottom: 1px solid blue; | |
| 159 text-align: bottom; | |
| 160 font-size: 14px; | |
| 161 color: blue; | |
| 162 } | |
| 163 | |
| 164 #grid1 { | |
| 165 left: 0px; | |
| 166 } | |
| 167 #grid2 { | |
| 168 left: 100px; | |
| 169 } | |
| 170 #grid3 { | |
| 171 left: 200px; | |
| 172 } | |
| 173 #grid4 { | |
| 174 left: 300px; | |
| 175 } | |
| 176 #grid5 { | |
| 177 left: 400px; | |
| 178 } | |
| 179 #grid6 { | |
| 180 left: 500px; | |
| 181 } | |
| 182 #grid7 { | |
| 183 left: 600px; | |
| 184 } | |
| 185 | |
| 186 #vgrid1 { | |
| 187 top: 0px; | |
| 188 } | |
| 189 #vgrid2 { | |
| 190 top: 100px; | |
| 191 } | |
| 192 #vgrid3 { | |
| 193 top: 200px; | |
| 194 } | |
| 195 #vgrid4 { | |
| 196 top: 300px; | |
| 197 } | |
| 198 #vgrid5 { | |
| 199 top: 400px; | |
| 200 } | |
| 201 #vgrid6 { | |
| 202 top: 500px; | |
| 203 } | |
| 204 #vgrid7 { | |
| 205 top: 600px; | |
| 206 } | |
| 207 #vgrid8 { | |
| 208 top: 700px; | |
| 209 border: none; | |
| 210 } | |
| 211 </style> | |
| 212 | |
| 213 <script src="../../../resources/js-test.js"></script> | |
| 214 | |
| 215 <script type="text/javascript"> | |
| 216 function writeOffsetInfo(selector) { | |
| 217 var divItems = document.querySelectorAll(selector); | |
| 218 | |
| 219 for (var i=0; i<divItems.length; i++) { | |
| 220 var divItem = divItems[i]; | |
| 221 var existingHTML = divItem.innerHTML; | |
| 222 var newHTML = existingHTML.replace("#offTop#", d
ivItem.offsetTop); | |
| 223 newHTML = newHTML.replace("#offLeft#", divItem.o
ffsetLeft); | |
| 224 if (divItem.offsetParent) | |
| 225 newHTML = newHTML.replace("#offParent#",
divItem.offsetParent.tagName + "(" + divItem.offsetParent.id + ")"); | |
| 226 else | |
| 227 newHTML = newHTML.replace("#offParent#",
"null"); | |
| 228 divItem.innerHTML = newHTML; | |
| 229 } | |
| 230 } | |
| 231 function myOnLoad() { | |
| 232 writeOffsetInfo(".divText"); | |
| 233 } | |
| 234 </script> | |
| 235 </head> | |
| 236 | |
| 237 <body id="body" onload = "myOnLoad();"> | |
| 238 <div id="divMain1"> | |
| 239 <div class="divText" id="divText1">This is <b>divText1</b> (abso
lute):<br/>- offsetParent is <b>#offParent#</b><br/>- offsetLeft is <b>#offLeft#
</b><br/>- offsetTop is <b>#offTop#</b></div> | |
| 240 </div> | |
| 241 | |
| 242 <div id="divMain2"> | |
| 243 <div class="divText" id="divText2">This is <b>divText2</b> (abso
lute):<br/>- offsetParent is <b>#offParent#</b><br/>- offsetLeft is <b>#offLeft#
</b><br/>- offsetTop is <b>#offTop#</b></div> | |
| 244 </div> | |
| 245 | |
| 246 <div id="divMain3"> | |
| 247 <div class="dummy" id="dummy">dummy</div> | |
| 248 <div class="divText" id="divText3"><span class="offsetInfo">This
is <b>divText3</b> (sticky):<br/>- offsetParent is <b>#offParent#</b><br/>- off
setLeft is <b>#offLeft#</b><br/>- offsetTop is <b>#offTop#</b></span></div> | |
| 249 </div> | |
| 250 | |
| 251 <div id="divMain4"> | |
| 252 <div class="divText" id="divText4">This is <b>divText4</b> (fixe
d):<br/>- offsetParent is <b>#offParent#</b><br/>- offsetLeft is <b>#offLeft#</b
><br/>- offsetTop is <b>#offTop#</b></div> | |
| 253 </div> | |
| 254 | |
| 255 <div class="region" id="region1"></div> | |
| 256 <div class="region" id="region2"></div> | |
| 257 <div class="region" id="region3"></div> | |
| 258 <div class="region" id="region4"></div> | |
| 259 | |
| 260 <div id="grid1" class="grid">100px</div> | |
| 261 <div id="grid2" class="grid">200px</div> | |
| 262 <div id="grid3" class="grid">300px</div> | |
| 263 <div id="grid4" class="grid">400px</div> | |
| 264 <div id="grid5" class="grid">500px</div> | |
| 265 <div id="grid6" class="grid">600px</div> | |
| 266 <div id="grid7" class="grid">700px</div> | |
| 267 | |
| 268 <div id="vgrid1" class="vgrid"></div> | |
| 269 <div id="vgrid2" class="vgrid">100px</div> | |
| 270 <div id="vgrid3" class="vgrid">200px</div> | |
| 271 <div id="vgrid4" class="vgrid">300px</div> | |
| 272 <div id="vgrid5" class="vgrid">400px</div> | |
| 273 <div id="vgrid6" class="vgrid">500px</div> | |
| 274 <div id="vgrid7" class="vgrid">600px</div> | |
| 275 <div id="vgrid8" class="vgrid">700px</div> | |
| 276 | |
| 277 <script> | |
| 278 description("Test offsetLeft and offsetTop in a named flow with
absolute, sticky and fixed positioning.") | |
| 279 | |
| 280 shouldBe("divText1.offsetParent", "divMain1"); | |
| 281 shouldBe("divText1.offsetLeft", "10"); | |
| 282 shouldBe("divText1.offsetTop", "10"); | |
| 283 | |
| 284 shouldBe("divText2.offsetParent", "document.body"); | |
| 285 shouldBe("divText2.offsetLeft", "100"); | |
| 286 shouldBe("divText2.offsetTop", "500"); | |
| 287 | |
| 288 shouldBe("divText3.offsetParent", "document.body"); | |
| 289 shouldBe("divText3.offsetLeft", "600"); | |
| 290 shouldBe("divText3.offsetTop", "400"); | |
| 291 | |
| 292 shouldBeNull("divText4.offsetParent"); | |
| 293 shouldBe("divText4.offsetLeft", "50"); | |
| 294 shouldBe("divText4.offsetTop", "20"); | |
| 295 | |
| 296 if (window.testRunner) { | |
| 297 var allGraphicElements = document.querySelectorAll(".reg
ion, .divText, .grid, .vgrid, #dummy"); | |
| 298 for (var i=0; i<allGraphicElements.length; i++) | |
| 299 allGraphicElements[i].style.display = "none"; | |
| 300 } | |
| 301 | |
| 302 </script> | |
| 303 </body> | |
| 304 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 159933010:
Remove everything region-specific from LayoutTests. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master