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

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