fix(reader): keep cover background-image visible under a texture (#4675)

Bump foliate-js to the textureAwareBackground fix and add a regression
test. A cover page that paints its image via a body background-image
leaves background-color transparent, so the computed background shorthand
starts with "rgba(0, 0, 0, 0)" even though a real image follows. The
paginator misclassified it as transparent and, with a background texture
active (e.g. parchment), dropped the page background so the texture showed
on the first page instead of the cover. Verified on Android WebView.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Huang Xin
2026-06-20 10:13:28 +08:00
committed by GitHub
parent 5f561504e3
commit 0ab8f6042f
2 changed files with 25 additions and 1 deletions
@@ -133,6 +133,30 @@ describe('textureAwareBackground', () => {
expect(textureAwareBackground('rgb(255, 255, 255)', true)).toBe('rgb(255, 255, 255)');
});
// Regression test for a cover page that paints its image via a body
// `background-image` (the EPUB sets `background-color` transparent and lets the
// image fill the page). `getComputedStyle(body).background` serializes the
// transparent colour FIRST, so the shorthand starts with `rgba(0, 0, 0, 0)`
// even though a real image follows. Such a page must NOT be treated as
// transparent — a full-page cover image should occlude the texture, not be
// dropped so the texture shows through. Verified on a Xiaomi (Android WebView)
// where the parchment texture replaced the book's cover on the first page.
it('keeps a background that carries an image even when a texture is active', () => {
// The real value captured from the cover iframe on-device.
expect(
textureAwareBackground(
'rgba(0, 0, 0, 0) url("blob:http://x/abc") no-repeat fixed 50% 50% / 100% 100% padding-box border-box',
true,
),
).toBe(
'rgba(0, 0, 0, 0) url("blob:http://x/abc") no-repeat fixed 50% 50% / 100% 100% padding-box border-box',
);
// A plain relative/absolute url() background (not a blob) is kept too.
expect(textureAwareBackground('transparent url(cover.jpg) center / cover', true)).toBe(
'transparent url(cover.jpg) center / cover',
);
});
it('never drops a background when no texture is active (no regression)', () => {
expect(textureAwareBackground('rgba(0, 0, 0, 0)', false)).toBe('rgba(0, 0, 0, 0)');
expect(textureAwareBackground('rgb(0, 0, 0)', false)).toBe('rgb(0, 0, 0)');