From ba5e0607fd54ee77375b627cd63b50983fcaff47 Mon Sep 17 00:00:00 2001
From: martinfalisse <martinmotteditfalisse@gmail.com>
Date: Mon, 2 Jan 2023 23:04:18 +0100
Subject: [PATCH] Base: Add test page for table

---
 Base/res/html/misc/display-table.html | 124 ++++++++++++++++++++++++++
 1 file changed, 124 insertions(+)
 create mode 100644 Base/res/html/misc/display-table.html

diff --git a/Base/res/html/misc/display-table.html b/Base/res/html/misc/display-table.html
new file mode 100644
index 0000000000..f37a2551e2
--- /dev/null
+++ b/Base/res/html/misc/display-table.html
@@ -0,0 +1,124 @@
+<style>
+  p {
+    margin-bottom: .5rem;
+    color: #808080;
+  }
+
+  .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>
+
+<!-- Copied from html tests Userland/Libraries/LibWeb/Tests/Pages/Table.html -->
+<p>Empty table</p>
+<table id="empty-table"></table>
+
+<!-- Copied from html tests Userland/Libraries/LibWeb/Tests/Pages/Table.html -->
+<p>Full table</p>
+<table id="full-table">
+  <caption>
+    A Caption
+  </caption>
+  <thead>
+    <tr>
+      <th>Head Cell</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Body Cell</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <td>Footer Cell</td>
+    </tr>
+  </tfoot>
+</table>
+
+<p>Table with 2 columns and border</p>
+<table class="table-border-black">
+  <tr>
+    <th>Firstname</th>
+    <th>Lastname</th>
+  </tr>
+  <tr>
+    <td>Peter</td>
+    <td>Griffin</td>
+  </tr>
+  <tr>
+    <td>Lois</td>
+    <td>Griffin</td>
+  </tr>
+</table>
+
+<!-- Border-collapse and hidden -->
+<p>No borders</p>
+<table class="table-border-black" style="border-collapse: collapse; border-style: hidden;">
+  <tr>
+    <th>Firstname</th>
+    <th>Lastname</th>
+  </tr>
+  <tr>
+    <td>Peter</td>
+    <td>Griffin</td>
+  </tr>
+  <tr>
+    <td>Lois</td>
+    <td>Griffin</td>
+  </tr>
+</table>
+
+<!-- Border-collapse and hidden with divs -->
+<p>No borders v2</p>
+<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 -->
+<p>Columns should be tightly packed with no overflows nor extra space</p>
+<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>