// global async_test, assert_equals
//
// This test generates a couple of scenarios (each a TestData) for
// sizing inline <svg> and has a simple JavaScript sizing
// implementation that handles the generated scenarios. It generates a
// DOM corresponding to the scenario and compares the laid out size to
// the calculated size.
//
// The tests loops through different combinations of:
//
// * width and height on <svg>, both through style and attributes
//
// * viewBox on <svg> (gives intrinsic ratio)
//
// * width and height on containing block of <object>
//
// All these contribute to the final size of the SVG in some way.
//
// The test focuses on the size of the CSS box generated by the SVG.
// The SVG is always empty by itself so no actual SVG are tested.
//
// Focus is also put on how the different attributes interact, little
// focus is put on variations within an attribute that doesn't affect
// the relationship to other attributes, i.e only px and % units are
// used since that covers the interactions.
//
// To debug a specific test append ?<test-id> to the URL. An <iframe>
// is generated with equivalent test and the source of the test is
// added to a <pre> element.

(function() {
    function parseLength(l) {
        var match = /^([-+]?[0-9]+|[-+]?[0-9]*\.[0-9]+)(px|%)?$/.exec(l);
        if (!match)
            return null;
        return new Length(Number(match[1]), match[2] ? match[2] : "px");
    }

    function parseViewBox(input) {
        if (!input)
            return null;

        var arr = input.split(' ');
        return arr.map(function(a) { return parseInt(a); });
    }

    // Only px and % are used
    function convertToPx(input, percentRef) {
        if (input == null)
            return null;
        var length = parseLength(input);
        if (length.amount == 0)
            return 0;
        if (!length.unit)
            length.unit = "px";
        if (length.unit == "%" && percentRef === undefined)
            return null;
        return length.amount * { px: 1,
                                 "%": percentRef/100}[length.unit];
    }

    function Length(amount, unit) {
        this.amount = amount;
        this.unit = unit;
    }

    function describe(data) {
        function dumpObject(obj) {
            var r = "";
            for (var property in obj) {
                if (obj.hasOwnProperty(property)) {
                    var value = obj[property];
                    if (typeof value == 'string')
                        value = "'" + value + "'";
                    else if (value == null)
                        value = "null";
                    else if (typeof value == 'object')
                    {
                        if (value instanceof Array)
                            value = "[" + value + "]";
                        else
                            value = "{" + dumpObject(value) + "}";
                    }

                    if (value != "null")
                        r += property + ": " + value + ", ";
                }
            }
            return r;
        }
        var result = dumpObject(data);
        if (result == "")
            return "(initial values)";
        return result;
    }

    function TestData(config) {
        this.config = config;
        this.name = describe(config);
        this.style = {};
        if (config.svgWidthStyle)
            this.style["width"] = config.svgWidthStyle;
        else
            this.mapPresentationalHintLength("width", config.svgWidthAttr);

        if (config.svgHeightStyle)
            this.style["height"] = config.svgHeightStyle;
        else
            this.mapPresentationalHintLength("height", config.svgHeightAttr);
    }

    TestData.prototype.mapPresentationalHintLength =
        function(cssProperty, attr) {
            if (attr) {
                var l = parseLength(attr);
                if (l)
                    this.style[cssProperty] = l.amount + l.unit;
            }
        };

    TestData.prototype.computedWidthIsAuto = function() {
        return !this.style["width"] || this.style["width"] == 'auto';
    };

    TestData.prototype.computedHeightIsAuto = function() {
        return !this.style["height"] || this.style["height"] == 'auto' ||
            (parseLength(this.style["height"]).unit == '%' &&
             this.containerComputedHeightIsAuto());
    };

    TestData.prototype.containerComputedWidthIsAuto = function() {
        return !this.config.containerWidthStyle ||
            this.config.containerWidthStyle == 'auto';
    };

    TestData.prototype.containerComputedHeightIsAuto = function() {
        return !this.config.containerHeightStyle ||
            this.config.containerHeightStyle == 'auto';
    };

    TestData.prototype.intrinsicInformation = function() {
        var w = convertToPx(this.config.svgWidthAttr) || 0;
        var h = convertToPx(this.config.svgHeightAttr) || 0;
        var r = 0;
        if (w && h) {
            r =  w / h;
        } else {
            var vb = parseViewBox(this.config.svgViewBoxAttr);
            if (vb) {
                r = vb[2] / vb[3];
            }
            if (r) {
                if (!w && h)
                    w = h * r;
                else if (!h && w)
                    h = w / r;
            }
        }
        return { width: w, height: h, ratio: r };
    };


    TestData.prototype.computeInlineReplacedSize = function() {
        var intrinsic = this.intrinsicInformation();
        var self = this;

        // http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height
        function calculateUsedHeight() {
            if (self.computedHeightIsAuto()) {
                if (self.computedWidthIsAuto() && intrinsic.height)
                    return intrinsic.height;
                if (intrinsic.ratio)
                    return calculateUsedWidth() / intrinsic.ratio;
                if (intrinsic.height)
                    return intrinsic.height;
                return 150;
            }

            return convertToPx(self.style["height"],
                               convertToPx(self.config.containerHeightStyle,
                                           self.outerHeight));
        }

        // http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width
        function calculateUsedWidth() {
            if (self.computedWidthIsAuto()) {
                if (self.computedHeightIsAuto() && intrinsic.width)
                    return intrinsic.width;
                if (!self.computedHeightIsAuto() && intrinsic.ratio)
                    return calculateUsedHeight() * intrinsic.ratio;
                if (self.computedHeightIsAuto() && intrinsic.ratio) {
                    if (self.containerComputedWidthIsAuto()) {
                        // Note: While this is actually undefined in CSS
                        // 2.1, use the suggested value by examining the
                        // ancestor widths.
                        return self.outerWidth;
                    } else {
                        return convertToPx(self.config.containerWidthStyle,
                                           self.outerWidth);
                    }
                }
                if (intrinsic.width)
                    return intrinsic.width;
                return 300;
            }

            if (self.containerComputedWidthIsAuto())
                return convertToPx(self.style["width"], self.outerWidth);
            else
                return convertToPx(self.style["width"],
                                   convertToPx(self.config.containerWidthStyle,
                                               self.outerWidth));
        }
        return { width: calculateUsedWidth(),
                 height: calculateUsedHeight() };
    };

    var testContainer = document.querySelector('#testContainer');
    TestData.prototype.outerWidth = testContainer.getBoundingClientRect().width;
    TestData.prototype.outerHeight = testContainer.getBoundingClientRect().height;

    window.TestData = TestData;
})();

function setupContainer(testData, svgElement, options) {
    options = options || {};

    var container = document.createElement("div");

    container.id = "container";
    if (testData.config.containerWidthStyle)
        container.style.width = testData.config.containerWidthStyle;

    if (testData.config.containerHeightStyle)
        container.style.height = testData.config.containerHeightStyle;

    if (options.pretty)
        container.appendChild(document.createTextNode("\n\t\t"));
    container.appendChild(svgElement);
    if (options.pretty)
        container.appendChild(document.createTextNode("\n\t"));

    return container;
}

function setupSVGElement(testData) {
    var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svgElement.setAttribute("id", "test");
    if (testData.config.svgWidthStyle)
        svgElement.style.width = testData.config.svgWidthStyle;
    if (testData.config.svgHeightStyle)
        svgElement.style.height = testData.config.svgHeightStyle;
    if (testData.config.svgWidthAttr)
        svgElement.setAttribute("width", testData.config.svgWidthAttr);
    if (testData.config.svgHeightAttr)
        svgElement.setAttribute("height", testData.config.svgHeightAttr);
    if (testData.config.svgViewBoxAttr)
        svgElement.setAttribute("viewBox", testData.config.svgViewBoxAttr);

    return svgElement;
}

function buildDemo(testData) {
    // Non-essential debugging tool

    var options = { pretty: true };
    var expectedRect =
            testData.computeInlineReplacedSize();
    var container =
            setupContainer(testData, setupSVGElement(testData), options);

    var root = document.createElement("html");
    var style = document.createElement("style");

    style.textContent = "\n" +
        "\tbody { margin: 0; font-family: sans-serif }\n" +
        "\t#expected {\n" +
        "\t\twidth: " + (expectedRect.width) + "px; height: "
        + (expectedRect.height) + "px;\n" +
        "\t\tborder: 10px solid lime; position: absolute;\n" +
        "\t\tbackground-color: red }\n" +
        "\t#testContainer { position: absolute;\n" +
        "\t\ttop: 10px; left: 10px; width: 800px; height: 600px }\n" +
        "\tsvg { background-color: green }\n" +
        "\t.result { position: absolute; top: 0; right: 0;\n" +
        "\t\tbackground-color: hsla(0,0%, 0%, 0.85); border-radius: 0.5em;\n" +
        "\t\tpadding: 0.5em; border: 0.25em solid black }\n" +
        "\t.pass { color: lime }\n" +
        "\t.fail { color: red }\n";

    root.appendChild(document.createTextNode("\n"));
    root.appendChild(style);
    root.appendChild(document.createTextNode("\n"));

    var script = document.createElement("script");
    script.textContent = "\n" +
        "onload = function() {\n" +
        "\tvar svgRect = \n" +
        "\t\tdocument.querySelector('#test').getBoundingClientRect();\n" +
        "\tpassed = (svgRect.width == " + expectedRect.width + " && " +
        "svgRect.height == " + expectedRect.height + ");\n" +
        "\tdocument.body.insertAdjacentHTML('beforeEnd',\n" +
        "\t\t'<span class=\"result '+ (passed ? 'pass' : 'fail') " +
        "+ '\">' + (passed ? 'Pass' : 'Fail') + '</span>');\n" +
        "};\n";

    root.appendChild(script);
    root.appendChild(document.createTextNode("\n"));

    var expectedElement = document.createElement("div");
    expectedElement.id = "expected";
    root.appendChild(expectedElement);
    root.appendChild(document.createTextNode("\n"));

    var testContainer = document.createElement("div");
    testContainer.id = "testContainer";
    testContainer.appendChild(document.createTextNode("\n\t"));
    testContainer.appendChild(container);
    testContainer.appendChild(document.createTextNode("\n"));
    root.appendChild(testContainer);
    root.appendChild(document.createTextNode("\n"));

    return "<!DOCTYPE html>\n" + root.outerHTML;
}

function doCombinationTest(values, func)
{
    // Recursively construct all possible combinations of values and
    // send them to |func|. Example:
    //
    // values: [["X", ["a", "b"]],
    //          ["Y", ["c", "d"]]]
    //
    // generates the objects:
    //
    // 1: { "X": "a", "Y": "c" }
    // 2: { "X": "a", "Y": "d" }
    // 3: { "X": "b", "Y": "c" }
    // 4: { "X": "b", "Y": "d" }
    //
    // and each will be sent to |func| with the corresponding prefixed
    // id (modulo order).

    var combinationId = 1;
    function doCombinationTestRecursive(slicedValues, config) {
        if (slicedValues.length > 0) {
            var configKey = slicedValues[0][0];
            slicedValues[0][1].forEach(function(configValue) {
                var new_config = {};
                for (k in config)
                    new_config[k] = config[k];
                new_config[configKey] = configValue;
                doCombinationTestRecursive(slicedValues.slice(1), new_config);
            });
        } else {
            func(config, combinationId++);
        }
    }
    doCombinationTestRecursive(values, {});
}

var debugHint = function(id) { return "(append ?"+id+" to debug) " };
var testSingleId;
if (window.location.search) {
    testSingleId = window.location.search.substring(1);
    debugHint = function(id) { return ""; };
}

doCombinationTest(
    [["containerWidthStyle", [null, "400px"]],
     ["containerHeightStyle", [null, "400px"]],
     ["svgViewBoxAttr", [ null, "0 0 100 200" ]],
     ["svgWidthStyle", [ null, "100px", "50%" ]],
     ["svgHeightStyle", [ null, "100px", "50%" ]],
     ["svgWidthAttr", [ null, "200", "25%" ]],
     ["svgHeightAttr", [ null, "200", "25%" ]]],
    function(config, id) {
        if (!testSingleId || testSingleId == id) {
            var testData = new TestData(config);

            var expectedRect =
                    testData.computeInlineReplacedSize();
            var svgElement = setupSVGElement(testData);
            var container =
                    setupContainer(testData, svgElement);

            var checkSize = function() {
                var svgRect =
                        svgElement.getBoundingClientRect();

                try {
                    assert_equals(svgRect.width,
                                  expectedRect.width,
                                  debugHint(id) + "Wrong width");
                    assert_equals(svgRect.height,
                                  expectedRect.height,
                                  debugHint(id) + "Wrong height");
                } finally {
                    testContainer.removeChild(container);
                    if (testSingleId)
                        document.body.removeChild(testContainer);
                }
            };

            testContainer.appendChild(container);
            test(checkSize, testData.name);
        }

        if (testSingleId == id) {
            var pad = function(n, width, z) {
                z = z || '0';
                n = n + '';
                return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
            };

            var demo = buildDemo(testData);
            var iframe = document.createElement('iframe');
            iframe.style.width = (Math.max(900, expectedRect.width)) + "px";
            iframe.style.height = (Math.max(400, expectedRect.height)) + "px";
            iframe.src = "data:text/html;charset=utf-8," + encodeURIComponent(demo);
            document.body.appendChild(iframe);

            document.body.insertAdjacentHTML(
                'beforeEnd',
                '<p><a href="data:application/octet-stream;charset=utf-8;base64,' +
                    btoa(demo) + '" download="svg-in-object-test-' + pad(id, 3) + '.html">Download</a></p>');
        }
    });