Convert fast/multicol/client-rects.html to reftest.

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

Index: LayoutTests/fast/multicol/newmulticol/compare-with-old-impl/client-rects.html
diff --git a/LayoutTests/fast/multicol/newmulticol/compare-with-old-impl/client-rects.html b/LayoutTests/fast/multicol/newmulticol/compare-with-old-impl/client-rects.html
deleted file mode 100644
index 545f9b3f90dc64b90c667d397299f9bf702d36e1..0000000000000000000000000000000000000000
--- a/LayoutTests/fast/multicol/newmulticol/compare-with-old-impl/client-rects.html
+++ /dev/null
@@ -1,133 +0,0 @@
-<script>
-    if (window.internals)
-        internals.settings.setRegionBasedColumnsEnabled(true);
-</script>
-<style>
-    div.columns {
-        display: inline-block;
-        height: 50px;
-        width: 110px;
-        margin: 10px 0;
-        padding: 10px;
-        border: solid black;
-        font-family: Ahem;
-        font-size: 25px;
-        color: lightblue;
-        -webkit-columns: 2;
-        -webkit-column-gap: 10px;
-        columns: 2;
-        column-gap: 10px;
-        column-fill: auto;
-    }
-
-    div.marker {
-        position: absolute;
-        border: solid rgba(0, 0, 255, 0.5);
-        -webkit-box-sizing: border-box;
-    }
-
-    input[type="range"] {
-        -webkit-appearance: none;
-        width: 25px;
-        height: 25px;
-        background-color: lightblue;
-    }
-
-    input[type="range"]::-webkit-slider-thumb {
-        -webkit-appearance: none;
-    }
-</style>
-<p>
-    The blue borders should coincide with light blue squares, like this:
-    <span style="display: inline-block; background-color: lightblue; border: solid rgba(0, 0, 255, 0.5); width: 19px; height: 19px;"></span>.
-    There should be none of this:
-    <span style="display: inline-block; background-color: lightblue; width: 25px; height: 25px;"></span>
-    or this:
-    <span style="display: inline-block; border: solid rgba(0, 0, 255, 0.5); width: 19px; height: 19px;"></span>.
-</p>
-<div class="columns" id="t1">
-    <br>x y z
-</div>
-
-<div class="columns">
-    <br><span id="t2">x y z</span>
-</div>
-
-<div class="columns">
-    <br><div id="t3">x y z</div>
-</div>
-
-<div class="columns">
-    <br><div id="t4"><br>y z</div>
-</div>
-
-<div class="columns">
-    <br><div><br><input id="t5" type="range"></div>
-</div>
-
-<div class="columns">
-    <br><div><br><img id="t6" style="width: 25px; height: 25px; background-color: lightblue;"></div>
-</div>
-
-<p>
-    Except here, where the blue border should be around the bigger slice of the blue square, on the right.
-</p>
-
-<div class="columns">
-    <div id="t7" style=" margin-top: 40px; width: 25px; height: 25px; background-color: lightblue;"></div>
-</div>
-
-<script>
-    function placeMarker(clientRect)
-    {
-        var marker = document.body.appendChild(document.createElement("div"));
-        marker.className = "marker";
-        marker.style.left = clientRect.left + "px";
-        marker.style.top = clientRect.top + "px";
-        marker.style.width = clientRect.width + "px";
-        marker.style.height = clientRect.height + "px";
-    }
-
-    function placeMarkersForRange(range, startOffset)
-    {
-        if (startOffset === undefined)
-            startOffset = 0;
-
-        var clientRects = range.getClientRects();
-        for (var i = startOffset; i < clientRects.length; ++i)
-            placeMarker(clientRects[i]);
-    }
-
-    var range = document.createRange();
-
-    var textNode = document.getElementById("t1").firstChild.nextSibling.nextSibling;
-    range.setStart(textNode, 0);
-    range.setEnd(textNode, 5);
-    placeMarkersForRange(range);
-
-    textNode = document.getElementById("t2").firstChild;
-    range.setStart(textNode, 0);
-    range.setEnd(textNode, 5);
-    placeMarkersForRange(range);
-
-    textNode = document.getElementById("t3").firstChild;
-    range.setStart(textNode, 0);
-    range.setEnd(textNode, 5);
-    placeMarkersForRange(range);
-
-    var block = document.getElementById("t4");
-    range.selectNode(block);
-    placeMarkersForRange(range, 1);
-
-    var slider = document.getElementById("t5");
-    range.selectNode(slider);
-    placeMarkersForRange(range);
-
-    var image = document.getElementById("t6");
-    range.selectNode(image);
-    placeMarkersForRange(range);
-
-    var div = document.getElementById("t7");
-    range.selectNode(div);
-    placeMarkersForRange(div);
-</script>