third_party/WebKit/LayoutTests/fast/block/positioning/offsetLeft-offsetTop-multicolumn-expected.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         background: green;
  17         padding: 2px;
  18     }
  19
  20     .size1 {
  21         width: 10px;
  22     }
  23     .size2 {
  24         width: 20px;
  25     }
  26     .size3 {
  27         width: 40px;
  28     }
  29 </style>
  30 </head>
  31 <body>
  32 <p> Bug <a href="http://webkit.org/b/34875">34875</a>: offsetLeft broken within CSS3 columns </p>
  33 <p>There should not be any red spans visible.</p>
  34 <p>
  35 This test checks that offsetLeft and offsetTop return correct values when used
  36 on elements contained in multiple columns. We put a number of red spans (of
  37 arbitrary size) in a multi-column div. The script at the end creates an
  38 identically sized green span for each of the red spans, and places it at the
  39 offsetLeft and offsetTop of the red span, using absolute position. This ensures
  40 that the green span completely covers the red span.
  41 </p>
  42 <!--
  43 Note: This is the test reference file. Therefore, there is no script and
  44       all the spans are set to green in the css.
  45 -->
  46 <div id="multicol">
  47     <div>
  48         <span class="size1"></span>
  49         <span class="size2"></span>
  50         <span class="size2"></span>
  51         <span class="size3"></span>
  52         <span class="size2"></span>
  53         <span class="size1"></span>
  54     </div>
  55     <div>
  56         <span class="size2"></span>
  57         <span class="size1"></span>
  58         <span class="size3"></span>
  59         <span class="size3"></span>
  60         <span class="size2"></span>
  61         <span class="size3"></span>
  62         <span class="size1"></span>
  63         <span class="size2"></span>
  64         <span class="size2"></span>
  65         <span class="size2"></span>
  66         <span class="size3"></span>
  67         <span class="size2"></span>
  68         <span class="size3"></span>
  69         <span class="size1"></span>
  70         <span class="size3"></span>
  71         <span class="size3"></span>
  72         <span class="size3"></span>
  73         <span class="size2"></span>
  74         <span class="size3"></span>
  75     </div>
  76     <div>
  77         <span class="size3"></span>
  78         <span class="size2"></span>
  79         <span class="size1"></span>
  80         <span class="size1"></span>
  81         <span class="size2"></span>
  82         <span class="size2"></span>
  83         <div>
  84             <span class="size2"></span>
  85             <span class="size1"></span>
  86             <span class="size3"></span>
  87             <span class="size3"></span>
  88             <span class="size1"></span>
  89             <span class="size3"></span>
  90             <span class="size3"></span>
  91             <span class="size2"></span>
  92             <div>
  93                 <span class="size2"></span>
  94                 <span class="size3"></span>
  95                 <span class="size1"></span>
  96                 <span class="size3"></span>
  97                 <span class="size3"></span>
  98                 <span class="size2"></span>
  99                 <span class="size1"></span>
 100                 <span class="size1"></span>
 101                 <span class="size2"></span>
 102                 <span class="size2"></span>
 103                 <span class="size2"></span>
 104                 <span class="size1"></span>
 105                 <span class="size3"></span>
 106             </div>
 107             <span class="size3"></span>
 108             <span class="size1"></span>
 109             <span class="size3"></span>
 110             <span class="size3"></span>
 111             <span class="size2"></span>
 112             <span class="size2"></span>
 113         </div>
 114         <span class="size3"></span>
 115         <span class="size1"></span>
 116         <span class="size3"></span>
 117     </div>
 118 </div>
 119 </body>
 120 </html>