LayoutTests/fast/table/resources/min-width-helpers.js

var testNotes = "======== General notes ========\n\
\n\
The stylesheet used to style the table in each test is available at: <a href=\"resources/min-width.css\">LayoutTests/fast/table/resources/min-width.css</a>\n\
\n\
Most importantly, note that each table has:\n\
- minimum intrinsic width and height both equal to 100px based on the table content\n\
- maximum intrinsic width and height both equal to 250px based on the table content\n\
- borders and paddings that add up to 30px in both the horizontal and vertical directions\n\
- a parent whose dimensions are 1000px by 1000px\n\
\n\
The function signature of computeLogicalWidth is:\n\
function computeLogicalWidth(writingMode, direction, tableStyle)\n";

/* All tables will be generated to have the following intrinsic widths. */
var minIntrinsicLogicalWidth = 100;
var maxIntrinsicLogicalWidth = 250;

/* Tests will cover all permutations of the follow properties and settings. */
var tableTypes = ["html", "css"];
var displays = ["block", "inline"]
var writingModes = ["horizontal", "vertical"];
var directions = ["ltr", "rtl"];
var logicalWidthsCombinations = [
    /* fixed min-width, auto width */
    {"min-width": "500px", "width": null, "computed-width": {"css": "500px", "html": "470px"}},
    {"min-width": "150px", "width": null, "computed-width": {"css": "250px", "html": "250px"}},
    {"min-width": "50px", "width": null, "computed-width": {"css": "250px", "html": "250px"}},
    /* fixed min-width, fixed width */
    {"min-width": "500px", "width": "600px", "computed-width": {"css": "600px", "html": "570px"}},
    {"min-width": "500px", "width": "400px", "computed-width": {"css": "500px", "html": "470px"}},
    /* fixed min-width, percent width */
    {"min-width": "500px", "width": "60%", "computed-width": {"css": "600px", "html": "570px"}},
    {"min-width": "500px", "width": "40%", "computed-width": {"css": "500px", "html": "470px"}},
    /* percent min-width, auto width */
    {"min-width": "50%", "width": null, "computed-width": {"css": "500px", "html": "470px"}},
    {"min-width": "15%", "width": null, "computed-width": {"css": "250px", "html": "250px"}},
    {"min-width": "5%", "width": null, "computed-width": {"css": "250px", "html": "250px"}},
    /* percent min-width, fixed width */
    {"min-width": "50%", "width": "600px", "computed-width": {"css": "600px", "html": "570px"}},
    {"min-width": "50%", "width": "400px", "computed-width": {"css": "500px", "html": "470px"}},
     /* percent min-width, percent width */
    {"min-width": "50%", "width": "60%", "computed-width": {"css": "600px", "html": "570px"}},
    {"min-width": "50%", "width": "40%", "computed-width": {"css": "500px", "html": "470px"}},
     /* auto min-width (shouldn't affect anything), auto width */
    {"min-width": "auto", "width": null, "computed-width": {"css": "250px", "html": "250px"}},
];

function runTests(tableType)
{
    debug(testNotes);

    writingModes.forEach(function(writingMode) {
        debug("======== Test " + writingMode + " writing mode ========\n");

        directions.forEach(function(direction) {
            debug("==== Test " + direction + " direction ====\n");

            logicalWidthsCombinations.forEach(function(logicalWidthsCombination) {
                var tableStyle = createTableStyle(writingMode, logicalWidthsCombination);
                shouldEvaluateTo("computeLogicalWidth('" + writingMode + "', '" + direction + "', '" + tableStyle + "')", "'" + logicalWidthsCombination["computed-width"][tableType] + "'");
            });

            debug("");
        });
    });
}

function createTableStyle(writingMode, logicalWidthsCombination)
{
    var widthStyle = "";

    var logicalWidthName = (writingMode == "vertical" ? "height" : "width");

    if (logicalWidthsCombination["width"] != null)
        widthStyle += logicalWidthName + ": " + logicalWidthsCombination["width"] + "; ";

    if (logicalWidthsCombination["min-width"] != null)
        widthStyle += "min-" + logicalWidthName + ": " + logicalWidthsCombination["min-width"] + ";";

    return widthStyle;
}

function parsePixelValue(str)
{
    if (typeof str != "string" || str.length < 3 || str.substr(str.length - 2) != "px") {
        testFailed(str + " is unparsable.");
        return -1;
    }
    return parseFloat(str);
}

function computeLogicalWidthHelper(tableType, display, writingMode, direction, tableStyle)
{
    var isCSSTable = (tableType == "css");
    var tableClass = display + " " + writingMode + " " + direction;

    var tableParent = document.createElement("div");
    tableParent.setAttribute("class", "table-parent");
    document.body.appendChild(tableParent);

    var table = document.createElement(isCSSTable ? "div" : "table");
    table.setAttribute("class", tableClass);
    table.setAttribute("style", tableStyle);
    tableParent.appendChild(table);

    var rowGroup = document.createElement(isCSSTable ? "div" : "tbody");
    rowGroup.setAttribute("class", "row-group");
    table.appendChild(rowGroup);

    var row = document.createElement(isCSSTable ? "div" : "tr");
    row.setAttribute("class", "row");
    rowGroup.appendChild(row);

    var cell = document.createElement(isCSSTable ? "div" : "td");
    cell.setAttribute("class", "cell");
    row.appendChild(cell);

    // Create as many spans of width equal to minIntrinsicLogicalWidth without exceeding maxIntrinsicLogicalWidth.
    var remainingLogicalWidth;
    for (remainingLogicalWidth = maxIntrinsicLogicalWidth; remainingLogicalWidth >= minIntrinsicLogicalWidth; remainingLogicalWidth -= minIntrinsicLogicalWidth) {
        span = createSpan(minIntrinsicLogicalWidth);
        cell.appendChild(span);
    }

    // Create a span of width < minIntrinsicLogicalWidth for any remaining width.
    if (remainingLogicalWidth > 0) {
        span = createSpan(remainingLogicalWidth);
        cell.appendChild(span);
    }

    var logicalWidthPropertyName = (writingMode == "vertical" ? "height" : "width");
    var computedLogicalWidth = window.getComputedStyle(table, null).getPropertyValue(logicalWidthPropertyName);
    computedLogicalWidth = Math.round(parsePixelValue(computedLogicalWidth)) + "px";

    document.body.removeChild(tableParent);

    return computedLogicalWidth;
}

function createSpan(logicalWidth)
{
    var span = document.createElement("span");
    span.setAttribute("style", "display: inline-block; width: " + logicalWidth + "px; height: " + logicalWidth + "px; background-color: #f00;");
    return span;
}