src/third_party/WebKit/LayoutTests/fast/regions/cssom/offsetLeft-offsetTop-inlines-region-in-element.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                 body {
  11                         border: 10px dotted gray;
  12                         padding: 10px;
  13                 }
  14
  15                 #console {
  16                         position: absolute;
  17                         top: 110px;
  18                 }
  19
  20                 #regionParent {
  21                         border: 1px solid blue;
  22                         border-left: 10px dotted blue;
  23                         border-top: 10px dotted blue;
  24                         width: 600px;
  25                         height: 370px;
  26                         position: relative;
  27                         left: 147px;
  28                         top: 260px;
  29                         margin-left: 25px;
  30                 }
  31
  32                 .region1 {
  33                         -webkit-flow-from: flow1;
  34                         border: 10px dotted red;
  35                         margin: 20px;
  36                         margin-left: 30px;
  37                         width: 404px;
  38                         height: 320px;
  39                 }
  40
  41                 #divMain {
  42                         margin: 5px;
  43                         border: 5px solid blue;
  44                         height: 305px;
  45                         -webkit-flow-into: flow1;
  46                 }
  47
  48                 #divText {
  49                         border: 1px solid green;
  50                         color: green;
  51                         font-size: 14px;
  52                         width: 300px;
  53                         height: 180px;
  54                         position: relative;
  55                         left: 40px;
  56                         top: 12px;
  57                 }
  58
  59                 .grid {
  60                         position: absolute;
  61                         top: 680px;
  62                         width: 100px;
  63                         height: 100px;
  64                         border-right: 1px solid blue;
  65                         text-align: right;
  66                         font-size: 14px;
  67                         color: blue;
  68                 }
  69
  70                 .vgrid {
  71                         position: absolute;
  72                         left: 900px;
  73                         width: 100px;
  74                         height: 100px;
  75                         border-bottom: 1px solid blue;
  76                         text-align: bottom;
  77                         font-size: 14px;
  78                         color: blue;
  79                 }
  80
  81                 #grid1 {
  82                         left: 0px;
  83                 }
  84                 #grid2 {
  85                         left: 100px;
  86                 }
  87                 #grid3 {
  88                         left: 200px;
  89                 }
  90                 #grid4 {
  91                         left: 300px;
  92                 }
  93                 #grid5 {
  94                         left: 400px;
  95                 }
  96                 #grid6 {
  97                         left: 500px;
  98                 }
  99                 #grid7 {
 100                         left: 600px;
 101                 }
 102
 103                 #vgrid1 {
 104                         top: 0px;
 105                 }
 106                 #vgrid2 {
 107                         top: 100px;
 108                 }
 109                 #vgrid3 {
 110                         top: 200px;
 111                 }
 112                 #vgrid4 {
 113                         top: 300px;
 114                 }
 115                 #vgrid5 {
 116                         top: 400px;
 117                 }
 118                 #vgrid6 {
 119                         top: 500px;
 120                 }
 121                 #vgrid7 {
 122                         top: 600px;
 123                 }
 124                 #vgrid8 {
 125                         top: 700px;
 126                         border: none;
 127                 }
 128         </style>
 129
 130         <script src="../../../resources/js-test.js"></script>
 131 </head>
 132
 133 <body id="body">
 134         <div id="divMain">
 135                 <div id="divText"><b>divText</b><br/></div>
 136                 <span class="inlineElements" id="inlineElement" style="color: #000099; position: relative; top: 30px; left: 40px;">Inline element in divMain</span>
 137         </div>
 138
 139         <div id="regionParent"><span style="float: right; margin: 10px; color: blue;">This is regionParent</span>
 140                 <div class="region1" id="region"></div>
 141         </div>
 142
 143         <div id="grid1" class="grid">100px</div>
 144         <div id="grid2" class="grid">200px</div>
 145         <div id="grid3" class="grid">300px</div>
 146         <div id="grid4" class="grid">400px</div>
 147         <div id="grid5" class="grid">500px</div>
 148         <div id="grid6" class="grid">600px</div>
 149         <div id="grid7" class="grid">700px</div>
 150
 151         <div id="vgrid1" class="vgrid"></div>
 152         <div id="vgrid2" class="vgrid">100px</div>
 153         <div id="vgrid3" class="vgrid">200px</div>
 154         <div id="vgrid4" class="vgrid">300px</div>
 155         <div id="vgrid5" class="vgrid">400px</div>
 156         <div id="vgrid6" class="vgrid">500px</div>
 157         <div id="vgrid7" class="vgrid">600px</div>
 158         <div id="vgrid8" class="vgrid">700px</div>
 159
 160         <script>
 161                 description("Test offsetLeft and offsetTop for blocks and inlines in a named flow when the region's offsetParent is NOT the body.<br/>This test also covers borders.")
 162
 163                 shouldBe("divText.offsetParent", "document.body");
 164                 shouldBe("divText.offsetLeft", "300");
 165                 shouldBe("divText.offsetTop", "350");
 166
 167                 shouldBe("regionParent.offsetLeft", "200");
 168
 169                 shouldBe("region.offsetParent", "regionParent");
 170                 shouldBe("region.offsetLeft", "30");
 171                 shouldBe("region.offsetTop", "20");
 172
 173                 shouldBe("inlineElement.offsetParent", "document.body");
 174                 shouldBe("inlineElement.offsetLeft", "300");
 175                 shouldBe("inlineElement.offsetTop", "550");
 176
 177                 if (window.testRunner) {
 178                         var allGraphicElements = document.querySelectorAll(".region1, #divMain, #divText, .grid, .vgrid, #regionParent, .inlineElements, #regionInfo");
 179                         for (var i=0; i<allGraphicElements.length; i++)
 180                                 allGraphicElements[i].style.display = "none";
 181                 }
 182
 183         </script>
 184 </body>
 185 </html>