1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
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 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);
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;
}
|
