src/third_party/WebKit/LayoutTests/fast/regions/cssom/offsetLeft-offsetTop-in-multiple-regions.html

   1 <html>
   2 <head>
   3         <style type="text/css">
   4                 /* Make sure the console and the description don't interfere with 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                         width: 300px;
  18                         height: 226px;
  19                         -webkit-flow-into: flow1;
  20                 }
  21
  22                 #divMain2 {
  23                         border: 2px solid blue;
  24                         width: 211px;
  25                         height: 470px;
  26                         padding-left: 5px;
  27                         margin: 5px;
  28                         margin-left: 10px;
  29                         left: 40px;
  30                         -webkit-flow-into: flow2;
  31                 }
  32
  33                 .divText {
  34                         border: 1px solid green;
  35                         color: green;
  36                 }
  37
  38                 #divText1 {
  39                         width: 200px;
  40                         height: 150px;
  41                         position: relative;
  42                         left: 30px;
  43                         top: 10px;
  44                 }
  45
  46                 #divText2_1 {
  47                         border-color: #009999;
  48                         color: #009999;
  49                         margin: 10px;
  50                         width: 180px;
  51                         height: 140px;
  52                 }
  53
  54                 #divText2_2 {
  55                         width: 203px;
  56                         height: 270px;
  57                 }
  58
  59                 #divText2_3 {
  60                         margin: 4px;
  61                         width: 192px;
  62                         height: 105px;
  63                         position: relative;
  64                         top: 115px;
  65                         color: #777700;
  66                         border-color: #777700;
  67                 }
  68
  69                 #absoluteSpan {
  70                         position: absolute;
  71                 }
  72
  73                 #span {
  74                         position: relative;
  75                         top: 115px;
  76                         left: 24;
  77                         color: black;
  78                         font-size: 12px;
  79                         margin-left: 4px;
  80                         padding: 1px;
  81                         border: 1px solid black;
  82                 }
  83
  84                 #image {
  85                         border: 1px dashed red;
  86                         width: 15px;
  87                         position: relative;
  88                         top: 124px;
  89                         margin-left: 54px;
  90                 }
  91
  92                 #dummy1 {
  93                         width: 100px;
  94                         height: 25px;
  95                         border: 1px solid black;
  96                         margin: 5px;
  97                         margin-left: 20px;
  98                 }
  99
 100                 .region1 {
 101                         -webkit-flow-from: flow1;
 102                         border: 1px solid red;
 103                         position: relative;
 104                         left: 59px;
 105                         top: 429px;
 106                         width: 304px;
 107                         height: 230px;
 108                 }
 109
 110                 .region2 {
 111                         -webkit-flow-from: flow2;
 112                         border: 1px solid red;
 113                 }
 114
 115                 #first_region2 {
 116                         position: relative;
 117                         left: 464px;
 118                         top: -140px;
 119                         width: 500px;
 120                         height: 160px;
 121                 }
 122
 123                 #second_region2 {
 124                         position: relative;
 125                         left: 424px;
 126                         top: -94px;
 127                         width: 330px;
 128                         height: 150px;
 129                 }
 130
 131                 #third_region2 {
 132                         position: relative;
 133                         left: 569px;
 134                         top: -66px;
 135                         width: 282px;
 136                         height: 195px;
 137                 }
 138
 139                 .grid {
 140                         position: absolute;
 141                         top: 700px;
 142                         width: 100px;
 143                         height: 100px;
 144                         border-right: 1px solid blue;
 145                         text-align: right;
 146                         font-size: 14px;
 147                         color: blue;
 148                 }
 149
 150                 .vgrid {
 151                         position: absolute;
 152                         left: 900px;
 153                         width: 100px;
 154                         height: 100px;
 155                         border-bottom: 1px solid blue;
 156                         text-align: bottom;
 157                         font-size: 14px;
 158                         color: blue;
 159                 }
 160
 161                 #grid1 {
 162                         left: 0px;
 163                 }
 164                 #grid2 {
 165                         left: 100px;
 166                 }
 167                 #grid3 {
 168                         left: 200px;
 169                 }
 170                 #grid4 {
 171                         left: 300px;
 172                 }
 173                 #grid5 {
 174                         left: 400px;
 175                 }
 176                 #grid6 {
 177                         left: 500px;
 178                 }
 179                 #grid7 {
 180                         left: 600px;
 181                 }
 182
 183                 #vgrid1 {
 184                         top: 0px;
 185                 }
 186                 #vgrid2 {
 187                         top: 100px;
 188                 }
 189                 #vgrid3 {
 190                         top: 200px;
 191                 }
 192                 #vgrid4 {
 193                         top: 300px;
 194                 }
 195                 #vgrid5 {
 196                         top: 400px;
 197                 }
 198                 #vgrid6 {
 199                         top: 500px;
 200                 }
 201                 #vgrid7 {
 202                         top: 600px;
 203                 }
 204                 #vgrid8 {
 205                         top: 700px;
 206                         border: none;
 207                 }
 208         </style>
 209
 210         <script src="../../../resources/js-test.js"></script>
 211 </head>
 212
 213 <body id="body">
 214         <div id="divMain1">
 215                 <div class="divText" id="divText1"></div>
 216         </div>
 217
 218         <div id="divMain2">
 219                 <div class="dummy" id="dummy1"></div>
 220                 <div class="divText" id="divText2_1"></div>
 221                 <div class="divText" id="divText2_2">
 222                         <div class="divText" id="divText2_3"></div>
 223                         <img id="image" src="resources/transparent.png"></input>
 224                 </div>
 225         </div>
 226
 227         <div class="region1"></div>
 228
 229         <div class="region2" id="first_region2"></div>
 230         <div class="region2" id="second_region2"></div>
 231         <div class="region2" id="third_region2"></div>
 232
 233         <div id="grid1" class="grid">100px</div>
 234         <div id="grid2" class="grid">200px</div>
 235         <div id="grid3" class="grid">300px</div>
 236         <div id="grid4" class="grid">400px</div>
 237         <div id="grid5" class="grid">500px</div>
 238         <div id="grid6" class="grid">600px</div>
 239         <div id="grid7" class="grid">700px</div>
 240
 241         <div id="vgrid1" class="vgrid"></div>
 242         <div id="vgrid2" class="vgrid">100px</div>
 243         <div id="vgrid3" class="vgrid">200px</div>
 244         <div id="vgrid4" class="vgrid">300px</div>
 245         <div id="vgrid5" class="vgrid">400px</div>
 246         <div id="vgrid6" class="vgrid">500px</div>
 247         <div id="vgrid7" class="vgrid">600px</div>
 248         <div id="vgrid8" class="vgrid">700px</div>
 249
 250         <script>
 251                 description("Test offsetLeft and offsetTop in a named flow.")
 252
 253                 shouldBe("divText1.offsetParent", "document.body");
 254                 shouldBe("divText1.offsetLeft", "100");
 255                 shouldBe("divText1.offsetTop", "450");
 256
 257                 shouldBe("divText2_1.offsetParent", "document.body");
 258                 shouldBe("divText2_1.offsetLeft", "500");
 259                 shouldBe("divText2_1.offsetTop", "150");
 260
 261                 shouldBe("divText2_2.offsetParent", "document.body");
 262                 shouldBe("divText2_2.offsetLeft", "450");
 263                 shouldBe("divText2_2.offsetTop", "350");
 264
 265                 shouldBe("divText2_3.offsetParent", "document.body");
 266                 shouldBe("divText2_3.offsetLeft", "600");
 267                 shouldBe("divText2_3.offsetTop", "500");
 268
 269                 shouldBe("image.offsetParent", "document.body");
 270                 shouldBe("image.offsetLeft", "650");
 271                 shouldBe("image.offsetTop", "620");
 272
 273                 if (window.testRunner) {
 274                         var allGraphicElements = document.querySelectorAll(".region1, .region2, .divText, .grid, .vgrid, .dummy, #span, #image");
 275                         for (var i=0; i<allGraphicElements.length; i++)
 276                                 allGraphicElements[i].style.display = "none";
 277                 }
 278
 279         </script>
 280 </body>
 281 </html>