diff --git a/static/read-more.css b/static/read-more.css index 1fe2976..5678028 100644 --- a/static/read-more.css +++ b/static/read-more.css @@ -5,18 +5,9 @@ box-sizing: border-box; /* configured height = visible height, padding included */ max-height: var(--read-more-height, 250px); overflow: hidden; - position: relative; -} - -.flux .text.read-more-collapsed::after { - content: ""; - position: absolute; - left: 0; - right: 0; - bottom: 0; - height: 4em; - background: linear-gradient(to bottom, transparent, var(--frss-background-color, #fff)); - pointer-events: none; + /* Fade out the last lines; a mask works with every theme background. */ + -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 4em), transparent); + mask-image: linear-gradient(to bottom, #000 calc(100% - 4em), transparent); } .flux .read-more-btn { diff --git a/tests/e2e/read-more.spec.js b/tests/e2e/read-more.spec.js index 6e8bab9..c80c7ff 100644 --- a/tests/e2e/read-more.spec.js +++ b/tests/e2e/read-more.spec.js @@ -113,3 +113,15 @@ test('config height is clamped', async ({ page }) => { expect(await text.evaluate((el) => getComputedStyle(el).maxHeight)).toBe('400px'); expect(await text.evaluate((el) => el.getBoundingClientRect().height)).toBeLessThanOrEqual(400); }); + +test('fade is a theme-independent mask', async ({ page }) => { + await page.goto(READER); + const text = fluxByTitle(page, 1).locator('.text'); + const mask = await text.evaluate((el) => { + const cs = getComputedStyle(el); + return cs.maskImage || cs.webkitMaskImage; + }); + expect(mask).toContain('linear-gradient'); + const overlay = await text.evaluate((el) => getComputedStyle(el, '::after').content); + expect(overlay === 'none' || overlay === 'normal').toBeTruthy(); +}); diff --git a/tests/e2e/reset.php b/tests/e2e/reset.php index 48d0e7e..a743e19 100644 --- a/tests/e2e/reset.php +++ b/tests/e2e/reset.php @@ -13,7 +13,14 @@ $conf['extensions_enabled']['Read More'] = true; $conf['extensions']['Read More']['collapsed_height'] = $height; $conf['mark_when']['scroll'] = true; $conf['view_mode'] = 'reader'; -file_put_contents($file, "exec('UPDATE entry SET is_read = 0');