mirror of
https://github.com/servo/servo.git
synced 2025-06-24 09:04:33 +01:00
Add fixed table test cases
This commit is contained in:
Youngsoo Son
Junyoung Cho
parent
8dbec50178
commit
e5333fca2d
6 changed files with 231 additions and 0 deletions
36
src/test/html/fixed_table.html
Normal file
36
src/test/html/fixed_table.html
Normal 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
src/test/html/fixed_table_2.html
Normal file
36
src/test/html/fixed_table_2.html
Normal 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
src/test/html/fixed_table_additional_cols.html
Normal file
39
src/test/html/fixed_table_additional_cols.html
Normal 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
src/test/html/fixed_table_basic_height.html
Normal file
40
src/test/html/fixed_table_basic_height.html
Normal 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
src/test/html/fixed_table_simple.html
Normal file
30
src/test/html/fixed_table_simple.html
Normal 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
src/test/html/fixed_table_with_margin_padding.html
Normal file
50
src/test/html/fixed_table_with_margin_padding.html
Normal 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue