1 var testNotes = "======== General notes ========\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\
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\
11 The function signature of computeLogicalWidth is:\n\
12 function computeLogicalWidth(writingMode, direction, tableStyle)\n";
14 /* All tables will be generated to have the following intrinsic widths. */
15 var minIntrinsicLogicalWidth = 100;
16 var maxIntrinsicLogicalWidth = 250;
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"}},
48 function runTests(tableType)
52 writingModes.forEach(function(writingMode) {
53 debug("======== Test " + writingMode + " writing mode ========\n");
55 directions.forEach(function(direction) {
56 debug("==== Test " + direction + " direction ====\n");
58 logicalWidthsCombinations.forEach(function(logicalWidthsCombination) {
59 var tableStyle = createTableStyle(writingMode, logicalWidthsCombination);
60 shouldEvaluateTo("computeLogicalWidth('" + writingMode + "', '" + direction + "', '" + tableStyle + "')", "'" + logicalWidthsCombination["computed-width"][tableType] + "'");
68 function createTableStyle(writingMode, logicalWidthsCombination)
72 var logicalWidthName = (writingMode == "vertical" ? "height" : "width");
74 if (logicalWidthsCombination["width"] != null)
75 widthStyle += logicalWidthName + ": " + logicalWidthsCombination["width"] + "; ";
77 if (logicalWidthsCombination["min-width"] != null)
78 widthStyle += "min-" + logicalWidthName + ": " + logicalWidthsCombination["min-width"] + ";";
83 function computeLogicalWidthHelper(tableType, display, writingMode, direction, tableStyle)
85 var isCSSTable = (tableType == "css");
86 var tableClass = display + " " + writingMode + " " + direction;
88 var tableParent = document.createElement("div");
89 tableParent.setAttribute("class", "table-parent");
90 document.body.appendChild(tableParent);
92 var table = document.createElement(isCSSTable ? "div" : "table");
93 table.setAttribute("class", tableClass);
94 table.setAttribute("style", tableStyle);
95 tableParent.appendChild(table);
97 var rowGroup = document.createElement(isCSSTable ? "div" : "tbody");
98 rowGroup.setAttribute("class", "row-group");
99 table.appendChild(rowGroup);
101 var row = document.createElement(isCSSTable ? "div" : "tr");
102 row.setAttribute("class", "row");
103 rowGroup.appendChild(row);
105 var cell = document.createElement(isCSSTable ? "div" : "td");
106 cell.setAttribute("class", "cell");
107 row.appendChild(cell);
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);
116 // Create a span of width < minIntrinsicLogicalWidth for any remaining width.
117 if (remainingLogicalWidth > 0) {
118 span = createSpan(remainingLogicalWidth);
119 cell.appendChild(span);
122 var logicalWidthPropertyName = (writingMode == "vertical" ? "height" : "width");
123 var computedLogicalWidth = window.getComputedStyle(table, null).getPropertyValue(logicalWidthPropertyName);
125 document.body.removeChild(tableParent);
127 return computedLogicalWidth;
130 function createSpan(logicalWidth)
132 var span = document.createElement("span");
133 span.setAttribute("style", "display: inline-block; width: " + logicalWidth + "px; height: " + logicalWidth + "px; background-color: #f00;");