1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 06:07:44 +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,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>