third_party/WebKit/LayoutTests/fast/block/positioning/offsetLeft-offsetTop-multicolumn.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5     #multicol {
   6         -moz-column-width: 100px;
   7         -webkit-column-width: 100px;
   8         column-width: 100px;
   9         column-fill: auto;
  10         height: 200px;
  11     }
  12
  13     span {
  14         display: inline-block;
  15         height: 20px;
  16         padding: 2px;
  17         background: red;
  18     }
  19
  20     .size1 {
  21         width: 10px;
  22     }
  23
  24     .size2 {
  25         width: 20px;
  26     }
  27     .size3 {
  28         width: 40px;
  29     }
  30 </style>
  31 </head>
  32 <body>
  33 <p> Bug <a href="http://webkit.org/b/34875">34875</a>: offsetLeft broken within CSS3 columns </p>
  34 <p>There should not be any red spans visible.</p>
  35 <p>
  36 This test checks that offsetLeft and offsetTop return correct values when used
  37 on elements contained in multiple columns. We put a number of red spans (of
  38 arbitrary size) in a multi-column div. The script at the end creates an
  39 identically sized green span for each of the red spans, and places it at the
  40 offsetLeft and offsetTop of the red span, using absolute position. This ensures
  41 that the green span completely covers the red span.
  42 </p>
  43 <div id="multicol">
  44     <div>
  45         <span class="size1"></span>
  46         <span class="size2"></span>
  47         <span class="size2"></span>
  48         <span class="size3"></span>
  49         <span class="size2"></span>
  50         <span class="size1"></span>
  51     </div>
  52     <div>
  53         <span class="size2"></span>
  54         <span class="size1"></span>
  55         <span class="size3"></span>
  56         <span class="size3"></span>
  57         <span class="size2"></span>
  58         <span class="size3"></span>
  59         <span class="size1"></span>
  60         <span class="size2"></span>
  61         <span class="size2"></span>
  62         <span class="size2"></span>
  63         <span class="size3"></span>
  64         <span class="size2"></span>
  65         <span class="size3"></span>
  66         <span class="size1"></span>
  67         <span class="size3"></span>
  68         <span class="size3"></span>
  69         <span class="size3"></span>
  70         <span class="size2"></span>
  71         <span class="size3"></span>
  72     </div>
  73     <div>
  74         <span class="size3"></span>
  75         <span class="size2"></span>
  76         <span class="size1"></span>
  77         <span class="size1"></span>
  78         <span class="size2"></span>
  79         <span class="size2"></span>
  80         <div>
  81             <span class="size2"></span>
  82             <span class="size1"></span>
  83             <span class="size3"></span>
  84             <span class="size3"></span>
  85             <span class="size1"></span>
  86             <span class="size3"></span>
  87             <span class="size3"></span>
  88             <span class="size2"></span>
  89             <div>
  90                 <span class="size2"></span>
  91                 <span class="size3"></span>
  92                 <span class="size1"></span>
  93                 <span class="size3"></span>
  94                 <span class="size3"></span>
  95                 <span class="size2"></span>
  96                 <span class="size1"></span>
  97                 <span class="size1"></span>
  98                 <span class="size2"></span>
  99                 <span class="size2"></span>
 100                 <span class="size2"></span>
 101                 <span class="size1"></span>
 102                 <span class="size3"></span>
 103             </div>
 104             <span class="size3"></span>
 105             <span class="size1"></span>
 106             <span class="size3"></span>
 107             <span class="size3"></span>
 108             <span class="size2"></span>
 109             <span class="size2"></span>
 110         </div>
 111         <span class="size3"></span>
 112         <span class="size1"></span>
 113         <span class="size3"></span>
 114     </div>
 115 </div>
 116 <script>
 117     var body = document.getElementsByTagName("body")[0];
 118     var multicol = document.getElementById("multicol");
 119     var spans = multicol.getElementsByTagName("span");
 120     for (var i = 0; i < spans.length; ++i) {
 121         var item = spans[i];
 122         var cover = document.createElement("span");
 123         cover.setAttribute("class", item.getAttribute("class"));
 124         cover.setAttribute("style", "background: green; " +
 125                                     "z-index: 10; " +
 126                                     "position: absolute; " +
 127                                     "left: " + item.offsetLeft + "px; " +
 128                                     "top: " + item.offsetTop + "px;");
 129         body.appendChild(cover);
 130     }
 131 </script>
 132 </body>
 133 </html>