src/third_party/WebKit/LayoutTests/fast/regions/cssom/offsetLeft-offsetTop-in-region-absolute-sticky-fixed.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                         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#", divItem.offsetTop);
 223                                 newHTML = newHTML.replace("#offLeft#", divItem.offsetLeft);
 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> (absolute):<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> (absolute):<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/>- offsetLeft 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> (fixed):<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(".region, .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>