src/third_party/WebKit/LayoutTests/fast/multicol/client-rects.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         -webkit-columns: 2;
  13         -webkit-column-gap: 10px;
  14         columns: 2;
  15         column-gap: 10px;
  16         column-fill: auto;
  17         display: inline-block;
  18         vertical-align: bottom;
  19     }
  20
  21     div.marker {
  22         position: absolute;
  23         border: solid dodgerblue;
  24         -webkit-box-sizing: border-box;
  25     }
  26
  27     input[type="range"] {
  28         -webkit-appearance: none;
  29         width: 25px;
  30         height: 25px;
  31         background-color: lightblue;
  32         margin: 0;
  33     }
  34
  35     input[type="range"]::-webkit-slider-thumb {
  36         -webkit-appearance: none;
  37     }
  38 </style>
  39 <p>
  40     The blue borders should coincide with light blue squares, like this:
  41     <span style="display: inline-block; background-color: lightblue; border: solid dodgerblue; width: 19px; height: 19px;"></span>.
  42     There should be none of this:
  43     <span style="display: inline-block; background-color: lightblue; width: 25px; height: 25px;"></span>
  44     or this:
  45     <span style="display: inline-block; border: solid dodgerblue; width: 19px; height: 19px;"></span>.
  46 </p>
  47 <div class="columns" id="t1">
  48     <br>x y z
  49 </div>
  50
  51 <div class="columns">
  52     <br><span id="t2">x y z</span>
  53 </div>
  54
  55 <div class="columns">
  56     <br><div id="t3">x y z</div>
  57 </div>
  58
  59 <div class="columns">
  60     <br><div id="t4"><br>y z</div>
  61 </div>
  62
  63 <div class="columns">
  64     <br><div><br><input id="t5" type="range"></div>
  65 </div>
  66
  67 <div class="columns">
  68     <br><div><br><img id="t6" style="width: 25px; height: 25px; background-color: lightblue;"></div>
  69 </div>
  70
  71 <p>
  72     Except here, where the blue border should be around the bigger slice of the blue square, on the right.
  73 </p>
  74
  75 <div class="columns">
  76     <div id="t7" style=" margin-top: 40px; width: 25px; height: 25px; background-color: lightblue;"></div>
  77 </div>
  78
  79 <script>
  80     function placeMarker(clientRect)
  81     {
  82         var marker = document.body.appendChild(document.createElement("div"));
  83         marker.className = "marker";
  84         marker.style.left = clientRect.left + "px";
  85         marker.style.top = clientRect.top + "px";
  86         marker.style.width = clientRect.width + "px";
  87         marker.style.height = clientRect.height + "px";
  88     }
  89
  90     function placeMarkersForRange(range, startOffset)
  91     {
  92         if (startOffset === undefined)
  93             startOffset = 0;
  94
  95         var clientRects = range.getClientRects();
  96         for (var i = startOffset; i < clientRects.length; ++i)
  97             placeMarker(clientRects[i]);
  98     }
  99
 100     var range = document.createRange();
 101
 102     var textNode = document.getElementById("t1").firstChild.nextSibling.nextSibling;
 103     range.setStart(textNode, 0);
 104     range.setEnd(textNode, 5);
 105     placeMarkersForRange(range);
 106
 107     textNode = document.getElementById("t2").firstChild;
 108     range.setStart(textNode, 0);
 109     range.setEnd(textNode, 5);
 110     placeMarkersForRange(range);
 111
 112     textNode = document.getElementById("t3").firstChild;
 113     range.setStart(textNode, 0);
 114     range.setEnd(textNode, 5);
 115     placeMarkersForRange(range);
 116
 117     var block = document.getElementById("t4");
 118     range.selectNode(block);
 119     placeMarkersForRange(range, 1);
 120
 121     var slider = document.getElementById("t5");
 122     range.selectNode(slider);
 123     placeMarkersForRange(range);
 124
 125     var image = document.getElementById("t6");
 126     range.selectNode(image);
 127     placeMarkersForRange(range);
 128
 129     var div = document.getElementById("t7");
 130     range.selectNode(div);
 131     placeMarkersForRange(div);
 132 </script>