third_party/WebKit/LayoutTests/fast/table/script-tests/min-width-helpers.js

   1 var testNotes = "======== General notes ========\n\
   2 \n\
   3 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\
   4 \n\
   5 Most importantly, note that each table has:\n\
   6 - minimum intrinsic width and height both equal to 100px based on the table content\n\
   7 - maximum intrinsic width and height both equal to 250px based on the table content\n\
   8 - borders and paddings that add up to 30px in both the horizontal and vertical directions\n\
   9 - a parent whose dimensions are 1000px by 1000px\n\
  10 \n\
  11 The function signature of computeLogicalWidth is:\n\
  12 function computeLogicalWidth(writingMode, direction, tableStyle)\n";
  13
  14 /* All tables will be generated to have the following intrinsic widths. */
  15 var minIntrinsicLogicalWidth = 100;
  16 var maxIntrinsicLogicalWidth = 250;
  17
  18 /* Tests will cover all permutations of the follow properties and settings. */
  19 var tableTypes = ["html", "css"];
  20 var displays = ["block", "inline"]
  21 var writingModes = ["horizontal", "vertical"];
  22 var directions = ["ltr", "rtl"];
  23 var logicalWidthsCombinations = [
  24     /* fixed min-width, auto width */
  25     {"min-width": "500px", "width": null, "computed-width": {"css": "500px", "html": "470px"}},
  26     {"min-width": "150px", "width": null, "computed-width": {"css": "250px", "html": "250px"}},
  27     {"min-width": "50px", "width": null, "computed-width": {"css": "250px", "html": "250px"}},
  28     /* fixed min-width, fixed width */
  29     {"min-width": "500px", "width": "600px", "computed-width": {"css": "600px", "html": "570px"}},
  30     {"min-width": "500px", "width": "400px", "computed-width": {"css": "500px", "html": "470px"}},
  31     /* fixed min-width, percent width */
  32     {"min-width": "500px", "width": "60%", "computed-width": {"css": "600px", "html": "570px"}},
  33     {"min-width": "500px", "width": "40%", "computed-width": {"css": "500px", "html": "470px"}},
  34     /* percent min-width, auto width */
  35     {"min-width": "50%", "width": null, "computed-width": {"css": "500px", "html": "470px"}},
  36     {"min-width": "15%", "width": null, "computed-width": {"css": "250px", "html": "250px"}},
  37     {"min-width": "5%", "width": null, "computed-width": {"css": "250px", "html": "250px"}},
  38     /* percent min-width, fixed width */
  39     {"min-width": "50%", "width": "600px", "computed-width": {"css": "600px", "html": "570px"}},
  40     {"min-width": "50%", "width": "400px", "computed-width": {"css": "500px", "html": "470px"}},
  41      /* percent min-width, percent width */
  42     {"min-width": "50%", "width": "60%", "computed-width": {"css": "600px", "html": "570px"}},
  43     {"min-width": "50%", "width": "40%", "computed-width": {"css": "500px", "html": "470px"}},
  44      /* auto min-width (shouldn't affect anything), auto width */
  45     {"min-width": "auto", "width": null, "computed-width": {"css": "250px", "html": "250px"}},
  46 ];
  47
  48 function runTests(tableType)
  49 {
  50     debug(testNotes);
  51
  52     writingModes.forEach(function(writingMode) {
  53         debug("======== Test " + writingMode + " writing mode ========\n");
  54
  55         directions.forEach(function(direction) {
  56             debug("==== Test " + direction + " direction ====\n");
  57
  58             logicalWidthsCombinations.forEach(function(logicalWidthsCombination) {
  59                 var tableStyle = createTableStyle(writingMode, logicalWidthsCombination);
  60                 shouldEvaluateTo("computeLogicalWidth('" + writingMode + "', '" + direction + "', '" + tableStyle + "')", "'" + logicalWidthsCombination["computed-width"][tableType] + "'");
  61             });
  62
  63             debug("");
  64         });
  65     });
  66 }
  67
  68 function createTableStyle(writingMode, logicalWidthsCombination)
  69 {
  70     var widthStyle = "";
  71
  72     var logicalWidthName = (writingMode == "vertical" ? "height" : "width");
  73
  74     if (logicalWidthsCombination["width"] != null)
  75         widthStyle += logicalWidthName + ": " + logicalWidthsCombination["width"] + "; ";
  76
  77     if (logicalWidthsCombination["min-width"] != null)
  78         widthStyle += "min-" + logicalWidthName + ": " + logicalWidthsCombination["min-width"] + ";";
  79
  80     return widthStyle;
  81 }
  82
  83 function computeLogicalWidthHelper(tableType, display, writingMode, direction, tableStyle)
  84 {
  85     var isCSSTable = (tableType == "css");
  86     var tableClass = display + " " + writingMode + " " + direction;
  87
  88     var tableParent = document.createElement("div");
  89     tableParent.setAttribute("class", "table-parent");
  90     document.body.appendChild(tableParent);
  91
  92     var table = document.createElement(isCSSTable ? "div" : "table");
  93     table.setAttribute("class", tableClass);
  94     table.setAttribute("style", tableStyle);
  95     tableParent.appendChild(table);
  96
  97     var rowGroup = document.createElement(isCSSTable ? "div" : "tbody");
  98     rowGroup.setAttribute("class", "row-group");
  99     table.appendChild(rowGroup);
 100
 101     var row = document.createElement(isCSSTable ? "div" : "tr");
 102     row.setAttribute("class", "row");
 103     rowGroup.appendChild(row);
 104
 105     var cell = document.createElement(isCSSTable ? "div" : "td");
 106     cell.setAttribute("class", "cell");
 107     row.appendChild(cell);
 108
 109     // Create as many spans of width equal to minIntrinsicLogicalWidth without exceeding maxIntrinsicLogicalWidth.
 110     var remainingLogicalWidth;
 111     for (remainingLogicalWidth = maxIntrinsicLogicalWidth; remainingLogicalWidth >= minIntrinsicLogicalWidth; remainingLogicalWidth -= minIntrinsicLogicalWidth) {
 112         span = createSpan(minIntrinsicLogicalWidth);
 113         cell.appendChild(span);
 114     }
 115
 116     // Create a span of width < minIntrinsicLogicalWidth for any remaining width.
 117     if (remainingLogicalWidth > 0) {
 118         span = createSpan(remainingLogicalWidth);
 119         cell.appendChild(span);
 120     }
 121
 122     var logicalWidthPropertyName = (writingMode == "vertical" ? "height" : "width");
 123     var computedLogicalWidth = window.getComputedStyle(table, null).getPropertyValue(logicalWidthPropertyName);
 124
 125     document.body.removeChild(tableParent);
 126
 127     return computedLogicalWidth;
 128 }
 129
 130 function createSpan(logicalWidth)
 131 {
 132     var span = document.createElement("span");
 133     span.setAttribute("style", "display: inline-block; width: " + logicalWidth + "px; height: " + logicalWidth + "px; background-color: #f00;");
 134     return span;
 135 }