src/third_party/WebKit/LayoutTests/fast/multicol/newmulticol/compare-with-old-impl/client-rects.html

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