1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 06:27:45 +00:00

LibWeb: Add table formatting tests

Creates some TableFormattingContext tests based on the tests in
/html/misc.
This commit is contained in:
martinfalisse 2023-04-02 19:53:06 +02:00 committed by Andreas Kling
parent c421f1692c
commit 1440845aad
4 changed files with 453 additions and 0 deletions

View file

@ -0,0 +1,69 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x74.40625 children: not-inline
BlockContainer <body> at (8,8) content-size 784x58.40625 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 784x0 children: not-inline
TableBox <table#empty-table> at (8,8) content-size 784x0 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
TextNode <#text>
TableWrapper <(anonymous)> at (8,8) content-size 95.171875x58.40625 children: not-inline
TableBox <table#full-table> at (8,8) content-size 95.171875x58.40625 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <caption> at (8,8) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
TableRowGroupBox <thead> at (8,8) content-size 95.171875x19.46875 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
TableRowBox <tr> at (8,8) content-size 95.171875x19.46875 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <td> at (9,9) content-size 93.171875x17.46875 children: inline
line 0 width: 73.65625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 9, rect: [9,9 73.65625x17.46875]
"Head Cell"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
TableRowGroupBox <tbody> at (8,27.46875) content-size 95.171875x19.46875 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
TableRowBox <tr> at (8,27.46875) content-size 95.171875x19.46875 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <td> at (9,28.46875) content-size 93.171875x17.46875 children: inline
line 0 width: 70.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 9, rect: [9,28.46875 70.234375x17.46875]
"Body Cell"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
TableRowGroupBox <tfoot> at (8,46.9375) content-size 95.171875x19.46875 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
TableRowBox <tr> at (8,46.9375) content-size 95.171875x19.46875 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <td> at (9,47.9375) content-size 93.171875x17.46875 children: inline
line 0 width: 93.171875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 11, rect: [9,47.9375 93.171875x17.46875]
"Footer Cell"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,66.40625) content-size 784x0 children: inline
TextNode <#text>

View file

@ -0,0 +1,260 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x293.625 children: not-inline
BlockContainer <body> at (8,8) content-size 784x277.625 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 166.296875x66.40625 children: not-inline
TableBox <table.table-border-black> at (9,9) content-size 166.296875x64.40625 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
TableRowGroupBox <tbody> at (9,9) content-size 166.296875x64.40625 children: not-inline
TableRowBox <tr> at (9,9) content-size 166.296875x21.46875 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <td> at (11,11) content-size 82.015625x17.46875 children: inline
line 0 width: 82.015625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 9, rect: [11,11 82.015625x17.46875]
"Firstname"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <td> at (97.015625,11) content-size 76.28125x17.46875 children: inline
line 0 width: 76.28125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 8, rect: [97.015625,11 76.28125x17.46875]
"Lastname"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
TableRowBox <tr> at (9,30.46875) content-size 166.296875x21.46875 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <td> at (11,32.46875) content-size 82.015625x17.46875 children: inline
line 0 width: 44.65625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [11,32.46875 44.65625x17.46875]
"Peter"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <td> at (97.015625,32.46875) content-size 76.28125x17.46875 children: inline
line 0 width: 53.671875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 7, rect: [97.015625,32.46875 53.671875x17.46875]
"Griffin"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
TableRowBox <tr> at (9,51.9375) content-size 166.296875x21.46875 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <td> at (11,53.9375) content-size 82.015625x17.46875 children: inline
line 0 width: 35.125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 4, rect: [11,53.9375 35.125x17.46875]
"Lois"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <td> at (97.015625,53.9375) content-size 76.28125x17.46875 children: inline
line 0 width: 53.671875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 7, rect: [97.015625,53.9375 53.671875x17.46875]
"Griffin"
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,74.40625) content-size 784x0 children: inline
TextNode <#text>
TextNode <#text>
TableWrapper <(anonymous)> at (8,74.40625) content-size 164.296875x62.40625 children: not-inline
TableBox <table.table-border-black> at (8,74.40625) content-size 164.296875x62.40625 children: not-inline
BlockContainer <(anonymous)> at (8,74.40625) content-size 0x0 children: inline
TextNode <#text>
TableRowGroupBox <tbody> at (8,74.40625) content-size 164.296875x62.40625 children: not-inline
TableRowBox <tr> at (8,74.40625) content-size 164.296875x20.46875 children: not-inline
BlockContainer <(anonymous)> at (8,74.40625) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <td> at (9,75.40625) content-size 82.015625x17.46875 children: inline
line 0 width: 82.015625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 9, rect: [9,75.40625 82.015625x17.46875]
"Firstname"
TextNode <#text>
BlockContainer <(anonymous)> at (8,74.40625) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <td> at (95.015625,75.40625) content-size 76.28125x17.46875 children: inline
line 0 width: 76.28125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 8, rect: [95.015625,75.40625 76.28125x17.46875]
"Lastname"
TextNode <#text>
BlockContainer <(anonymous)> at (8,74.40625) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,74.40625) content-size 0x0 children: inline
TextNode <#text>
TableRowBox <tr> at (8,94.875) content-size 164.296875x21.46875 children: not-inline
BlockContainer <(anonymous)> at (8,74.40625) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <td> at (9,96.875) content-size 82.015625x17.46875 children: inline
line 0 width: 44.65625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [9,96.875 44.65625x17.46875]
"Peter"
TextNode <#text>
BlockContainer <(anonymous)> at (8,74.40625) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <td> at (95.015625,96.875) content-size 76.28125x17.46875 children: inline
line 0 width: 53.671875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 7, rect: [95.015625,96.875 53.671875x17.46875]
"Griffin"
TextNode <#text>
BlockContainer <(anonymous)> at (8,74.40625) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,74.40625) content-size 0x0 children: inline
TextNode <#text>
TableRowBox <tr> at (8,116.34375) content-size 164.296875x20.46875 children: not-inline
BlockContainer <(anonymous)> at (8,74.40625) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <td> at (9,118.34375) content-size 82.015625x17.46875 children: inline
line 0 width: 35.125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 4, rect: [9,118.34375 35.125x17.46875]
"Lois"
TextNode <#text>
BlockContainer <(anonymous)> at (8,74.40625) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <td> at (95.015625,118.34375) content-size 76.28125x17.46875 children: inline
line 0 width: 53.671875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 7, rect: [95.015625,118.34375 53.671875x17.46875]
"Griffin"
TextNode <#text>
BlockContainer <(anonymous)> at (8,74.40625) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,74.40625) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,136.8125) content-size 784x0 children: inline
TextNode <#text>
TextNode <#text>
TableWrapper <(anonymous)> at (8,136.8125) content-size 160.296875x56.40625 children: not-inline
TableBox <div.table.border-black> at (8,136.8125) content-size 160.296875x56.40625 children: not-inline
BlockContainer <(anonymous)> at (8,136.8125) content-size 0x0 children: inline
TextNode <#text>
TableRowBox <div.table-row.border-black> at (8,136.8125) content-size 160.296875x18.46875 children: not-inline
BlockContainer <(anonymous)> at (8,136.8125) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <div.table-cell.border-black> at (8,136.8125) content-size 82.015625x17.46875 children: inline
line 0 width: 82.015625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 9, rect: [8,136.8125 82.015625x17.46875]
"Firstname"
TextNode <#text>
BlockContainer <(anonymous)> at (8,136.8125) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <div.table-cell.border-black> at (92.015625,136.8125) content-size 76.28125x17.46875 children: inline
line 0 width: 76.28125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 8, rect: [92.015625,136.8125 76.28125x17.46875]
"Lastname"
TextNode <#text>
BlockContainer <(anonymous)> at (8,136.8125) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,136.8125) content-size 0x0 children: inline
TextNode <#text>
TableRowBox <div.table-row.border-black> at (8,155.28125) content-size 160.296875x19.46875 children: not-inline
BlockContainer <(anonymous)> at (8,136.8125) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <div.table-cell.border-black> at (8,156.28125) content-size 82.015625x17.46875 children: inline
line 0 width: 44.65625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [8,156.28125 44.65625x17.46875]
"Peter"
TextNode <#text>
BlockContainer <(anonymous)> at (8,136.8125) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <div.table-cell.border-black> at (92.015625,156.28125) content-size 76.28125x17.46875 children: inline
line 0 width: 53.671875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 7, rect: [92.015625,156.28125 53.671875x17.46875]
"Griffin"
TextNode <#text>
BlockContainer <(anonymous)> at (8,136.8125) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,136.8125) content-size 0x0 children: inline
TextNode <#text>
TableRowBox <div.table-row.border-black> at (8,174.75) content-size 160.296875x18.46875 children: not-inline
BlockContainer <(anonymous)> at (8,136.8125) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <div.table-cell.border-black> at (8,175.75) content-size 82.015625x17.46875 children: inline
line 0 width: 35.125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 4, rect: [8,175.75 35.125x17.46875]
"Lois"
TextNode <#text>
BlockContainer <(anonymous)> at (8,136.8125) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <div.table-cell.border-black> at (92.015625,175.75) content-size 76.28125x17.46875 children: inline
line 0 width: 53.671875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 7, rect: [92.015625,175.75 53.671875x17.46875]
"Griffin"
TextNode <#text>
BlockContainer <(anonymous)> at (8,136.8125) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,136.8125) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,193.21875) content-size 784x0 children: inline
TextNode <#text>
TextNode <#text>
TableWrapper <(anonymous)> at (8,193.21875) content-size 178.296875x92.40625 children: not-inline
TableBox <div.table.thick-border-black> at (8,193.21875) content-size 178.296875x92.40625 children: not-inline
BlockContainer <(anonymous)> at (8,193.21875) content-size 0x0 children: inline
TextNode <#text>
TableRowBox <div.table-row.thick-border-black> at (8,193.21875) content-size 178.296875x27.46875 children: not-inline
BlockContainer <(anonymous)> at (8,193.21875) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <div.table-cell.thick-border-black> at (8,193.21875) content-size 82.015625x17.46875 children: inline
line 0 width: 82.015625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 9, rect: [8,193.21875 82.015625x17.46875]
"Firstname"
TextNode <#text>
BlockContainer <(anonymous)> at (8,193.21875) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <div.table-cell.thick-border-black> at (110.015625,193.21875) content-size 76.28125x17.46875 children: inline
line 0 width: 76.28125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 8, rect: [110.015625,193.21875 76.28125x17.46875]
"Lastname"
TextNode <#text>
BlockContainer <(anonymous)> at (8,193.21875) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,193.21875) content-size 0x0 children: inline
TextNode <#text>
TableRowBox <div.table-row.thick-border-black> at (8,220.6875) content-size 178.296875x37.46875 children: not-inline
BlockContainer <(anonymous)> at (8,193.21875) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <div.table-cell.thick-border-black> at (8,230.6875) content-size 82.015625x17.46875 children: inline
line 0 width: 44.65625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [8,230.6875 44.65625x17.46875]
"Peter"
TextNode <#text>
BlockContainer <(anonymous)> at (8,193.21875) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <div.table-cell.thick-border-black> at (110.015625,230.6875) content-size 76.28125x17.46875 children: inline
line 0 width: 53.671875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 7, rect: [110.015625,230.6875 53.671875x17.46875]
"Griffin"
TextNode <#text>
BlockContainer <(anonymous)> at (8,193.21875) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,193.21875) content-size 0x0 children: inline
TextNode <#text>
TableRowBox <div.table-row.thick-border-black> at (8,258.15625) content-size 178.296875x27.46875 children: not-inline
BlockContainer <(anonymous)> at (8,193.21875) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <div.table-cell.thick-border-black> at (8,268.15625) content-size 82.015625x17.46875 children: inline
line 0 width: 35.125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 4, rect: [8,268.15625 35.125x17.46875]
"Lois"
TextNode <#text>
BlockContainer <(anonymous)> at (8,193.21875) content-size 0x0 children: inline
TextNode <#text>
TableCellBox <div.table-cell.thick-border-black> at (110.015625,268.15625) content-size 76.28125x17.46875 children: inline
line 0 width: 53.671875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 7, rect: [110.015625,268.15625 53.671875x17.46875]
"Griffin"
TextNode <#text>
BlockContainer <(anonymous)> at (8,193.21875) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,193.21875) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,285.625) content-size 784x0 children: inline
TextNode <#text>

View file

@ -0,0 +1,30 @@
<style>
* {
font-family: 'SerenitySans';
}
</style>
<!-- Copied from html tests Userland/Libraries/LibWeb/Tests/Pages/Table.html -->
<table id="empty-table"></table>
<!-- Copied from html tests Userland/Libraries/LibWeb/Tests/Pages/Table.html -->
<table id="full-table">
<caption>
A Caption
</caption>
<thead>
<tr>
<td>Head Cell</td>
</tr>
</thead>
<tbody>
<tr>
<td>Body Cell</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer Cell</td>
</tr>
</tfoot>
</table>

View file

@ -0,0 +1,94 @@
<style>
* {
font-family: 'SerenitySans';
}
.border-black {
border: 1px solid black;
}
.thick-border-black {
border: 10px solid black;
}
.table-border-black,
table.table-border-black tr,
table.table-border-black td {
border: 1px solid black;
}
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
</style>
<table class="table-border-black">
<tr>
<td>Firstname</td>
<td>Lastname</td>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<!-- Border-collapse and hidden -->
<table class="table-border-black" style="border-collapse: collapse; border-style: hidden;">
<tr>
<td>Firstname</td>
<td>Lastname</td>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<!-- Border-collapse and hidden with divs -->
<div class="table border-black" style="border-collapse: collapse; border-style: hidden;">
<div class="table-row border-black">
<div class="table-cell border-black">Firstname</div>
<div class="table-cell border-black">Lastname</div>
</div>
<div class="table-row border-black">
<div class="table-cell border-black">Peter</div>
<div class="table-cell border-black">Griffin</div>
</div>
<div class="table-row border-black">
<div class="table-cell border-black">Lois</div>
<div class="table-cell border-black">Griffin</div>
</div>
</div>
<!-- Border-collapse and hidden with divs -->
<div class="table thick-border-black" style="border-collapse: collapse; border-style: hidden;">
<div class="table-row thick-border-black">
<div class="table-cell thick-border-black">Firstname</div>
<div class="table-cell thick-border-black">Lastname</div>
</div>
<div class="table-row thick-border-black">
<div class="table-cell thick-border-black">Peter</div>
<div class="table-cell thick-border-black">Griffin</div>
</div>
<div class="table-row thick-border-black">
<div class="table-cell thick-border-black">Lois</div>
<div class="table-cell thick-border-black">Griffin</div>
</div>
</div>