Commit 576a5ac8 authored by Fred Chasen's avatar Fred Chasen

Merge branch 'issue-239-preserve-rowspan' into 'master'

resolves #239 duplicate columns with rowspan when a table is chunked

Closes #239

See merge request !134
parents e99c75d7 07cc8466
Pipeline #747 failed with stage
in 4 minutes and 49 seconds
<!DOCTYPE html PUBLIC>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>exceeding-rowspan-table</title>
<script src="../../../dist/paged.polyfill.js"></script>
<style>
@page {
size: 600px 600px;
border: 1px solid #cfc2c2;
}
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
tr, td {
break-inside: avoid;
}
</style>
</head>
<body>
<table>
<colgroup>
<col style="width: 15%;">
<col style="width: 10%;">
<col style="width: 25%;">
<col style="width: 15%;">
<col style="width: 10%;">
<col style="width: 25%;">
</colgroup>
<tbody>
<tr>
<td colspan="6"><p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean dignissim odio eget justo lacinia, vel accumsan nulla interdum.
Nunc dapibus dapibus pulvinar. Aliquam pellentesque leo et ullamcorper euismod.
Proin nec hendrerit augue. Integer sit amet congue ex.
Integer sollicitudin condimentum ultricies.</strong></p></td>
</tr>
<tr>
<td colspan="6"><p><strong>5. Lorem ipsum dolor sit amet</strong></p></td>
</tr>
<tr>
<td colspan="2"><p>5.1. Lorem ipsum dolor sit amet</p></td>
<td colspan="4"><p>Aenean dignissim odio eget justo lacinia, vel accumsan nulla interdum.</p></td>
</tr>
<tr>
<td colspan="6"><p>6. Nunc dapibus dapibus pulvinar. Aliquam pellentesque leo et ullamcorper euismod.</p></td>
</tr>
<tr>
<td colspan="2"><p>hendrerit</p></td>
<td colspan="2"><p>condimentum</p></td>
<td colspan="2"><p>ultricies</p></td>
</tr>
<tr>
<td colspan="2"><p>nec hendrerit augue</p></td>
<td colspan="2"><p>Aliquam pellentesque leo</p></td>
<td><p><em><em></em></em></p></td>
<td><p>vel accumsan nulla </p></td>
</tr>
<tr>
<td colspan="2"><p>psum dolor sit amet</p></td>
<td colspan="2"><p>(зав. № <em><em>_ ), инв. № </em><em></em></em></p></td>
<td><p><em><em></em></em></p></td>
<td><p>ullamcorper</p></td>
</tr>
<tr>
<td colspan="2"><p>dignissim odio</p></td>
<td colspan="2"><p> ullamcorper euismod</p></td>
<td><p><em><em></em></em></p></td>
<td><p>justo lacinia</p></td>
</tr>
<tr>
<td colspan="6"><p><strong>7. Integer sit amet congue ex.</strong></p></td>
</tr>
<tr>
<td colspan="2"><p>7.1. Dignissim odio eget justo lacinia.</p></td>
<td colspan="4"><p>Nunc dapibus dapibus pulvinar. Aliquam pellentesque leo et ullamcorper euismod.
Proin nec hendrerit augue. Integer sit amet congue ex.</p></td>
</tr>
</tbody>
</table>
</body>
</html>
const TIMEOUT = 10000;
describe("rowspan uneven table", () => {
let page;
beforeAll(async () => {
page = await loadPage("splits/tables/exceeding-rowspan-table.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
if (!DEBUG) {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
expect(pdf).toMatchPDFSnapshot(2);
});
}
});
<!DOCTYPE html PUBLIC>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rowspan-table</title>
<script src="../../../dist/paged.polyfill.js"></script>
<style>
@page {
size: 600px 300px;
border: 1px solid #cfc2c2;
}
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
tr, td {
break-inside: avoid;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td rowspan="4">1.1</td>
<td rowspan="4">This is a long description</td>
<td>First row, third column</td>
<td rowspan="4">1.4</td>
<td>First row, fifth column</td>
<td rowspan="4">1.6</td>
</tr>
<tr>
<td>Second row, third column</td>
<td>Second row, fifth column</td>
</tr>
<tr>
<td>Third row, third column</td>
<td>Third row, fifth column</td>
</tr>
<tr>
<td>Fourth row, third column</td>
<td>Fourth row, fifth column</td>
</tr>
</tbody>
</table>
</body>
</html>
const TIMEOUT = 10000;
describe("rowspan table", () => {
let page;
beforeAll(async () => {
page = await loadPage("splits/tables/rowspan-table.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
if (!DEBUG) {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
expect(pdf).toMatchPDFSnapshot(2);
});
}
});
......@@ -140,6 +140,41 @@ export function rebuildAncestors(node) {
let fragment = document.createDocumentFragment();
// Handle rowspan on table
if (node.nodeName === "TR") {
let previousRow = node.previousElementSibling;
let previousRowDistance = 1;
while (previousRow) {
// previous row has more columns, might indicate a rowspan.
if (previousRow.childElementCount > node.childElementCount) {
const initialColumns = Array.from(node.children);
while (node.firstChild) {
node.firstChild.remove();
}
let k = 0;
for (let j = 0; j < previousRow.children.length; j++) {
let column = previousRow.children[j];
if (column.rowSpan && column.rowSpan > previousRowDistance) {
const duplicatedColumn = column.cloneNode(true);
// Adjust rowspan value
duplicatedColumn.rowSpan = column.rowSpan - previousRowDistance;
// Add the column to the row
node.appendChild(duplicatedColumn);
} else {
// Fill the gap with the initial columns (if exists)
const initialColumn = initialColumns[k++];
// The initial column can be undefined if the newly created table has less columns than the original table
if (initialColumn) {
node.appendChild(initialColumn);
}
}
}
}
previousRow = previousRow.previousElementSibling;
previousRowDistance++;
}
}
// Gather all ancestors
let element = node;
while(element.parentNode && element.parentNode.nodeType === 1) {
......
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