third_party/WebKit/LayoutTests/fast/multicol/client-rects-expected.html

   1 <!DOCTYPE html>
   2 <style>
   3     div.columns {
   4         height: 50px;
   5         width: 110px;
   6         margin: 10px 0;
   7         padding: 10px;
   8         border: solid black;
   9         font-family: Ahem;
  10         font-size: 25px;
  11         color: lightblue;
  12         display: inline-block;
  13         vertical-align: bottom;
  14         position: relative;
  15     }
  16
  17     .column {
  18         position: absolute;
  19         width: 50px;
  20     }
  21
  22     .left { left: 10px; }
  23     .right { right: 10px; }
  24
  25     .column > span {
  26         background-color: lightblue;
  27         display: block;
  28         width: 25px;
  29         height: 25px;
  30         border: solid dodgerblue;
  31         box-sizing: border-box;
  32     }
  33
  34     .special > .left > span {
  35         margin-top: 40px;
  36         height: 10px;
  37         border: none;
  38     }
  39     .special > .right span:first-child {
  40         border-bottom: none;
  41         height: 10px;
  42         margin-top: -10px;
  43         background-color: white;
  44     }
  45     .special > .right span:last-child {
  46         border-top: none;
  47         height: 15px;
  48     }
  49 </style>
  50 <p>
  51     The blue borders should coincide with light blue squares, like this:
  52     <span style="display: inline-block; background-color: lightblue; border: solid dodgerblue; width: 19px; height: 19px;"></span>.
  53     There should be none of this:
  54     <span style="display: inline-block; background-color: lightblue; width: 25px; height: 25px;"></span>
  55     or this:
  56     <span style="display: inline-block; border: solid dodgerblue; width: 19px; height: 19px;"></span>.
  57 </p>
  58 <div class="columns">
  59     <div class="column left"><br><span></span></div>
  60     <div class="column right"><span></span><span></span></div>
  61 </div>
  62 <div class="columns">
  63     <div class="column left"><br><span></span></div>
  64     <div class="column right"><span></span><span></span></div>
  65 </div>
  66 <div class="columns">
  67     <div class="column left"><br><span></span></div>
  68     <div class="column right"><span></span><span></span></div>
  69 </div>
  70 <div class="columns">
  71     <div class="column left"></div>
  72     <div class="column right"><span></span><span></span></div>
  73 </div>
  74 <div class="columns">
  75     <div class="column right"><span></span></div>
  76 </div>
  77 <div class="columns">
  78     <div class="column right"><span></span></div>
  79 </div>
  80 <p>
  81     Except here, where the blue border should be around the bigger slice of the blue square, on the right.
  82 </p>
  83 <div class="columns special">
  84     <div class="column left"><span></span></div>
  85     <div class="column right"><span></span><span></span></div>
  86 </div>