<script>

if (!window.internals)
        document.write("This test must be run in a test runner.")

function testRects(offset, rects, radius) {
    if (radius == undefined)
        radius = 8;

    var gElement = document.createElementNS("http://www.w3.org/2000/svg", "g");
    gElement.setAttribute("transform", "translate(" + offset[0] + ", " + offset[1] + ")");
    document.getElementById("paths").appendChild(gElement);

    for (var i in rects) {
        var rectElement = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        rectElement.setAttribute("x", rects[i][0]);
        rectElement.setAttribute("y", rects[i][1]);
        rectElement.setAttribute("width", rects[i][2]);
        rectElement.setAttribute("height", rects[i][3]);
        rectElement.setAttribute("fill", "rgba(0, 0, 0, 0.2)");
        rectElement.setAttribute("stroke", "rgba(0, 0, 0, 0.5)");
        gElement.appendChild(rectElement);
    }

    if (window.internals) {
        var concatRects = [];
        for (var i in rects)
            Array.prototype.push.apply(concatRects, rects[i]);
        var pathString = window.internals.pathStringWithShrinkWrappedRects(concatRects, radius);
        var pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
        pathElement.setAttribute("d", pathString)
        pathElement.setAttribute("fill", "none");
        pathElement.setAttribute("stroke", "blue");
        pathElement.setAttribute("stroke-width", "3");
        gElement.appendChild(pathElement);
    }
}

window.onload = function () {
    // Right and left aligned, touching:

    testRects([20, 20], [
        [0, 0, 50, 20],
        [0, 20, 35, 20],
        [0, 40, 20, 20]]);

    testRects([20, 90], [
        [0, 0, 20, 20],
        [0, 20, 35, 20],
        [0, 40, 50, 20]]);

    testRects([80, 20], [
        [0, 0, 50, 20],
        [15, 20, 35, 20],
        [30, 40, 20, 20]]);

    testRects([80, 90], [
        [30, 0, 20, 20],
        [15, 20, 35, 20],
        [0, 40, 50, 20]]);

    // Center aligned, touching:

    testRects([170, 20], [
        [0, 0, 100, 40],
        [20, 40, 60, 40],
        [35, 80, 30, 40]]);

    testRects([270, 20], [
        [35, 0, 30, 40],
        [20, 40, 60, 40],
        [0, 80, 100, 40]]);

    testRects([370, 20], [
        [0, 0, 100, 40],
        [35, 40, 30, 40],
        [20, 80, 60, 40]]);

    // Other:

    testRects([20, 200], [
        [0, 0, 40, 40],
        [20, 20, 40, 40],
        [40, 40, 40, 40]]);

    testRects([120, 200], [
        [0, 40, 40, 40],
        [20, 20, 40, 40],
        [40, 0, 40, 40]]);

    testRects([220, 200], [
        [0, 0, 40, 40],
        [0, 40, 40, 40],
        [0, 80, 40, 40]]);

    testRects([200, 350], [
        [0, 0, 100, 50],
        [0, 25, 50, 50]]);

    // Non-touching:

    testRects([20, 300], [
        [0, 0, 40, 60],
        [0, 80, 40, 40]]);

    // Combination of touching and non-touching:

    testRects([280, 200], [
        [0, 0, 30, 40],
        [0, 80, 50, 40],
        [60, 0, 40, 40],
        [80, 40, 80, 40],
        [100, 80, 40, 40],
        [150, 0, 40, 20],
        [170, 15, 40, 20],
        [190, 30, 40, 20]]);

    // Enclosing:

    testRects([100, 300], [
        [0, 0, 50, 50],
        [10, 10, 20, 20]]);

    testRects([100, 370], [
        [0, 0, 50, 50],
        [10, 10, 20, 20],
        [20, 20, 20, 20]]);

    // Harder (widths less than the radius, horizontally arranged, etc.):

    testRects([500, 20], [
        [0, 0, 40, 40],
        [20, 40, 65, 40],
        [40, 80, 40, 40]]);

    testRects([600, 20], [
        [20, 0, 20, 20],
        [15, 20, 35, 20],
        [0, 40, 50, 20]]);

    testRects([650, 100], [
        [0, 0, 40, 40],
        [40, 0, 40, 40],
        [80, 0, 40, 40]]);

    testRects([700, 20], [
        [20, 0, 20, 20],
        [15, 20, 35, 20],
        [0, 20, 50, 20]]);

    testRects([600, 200], [
        [0, 0, 20, 40],
        [20, 20, 20, 40],
        [40, 0, 20, 40]]);

    testRects([700, 200], [
        [0, 0, 20, 40],
        [20, 25, 20, 40],
        [0, 50, 20, 40]]);

    // Huge radius:

    testRects([20, 450], [
        [0, 0, 50, 20],
        [0, 20, 35, 20],
        [0, 40, 20, 20]], 100);

    testRects([20, 520], [
        [0, 0, 20, 20],
        [0, 20, 35, 20],
        [0, 40, 50, 20]], 100);

    testRects([80, 450], [
        [0, 0, 50, 20],
        [15, 20, 35, 20],
        [30, 40, 20, 20]], 100);

    testRects([80, 520], [
        [30, 0, 20, 20],
        [15, 20, 35, 20],
        [0, 40, 50, 20]], 100);

    testRects([170, 450], [
        [0, 0, 100, 40],
        [20, 40, 60, 40],
        [35, 80, 30, 40]], 100);

    testRects([270, 450], [
        [35, 0, 30, 40],
        [20, 40, 60, 40],
        [0, 80, 100, 40]], 100);

    testRects([370, 450], [
        [0, 0, 100, 40],
        [35, 40, 30, 40],
        [20, 80, 60, 40]], 100);

    testRects([750, 500], [
        [0, 0, 20, 40],
        [20, 20, 20, 40],
        [0, 40, 20, 40]]);

    // Holes:

    testRects([400, 300], [
        [30, 0, 40, 40],
        [60, 40, 40, 40],
        [30, 80, 40, 40],
        [0, 40, 40, 40]]);

    // Lines with overlap:

    testRects([520, 450], [
        [0, 0, 50, 20],
        [0, 15, 35, 20],
        [0, 30, 20, 20]]);

    testRects([520, 520], [
        [0, 0, 20, 20],
        [0, 15, 35, 20],
        [0, 30, 50, 20]]);

    testRects([580, 450], [
        [0, 0, 50, 20],
        [15, 15, 35, 20],
        [30, 30, 20, 20]]);

    testRects([580, 520], [
        [30, 0, 20, 20],
        [15, 15, 35, 20],
        [0, 30, 50, 20]]);
}

</script>

<style>
body {
    margin: 0;
}
</style>

<svg id="paths" width="800" height="600"></svg>