Skip to content

Commit e5333fc

Browse files
sonwowjune0cho
sonwow
authored and
june0cho
committed
Add fixed table test cases
1 parent 8dbec50 commit e5333fc

File tree

6 files changed

+231
-0
lines changed

6 files changed

+231
-0
lines changed

‎src/test/html/fixed_table.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!-- This test creates one table, one caption, three rows, three header cells, and five data cells.
2+
The table uses the fixed table layout algorithm and the table's width specified to 600px.
3+
Each column's width will be assigned as follows:
4+
- 1st column: 200px (because it is defined in col element)
5+
- 2nd column: 100px (because it is defined in first row)
6+
- 3rd column: remaining width (becuase it is not defined so the remaining width is assigned)
7+
And table, caption, td, th elements have border. -->
8+
<!DOCTYPE html>
9+
<html>
10+
<head>
11+
<title>Fixed Table</title>
12+
<style>
13+
table {
14+
table-layout: fixed;
15+
width: 600px;
16+
border: solid black 2px;
17+
}
18+
caption { border: solid blue 1px; }
19+
td { border: solid red 1px; }
20+
th { border: solid red 1px; }
21+
</style>
22+
</head>
23+
<body>
24+
<table>
25+
<caption>This is a 3x3 fixed table</caption>
26+
<colgroup>
27+
<col style="width: 200px" />
28+
</colgroup>
29+
<tbody>
30+
<tr><th style="width: 100px">Header 1</th><td style="width: 100px">Cell 1</td><td>Cell 2</td></tr>
31+
<tr><th style="width: 300px">Header 2</th><td style="width: 300px">Cell 3</th><td>Cell 4</td></tr>
32+
<tr><th>Header 3</th><td>Cell 5</th></tr>
33+
</tbody>
34+
</table>
35+
</body>
36+
<html>

‎src/test/html/fixed_table_2.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!-- This test creates one table, one caption, three rows, three header cells, and five data cells.
2+
The table uses the fixed table layout algorithm and the table's width specified to 600px.
3+
Each column's width will be assigned according to their ratio of column's widths
4+
which are defined in col elements.
5+
And table, caption, td, th elements have border. -->
6+
<!DOCTYPE html>
7+
<html>
8+
<head>
9+
<title>Fixed Table</title>
10+
<style>
11+
table {
12+
table-layout: fixed;
13+
width: 600px;
14+
border: solid black 2px;
15+
}
16+
caption { border: solid blue 1px; }
17+
td { border: solid red 1px; }
18+
th { border: solid red 1px; }
19+
</style>
20+
</head>
21+
<body>
22+
<table>
23+
<caption>This is a 3x3 fixed table</caption>
24+
<colgroup>
25+
<col style="width: 10px" />
26+
<col style="width: 20px" />
27+
<col style="width: 30px" />
28+
</colgroup>
29+
<tbody>
30+
<tr><th style="width: 100px">Header 1</th><td style="width: 100px">Cell 1</td><td>Cell 2</td></tr>
31+
<tr><th style="width: 300px">Header 2</th><td style="width: 300px">Cell 3</th><td>Cell 4</td></tr>
32+
<tr><th>Header 3</th><td>Cell 5</th></tr>
33+
</tbody>
34+
</table>
35+
</body>
36+
<html>

‎src/test/html/fixed_table_additional_cols.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!-- This test creates one table, one caption, three rows, three header cells, and five data cells.
2+
The table uses the fixed table layout algorithm and the table's width specified to 600px.
3+
Each column's width will be assigned as follows:
4+
- 1st & 2nd column: 200px (because it is defined in col element)
5+
- 3rd & 4th column: remaining width / 2
6+
(becuase it is not defined so the remaining width is equally divided)
7+
And table, caption, td, th elements have border. -->
8+
<!DOCTYPE html>
9+
<html>
10+
<head>
11+
<title>Fixed Table</title>
12+
<style>
13+
table {
14+
table-layout: fixed;
15+
width: 600px;
16+
border: solid black 2px;
17+
}
18+
caption { border: solid blue 1px; }
19+
td { border: solid red 1px; }
20+
th { border: solid red 1px; }
21+
</style>
22+
</head>
23+
<body>
24+
<table>
25+
<caption>This is a 3x4 fixed table</caption>
26+
<colgroup>
27+
<col style="width: 200px" />
28+
<col style="width: 200px" />
29+
<col />
30+
<col />
31+
</colgroup>
32+
<tbody>
33+
<tr><th>Header 1</th><td>Cell 1</td><td>Cell 2</td></tr>
34+
<tr><th>Header 2</th><td>Cell 3</th><td>Cell 4</td></tr>
35+
<tr><th>Header 3</th><td>Cell 5</th></tr>
36+
</tbody>
37+
</table>
38+
</body>
39+
<html>

‎src/test/html/fixed_table_basic_height.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!-- This test creates one table, three rows, three header cells, and six data cells.
2+
The table uses the fixed table layout algorithm and the table's width specified to 600px.
3+
Each column's width will be assigned as 200px.
4+
Each table row height is decided as max(specified row height, specified cells' heights, cells' minimum content heights).
5+
As a result, each table row height will be assigned as followings:
6+
- 1st row: 30px (specified cell height)
7+
- 2nd row: 50px (specified row height)
8+
- 3rd row: minimum content height
9+
-->
10+
<!DOCTYPE html>
11+
<html>
12+
<head>
13+
<title>Table Height Test</title>
14+
<style>
15+
table {
16+
table-layout: fixed;
17+
width: 600px;
18+
border: solid black 2px;
19+
}
20+
caption {
21+
border: solid blue 1px;
22+
}
23+
td, th {
24+
border: solid red 1px;
25+
padding: 0px;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<table>
31+
<caption>This test checks table height algorithm (CSS 2.1, Section 17.5.3),
32+
excluding `vertical-align` and percentage height</caption>
33+
<tbody>
34+
<tr style="height:10px"><th>Header 1</th><td style="height: 30px">Cell 1</td><td>Cell 2</td></tr>
35+
<tr style="height:50px"><th>Header 2</th><td>Cell 3</td><td style="height:10px">Cell 4</td></tr>
36+
<tr style="height:20px"><th>Header 3</th><td style="height:10px">Cell 5</td><td><div>Cell6</div><p>Cell6</td></tr>
37+
</tbody>
38+
</table>
39+
</body>
40+
<html>

‎src/test/html/fixed_table_simple.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!-- This test creates one table, one caption, three rows, three header cells, and six data cells.
2+
The table uses fixed table layout algorithm and the table's width specified to 600px.
3+
Each column should have same width because the column's widths are not defined here.
4+
And table, caption, td, th elements have border. -->
5+
<!DOCTYPE html>
6+
<html>
7+
<head>
8+
<title>Simple Fixed Table</title>
9+
<style>
10+
table {
11+
table-layout: fixed;
12+
width: 600px;
13+
border: solid black 2px;
14+
}
15+
caption { border: solid blue 1px; }
16+
td { border: solid red 1px; }
17+
th { border: solid red 1px; }
18+
</style>
19+
</head>
20+
<body>
21+
<table>
22+
<caption>This is a 3x3 fixed table</caption>
23+
<tbody>
24+
<tr><th>Header 1</th><td>Cell 1</td><td>Cell 2</td></tr>
25+
<tr><th>Header 2</th><td>Cell 3</td><td>Cell 4</td></tr>
26+
<tr><th>Header 3</th><td>Cell 5</td><td>Cell 6</td></tr>
27+
</tbody>
28+
</table>
29+
</body>
30+
<html>

‎src/test/html/fixed_table_with_margin_padding.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!-- This test creates one table, one caption, three rows, three header cells, and five data cells.
2+
The table uses the fixed table layout algorithm and the table's width specified to 600px.
3+
Each column's width will be assigned as follows:
4+
- 1st column: 200px (because it is defined in col element)
5+
- 2nd column: 100px (because it is defined in first row)
6+
- 3rd column: remaining width (becuase it is not defined so the remaining width is assigned)
7+
The table and caption elements have border, margin, and padding.
8+
The td and th elements have border and padding. -->
9+
<!DOCTYPE html>
10+
<html>
11+
<head>
12+
<title>Fixed Table with margin, border, and padding</title>
13+
<style>
14+
table {
15+
table-layout: fixed;
16+
width: 600px;
17+
border: solid black 2px;
18+
margin: 10px;
19+
padding: 10px;
20+
}
21+
caption {
22+
border: solid blue 1px;
23+
margin: 5px;
24+
padding: 5px;
25+
}
26+
td {
27+
border: solid red 1px;
28+
padding: 5px;
29+
}
30+
th {
31+
border: solid red 1px;
32+
padding: 5px;
33+
}
34+
</style>
35+
</head>
36+
<body>
37+
<table>
38+
<caption>This is a 3x3 fixed table with margin, border, and padding</caption>
39+
<colgroup>
40+
<col style="width: 200px" />
41+
<col />
42+
</colgroup>
43+
<tbody>
44+
<tr><th style="width: 100px">Header 1</th><td style="width: 100px">Cell 1</td><td>Cell 2</td></tr>
45+
<tr><th>Header 2</th><td>Cell 3</td><td>Cell 4</td></tr>
46+
<tr><th>Header 3</th><td>Cell 5</td></tr>
47+
</tbody>
48+
</table>
49+
</body>
50+
<html>

0 commit comments

Comments
 (0)