Commit 0af9a4d2 authored by Guillaume's avatar Guillaume

Add specs

parent d34f4713
Pipeline #715 passed with stage
in 4 minutes and 32 seconds
<html lang="en">
<head>
<title>multi-rowspan-table</title>
<meta charset="utf-8">
<script src="../../../../dist/paged.polyfill.js"></script>
<style type="text/css">
@page {
size: A5 landscape;
margin-top: 15mm;
margin-left: 15mm;
margin-bottom: 15mm;
margin-right: 15mm;
background-color: white;
}
table tr {
page-break-inside: avoid;
}
table td {
border-width: 1px;
border-color: black;
border-style: solid;
}
</style>
</head>
<body style="background-color: grey;">
<table>
<thead>
<tr>
<td>Left</td>
<td>
Name
</td>
<td>
Description
</td>
<td>
Category
</td>
<td>
Causes
</td>
<td>
Rating
</td>
<td>Right</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="14" style="background-color: darkslategrey;">Left</td>
<td rowspan="2" style="background-color: lightblue;">
Test 1
</td>
<td rowspan="2" style="background-color: lightgreen;">
Description for Test 1 that stretches over two rows.
</td>
<td style="background-color: lightpink;">
First Row for Test 1
</td>
<td rowspan="2" style="background-color: cornflowerblue;">
Rowspans that go over two rows can cause a break in page break.
</td>
<td style="background-color: turquoise;">
First rating for Test 1
</td>
<td rowspan="14" style="background-color: darkslateblue;">Right</td>
</tr>
<tr>
<td style="background-color: lightpink;">
Second Row for Test 1
</td>
<td style="background-color: turquoise;">
Second rating for Test 1
</td>
</tr>
<tr>
<td rowspan="6" style="background-color: lightblue;">
Test 2
</td>
<td rowspan="6" style="background-color: lightgreen;">
Description for Test 2 that stretches over 6 rows.
</td>
<td rowspan="4" style="background-color: lightpink;">
Four Row Rowspan for Test 2
</td>
<td rowspan="2" style="background-color: cornflowerblue;">
Rowspans that go over two rows can cause a break in page break.
</td>
<td style="background-color: turquoise;">
First rating
</td>
</tr>
<tr>
<td style="background-color: turquoise;">
Second rating
</td>
</tr>
<tr>
<td rowspan="2" style="background-color: cornflowerblue;">
Rowspans that go over two rows can cause a break in page break.
</td>
<td style="background-color: turquoise;">
Third rating
</td>
</tr>
<tr>
<td style="background-color: turquoise;">
Fourth rating
</td>
</tr>
<tr>
<td rowspan="2" style="background-color: lightpink;">
Two Row Rowspan for Test 2
</td>
<td rowspan="2" style="background-color: cornflowerblue;">
Rowspans that go over two rows can cause a break in page break.
</td>
<td style="background-color: turquoise;">
Fifth rating
</td>
</tr>
<tr>
<td style="background-color: turquoise;">
Sixth rating
</td>
</tr>
<tr>
<td rowspan="6" style="background-color: lightblue;">
Test 3
</td>
<td rowspan="6" style="background-color: lightgreen;">
Description for Test 3 that stretches over 6 rows.
</td>
<td rowspan="4" style="background-color: lightpink;">
Four Row Rowspan for Test 3
</td>
<td rowspan="2" style="background-color: cornflowerblue;">
Rowspans that go over two rows can cause a break in page break.
</td>
<td style="background-color: turquoise;">
First rating for Test 3
</td>
</tr>
<tr>
<td style="background-color: turquoise;">
Second rating for Test 3
</td>
</tr>
<tr>
<td rowspan="2" style="background-color: cornflowerblue;">
Rowspans that go over two rows can cause a break in page break.
</td>
<td style="background-color: turquoise;">
Third rating
</td>
</tr>
<tr>
<td style="background-color: turquoise;">
Fourth rating
</td>
</tr>
<tr>
<td rowspan="2" style="background-color: lightpink;">
Two Row Rowspan for Test 3
</td>
<td rowspan="2" style="background-color: cornflowerblue;">
Rowspans that go over two rows can cause a break in page break.
</td>
<td style="background-color: turquoise;">
Fifth rating
</td>
</tr>
<tr>
<td style="background-color: turquoise;">
Sixth rating
</td>
</tr>
</tbody>
</table>
<script>
class RepeatingTableHeaders extends Paged.Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
}
afterPageLayout(pageElement, page, breakToken, chunker) {
// Find all split table elements
let tables = pageElement.querySelectorAll("table[data-split-from]");
tables.forEach((table) => {
// Get the reference UUID of the node
let ref = table.dataset.ref;
// Find the node in the original source
let sourceTable = chunker.source.querySelector("[data-ref='" + ref + "']");
// Find if there is a header
let header = sourceTable.querySelector("thead");
if (header) {
// Clone the header element
let clonedHeader = header.cloneNode(true);
// Insert the header at the start of the split table
table.insertBefore(clonedHeader, table.firstChild);
}
});
}
}
Paged.registerHandlers(RepeatingTableHeaders);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>table-avoid-break-rowspan</title>
<title>table-avoid-break-row</title>
<meta charset="UTF-8">
<script src="../../../dist/paged.polyfill.js"></script>
<style>
......
const TIMEOUT = 10000;
describe("breaks-table-avoid-break-rowspan", () => {
describe("breaks-table-avoid-break-row", () => {
let page;
beforeAll(async () => {
page = await loadPage("breaks/table/avoid-break-rowspan.html");
page = await loadPage("breaks/table/avoid-break-row.html");
return page.rendered;
}, TIMEOUT);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment