Skip to content

Commit

Permalink
Add fixed table test cases
Browse files Browse the repository at this point in the history
  • Loading branch information
@sonwow @june0cho
sonwow authored and june0cho committed Mar 24, 2014
1 parent 8dbec50 commit e5333fc
Show file tree
Hide file tree
Showing 6 changed files with 231 additions and 0 deletions.
36 changes: 36 additions & 0 deletions src/test/html/fixed_table.html
View file
@@ -0,0 +1,36 @@
<!-- This test creates one table, one caption, three rows, three header cells, and five data cells.
The table uses the fixed table layout algorithm and the table's width specified to 600px.
Each column's width will be assigned as follows:
- 1st column: 200px (because it is defined in col element)
- 2nd column: 100px (because it is defined in first row)
- 3rd column: remaining width (becuase it is not defined so the remaining width is assigned)
And table, caption, td, th elements have border. -->
<!DOCTYPE html>
<html>
<head>
<title>Fixed Table</title>
<style>
table {
table-layout: fixed;
width: 600px;
border: solid black 2px;
}
caption { border: solid blue 1px; }
td { border: solid red 1px; }
th { border: solid red 1px; }
</style>
</head>
<body>
<table>
<caption>This is a 3x3 fixed table</caption>
<colgroup>
<col style="width: 200px" />
</colgroup>
<tbody>
<tr><th style="width: 100px">Header 1</th><td style="width: 100px">Cell 1</td><td>Cell 2</td></tr>
<tr><th style="width: 300px">Header 2</th><td style="width: 300px">Cell 3</th><td>Cell 4</td></tr>
<tr><th>Header 3</th><td>Cell 5</th></tr>
</tbody>
</table>
</body>
<html>
36 changes: 36 additions & 0 deletions src/test/html/fixed_table_2.html
View file
@@ -0,0 +1,36 @@
<!-- This test creates one table, one caption, three rows, three header cells, and five data cells.
The table uses the fixed table layout algorithm and the table's width specified to 600px.
Each column's width will be assigned according to their ratio of column's widths
which are defined in col elements.
And table, caption, td, th elements have border. -->
<!DOCTYPE html>
<html>
<head>
<title>Fixed Table</title>
<style>
table {
table-layout: fixed;
width: 600px;
border: solid black 2px;
}
caption { border: solid blue 1px; }
td { border: solid red 1px; }
th { border: solid red 1px; }
</style>
</head>
<body>
<table>
<caption>This is a 3x3 fixed table</caption>
<colgroup>
<col style="width: 10px" />
<col style="width: 20px" />
<col style="width: 30px" />
</colgroup>
<tbody>
<tr><th style="width: 100px">Header 1</th><td style="width: 100px">Cell 1</td><td>Cell 2</td></tr>
<tr><th style="width: 300px">Header 2</th><td style="width: 300px">Cell 3</th><td>Cell 4</td></tr>
<tr><th>Header 3</th><td>Cell 5</th></tr>
</tbody>
</table>
</body>
<html>
39 changes: 39 additions & 0 deletions src/test/html/fixed_table_additional_cols.html
View file
@@ -0,0 +1,39 @@
<!-- This test creates one table, one caption, three rows, three header cells, and five data cells.
The table uses the fixed table layout algorithm and the table's width specified to 600px.
Each column's width will be assigned as follows:
- 1st & 2nd column: 200px (because it is defined in col element)
- 3rd & 4th column: remaining width / 2
(becuase it is not defined so the remaining width is equally divided)
And table, caption, td, th elements have border. -->
<!DOCTYPE html>
<html>
<head>
<title>Fixed Table</title>
<style>
table {
table-layout: fixed;
width: 600px;
border: solid black 2px;
}
caption { border: solid blue 1px; }
td { border: solid red 1px; }
th { border: solid red 1px; }
</style>
</head>
<body>
<table>
<caption>This is a 3x4 fixed table</caption>
<colgroup>
<col style="width: 200px" />
<col style="width: 200px" />
<col />
<col />
</colgroup>
<tbody>
<tr><th>Header 1</th><td>Cell 1</td><td>Cell 2</td></tr>
<tr><th>Header 2</th><td>Cell 3</th><td>Cell 4</td></tr>
<tr><th>Header 3</th><td>Cell 5</th></tr>
</tbody>
</table>
</body>
<html>
40 changes: 40 additions & 0 deletions src/test/html/fixed_table_basic_height.html
View file
@@ -0,0 +1,40 @@
<!-- This test creates one table, three rows, three header cells, and six data cells.
The table uses the fixed table layout algorithm and the table's width specified to 600px.
Each column's width will be assigned as 200px.
Each table row height is decided as max(specified row height, specified cells' heights, cells' minimum content heights).
As a result, each table row height will be assigned as followings:
- 1st row: 30px (specified cell height)
- 2nd row: 50px (specified row height)
- 3rd row: minimum content height
-->
<!DOCTYPE html>
<html>
<head>
<title>Table Height Test</title>
<style>
table {
table-layout: fixed;
width: 600px;
border: solid black 2px;
}
caption {
border: solid blue 1px;
}
td, th {
border: solid red 1px;
padding: 0px;
}
</style>
</head>
<body>
<table>
<caption>This test checks table height algorithm (CSS 2.1, Section 17.5.3),
excluding `vertical-align` and percentage height</caption>
<tbody>
<tr style="height:10px"><th>Header 1</th><td style="height: 30px">Cell 1</td><td>Cell 2</td></tr>
<tr style="height:50px"><th>Header 2</th><td>Cell 3</td><td style="height:10px">Cell 4</td></tr>
<tr style="height:20px"><th>Header 3</th><td style="height:10px">Cell 5</td><td><div>Cell6</div><p>Cell6</td></tr>
</tbody>
</table>
</body>
<html>
30 changes: 30 additions & 0 deletions src/test/html/fixed_table_simple.html
View file
@@ -0,0 +1,30 @@
<!-- This test creates one table, one caption, three rows, three header cells, and six data cells.
The table uses fixed table layout algorithm and the table's width specified to 600px.
Each column should have same width because the column's widths are not defined here.
And table, caption, td, th elements have border. -->
<!DOCTYPE html>
<html>
<head>
<title>Simple Fixed Table</title>
<style>
table {
table-layout: fixed;
width: 600px;
border: solid black 2px;
}
caption { border: solid blue 1px; }
td { border: solid red 1px; }
th { border: solid red 1px; }
</style>
</head>
<body>
<table>
<caption>This is a 3x3 fixed table</caption>
<tbody>
<tr><th>Header 1</th><td>Cell 1</td><td>Cell 2</td></tr>
<tr><th>Header 2</th><td>Cell 3</td><td>Cell 4</td></tr>
<tr><th>Header 3</th><td>Cell 5</td><td>Cell 6</td></tr>
</tbody>
</table>
</body>
<html>
50 changes: 50 additions & 0 deletions src/test/html/fixed_table_with_margin_padding.html
View file
@@ -0,0 +1,50 @@
<!-- This test creates one table, one caption, three rows, three header cells, and five data cells.
The table uses the fixed table layout algorithm and the table's width specified to 600px.
Each column's width will be assigned as follows:
- 1st column: 200px (because it is defined in col element)
- 2nd column: 100px (because it is defined in first row)
- 3rd column: remaining width (becuase it is not defined so the remaining width is assigned)
The table and caption elements have border, margin, and padding.
The td and th elements have border and padding. -->
<!DOCTYPE html>
<html>
<head>
<title>Fixed Table with margin, border, and padding</title>
<style>
table {
table-layout: fixed;
width: 600px;
border: solid black 2px;
margin: 10px;
padding: 10px;
}
caption {
border: solid blue 1px;
margin: 5px;
padding: 5px;
}
td {
border: solid red 1px;
padding: 5px;
}
th {
border: solid red 1px;
padding: 5px;
}
</style>
</head>
<body>
<table>
<caption>This is a 3x3 fixed table with margin, border, and padding</caption>
<colgroup>
<col style="width: 200px" />
<col />
</colgroup>
<tbody>
<tr><th style="width: 100px">Header 1</th><td style="width: 100px">Cell 1</td><td>Cell 2</td></tr>
<tr><th>Header 2</th><td>Cell 3</td><td>Cell 4</td></tr>
<tr><th>Header 3</th><td>Cell 5</td></tr>
</tbody>
</table>
</body>
<html>

0 comments on commit e5333fc

Please sign in to comment.