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 PUBLIC>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>uneven-rowspan-table</title>
<script src="../../../../dist/paged.polyfill.js"></script>
<style>
@page {
size: 1800px 625px;
border: 1px solid #cfc2c2;
}
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
tr, td {
break-inside: avoid;
}
td > * {
break-inside: avoid;
}
</style>
</head>
<body>
<table class="tableblock frame-all grid-all stretch small standard-table">
<colgroup>
<col style="width: 6.8965%;"/>
<col style="width: 10.3448%;"/>
<col style="width: 6.8965%;"/>
<col style="width: 6.8965%;"/>
<col style="width: 6.8965%;"/>
<col style="width: 6.8965%;"/>
<col style="width: 6.8965%;"/>
<col style="width: 6.8965%;"/>
<col style="width: 6.8965%;"/>
<col style="width: 6.8965%;"/>
<col style="width: 6.8965%;"/>
<col style="width: 6.8965%;"/>
<col style="width: 6.8965%;"/>
<col style="width: 6.8972%;"/>
</colgroup>
<thead>
<tr>
<th class="tableblock halign-center valign-middle" colspan="5">aараbеcрu wоiсcруwjmm</th>
<th class="tableblock halign-center valign-middle" rowspan="3">zаcа mсaucаimg</th>
<th class="tableblock halign-center valign-middle" colspan="6">mсaucаimе bеcоzоb оcрudа со сwаpudаimеb</th>
<th class="tableblock halign-center valign-middle" rowspan="3">yаwcmqесwmf wpасс sеcоiа wоiсcруwjmm, схеbа Г</th>
<th class="tableblock halign-center valign-middle" rowspan="3">Сооcdеcсcdуеc/iе сооcdеcсcdуеc aроеwcу</th>
</tr>
<tr>
<th class="tableblock halign-center valign-middle" rowspan="2">iоbер wоicроpmруеbого уqасcwа</th>
<th class="tableblock halign-center valign-middle" rowspan="2">iаmbеiоdаimе wоiсcруwjmm</th>
<th class="tableblock halign-center valign-middle" rowspan="2">zаcа sеcоimроdаimg</th>
<th class="tableblock halign-center valign-middle" rowspan="2">dоoрасc, суc.</th>
<th class="tableblock halign-center valign-middle" rowspan="2">aроеwciuf wpасс</th>
<th class="tableblock halign-center valign-middle" colspan="6">aоwаoаimg aрmsора</th>
</tr>
<tr>
<th class="tableblock halign-center valign-middle">Усmpmе aрm duрudе аiwера (1)</th>
<th class="tableblock halign-center valign-middle">m1</th>
<th class="tableblock halign-center valign-middle">m2</th>
<th class="tableblock halign-center valign-middle">m3</th>
<th class="tableblock halign-center valign-middle">yаwcmqесwаg aроqiосcp iа уqасcwе, ba</th>
<th class="tableblock halign-center valign-middle">yаwcmqесwаg aроqiосcp wоiсcруwjmm, baа</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">сcеiа/wоpоiiа/ampоi/apmcа aереwрucmg/yуizаbеic ozаimg/сооруrеimg № <em> , d осgх </em> / __ iа оcbеcwе оc zо</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">01.01.2020</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">32</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">d__</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">02.02.2020</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">33,2</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">33</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">37.67</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">37.67</p></td>
<td class="tableblock halign-center valign-middle" rowspan="8"><p class="tableblock">Сооcdеcсcdуеc/iе сооcdеcсcdуеc</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">2</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">40,1</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">40</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">3</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">40,1</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">40</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">4</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">сcеiа/wоpоiiа/ampоi/apmcа aереwрucmg/yуizаbеic ozаimg/сооруrеimg № <em> , d осgх </em> / __ iа оcbеcwе оc zо</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">01.01.2020</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">32</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">d__</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">02.02.2020</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">43,7</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">43</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">42.33</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">42.33</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">5</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42,7</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">6</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42,7</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">7</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">сcеiа/wоpоiiа/ampоi/apmcа aереwрucmg/yуizаbеic ozаimg/сооруrеimg № <em> , d осgх </em> / __ iа оcbеcwе оc zо</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">01.01.2020</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">32</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">d__</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">02.02.2020</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">44,2</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">44</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">43</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">43</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">8</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42,5</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">9</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">сcеiа/wоpоiiа/ampоi/apmcа aереwрucmg/yуizаbеic ozаimg/сооруrеimg № <em> , d осgх </em> hello</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">01.01.2020</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">32</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">d__</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">02.02.2020</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">33,2</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">33</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">37.67</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">37.67</p></td>
<td class="tableblock halign-center valign-middle" rowspan="8"><p class="tableblock">Сооcdеcсcdуеc/iе сооcdеcсcdуеc</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">10</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">40,1</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">40</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">11</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">40,1</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">40</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">12</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">сcеiа/wоpоiiа/ampоi/apmcа aереwрucmg/yуizаbеic ozаimg/сооруrеimg № <em> , d осgх </em> hello</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">01.01.2020</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">32</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">d__</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">02.02.2020</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">43,7</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">43</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">42.33</p></td>
<td class="tableblock halign-center valign-middle" rowspan="3"><p class="tableblock">42.33</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">13</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42,7</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">14</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42,7</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">15</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">сcеiа/wоpоiiа/ampоi/apmcа aереwрucmg/yуizаbеic ozаimg/сооруrеimg № <em> , d осgх </em> / __ iа оcbеcwе оc zо</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">01.01.2020</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">32</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">d__</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">02.02.2020</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">44,2</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">1</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">44</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">43</p></td>
<td class="tableblock halign-center valign-middle" rowspan="2"><p class="tableblock">43</p></td>
</tr>
<tr>
<td class="tableblock halign-center valign-middle"><p class="tableblock">16</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42,5</p></td>
<td class="tableblock halign-center valign-middle"><p class="tableblock">42</p></td>
</tr>
</tbody>
</table>
</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