When a large amount of data is entered into a 'td' cell within a table, exceeding the length of two pages, the table automatically paginates. This results in a blank content area above the table.

[EnochGao]

Describe the bug
When a large amount of data is entered into a 'td' cell within a table, exceeding the length of two pages, the table automatically paginates. This results in a blank content area above the table.

To Reproduce
table_bug.txt
online viewer

[EnochGao]

This could be a table header related issue
table_bug.txt

[EnochGao]

I found that for the time being you can set the display property to simulate the table
pseudo_table.txt

[MurakamiShinyu]

I made a simple test case.

https://gist.github.com/MurakamiShinyu/22585fe8c74d2114477117d7d2cd0ff6#file-table-break-1-html

Test with Vivliostyle Viewer:

• https://vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/22585fe8c74d2114477117d7d2cd0ff6/raw/table-break-1.html

I think I can fix it today.

[EnochGao]

Hi, Shinyu, how is the progress coming along?

[MurakamiShinyu]

Hi, I'm still debugging it.

It seems the overflow checking has problem when table or table-cell has border and paddings.

vivliostyle.js/packages/core/src/vivliostyle/layout.ts

Lines 2578 to 2598 in 20fee03

	checkOverflowAndSaveEdgeAndBreakPosition(
	nodeContext: Vtree.NodeContext,
	trailingEdgeContexts: Vtree.NodeContext[],
	saveEvenOverflown: boolean,
	breakAtTheEdge: string | null,
	): boolean {
	if (!nodeContext) {
	return false;
	}
	if (LayoutHelper.isOrphan(nodeContext.viewNode)) {
	return false;
	}
	const overflown = this.checkOverflowAndSaveEdge(
	nodeContext,
	trailingEdgeContexts,
	);
	if (saveEvenOverflown || !overflown) {
	this.saveEdgeBreakPosition(nodeContext, breakAtTheEdge, overflown);
	}
	return overflown;
	}

[MurakamiShinyu]

I found that the problem does not seem so simple. This problem happens even when the table has no border and padding. I made some simplified test cases.

• https://gist.github.com/MurakamiShinyu/22585fe8c74d2114477117d7d2cd0ff6#file-table-break-4-3-html
  • with viewer: https://vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/22585fe8c74d2114477117d7d2cd0ff6/raw/table-break-4-3.html
• https://gist.github.com/MurakamiShinyu/22585fe8c74d2114477117d7d2cd0ff6#file-table-break-5-2-html
  • with viewer: https://vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/22585fe8c74d2114477117d7d2cd0ff6/raw/table-break-5-2.html

[MurakamiShinyu]

Found bug:

vivliostyle.js/packages/core/src/vivliostyle/table.ts

Lines 113 to 123 in 20fee03

	findAcceptableBreakPosition(): Layout.BreakPositionAndNodeContext {
	const element = this.cellNodeContext.viewNode as Element;
	const verticalAlign = this.cellNodeContext.verticalAlign;
	if (verticalAlign === "middle" || verticalAlign === "bottom") {
	Base.setCSSProperty(element, "vertical-align", "top");
	}
	const bp = this.pseudoColumn.findAcceptableBreakPosition(true);
	Base.setCSSProperty(element, "vertical-align", verticalAlign);
	return bp;
	}
	}

This does not work as expected when the verticalAlign value is "inherit" which is the default setting for table cells in the UserAgentBaseCss:

vivliostyle.js/packages/core/src/vivliostyle/assets.ts

Lines 1197 to 1201 in 20fee03

	tr,
	td,
	th {
	vertical-align: inherit;
	}

To fix this, if (verticalAlign === "middle" || verticalAlign === "bottom") should be corrected to if (verticalAlign !== "top" && verticalAlign !== "baseline").

However, the case in #1326 (comment) is not resolved in this fix.

[EnochGao]

@MurakamiShinyu Ha ha, a major breakthrough!! Thanks for your hard work.

[MurakamiShinyu]

Fixed in #1339.

Tests:

• https://vivliostyle-git-fix-issue1326-vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/22585fe8c74d2114477117d7d2cd0ff6/raw/table_bug.html
• https://vivliostyle-git-fix-issue1326-vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/22585fe8c74d2114477117d7d2cd0ff6/raw/table_bug2.html
• https://vivliostyle-git-fix-issue1326-vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/22585fe8c74d2114477117d7d2cd0ff6/raw/table-break-1.html
• https://vivliostyle-git-fix-issue1326-vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/22585fe8c74d2114477117d7d2cd0ff6/raw/table-break-2.html
• https://vivliostyle-git-fix-issue1326-vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/22585fe8c74d2114477117d7d2cd0ff6/raw/table-break-3.html
• https://vivliostyle-git-fix-issue1326-vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/22585fe8c74d2114477117d7d2cd0ff6/raw/table-break-4-1.html
• https://vivliostyle-git-fix-issue1326-vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/22585fe8c74d2114477117d7d2cd0ff6/raw/table-break-4-2.html
• https://vivliostyle-git-fix-issue1326-vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/22585fe8c74d2114477117d7d2cd0ff6/raw/table-break-4-3.html
• https://vivliostyle-git-fix-issue1326-vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/22585fe8c74d2114477117d7d2cd0ff6/raw/table-break-5-1.html
• https://vivliostyle-git-fix-issue1326-vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/22585fe8c74d2114477117d7d2cd0ff6/raw/table-break-5-2.html

(GitHub Gist: https://gist.github.com/MurakamiShinyu/22585fe8c74d2114477117d7d2cd0ff6)