diff options
Diffstat (limited to 'tools')
| -rw-r--r-- | tools/pager-resize-test.js | 13 |
1 files changed, 13 insertions, 0 deletions
diff --git a/tools/pager-resize-test.js b/tools/pager-resize-test.js index 7e4cfb7..07fcbba 100644 --- a/tools/pager-resize-test.js +++ b/tools/pager-resize-test.js @@ -115,6 +115,19 @@ try { await page.keyboard.press('ArrowUp'); await resting('e8.png'); await page.setViewport({ width: 900, height: 1200 }); check('a different shape: still on the post', await resting('e8.png'), await curPic() + ' ' + await pos()); + console.log('\n[a wide window: the words and counts keep to the middle]'); + await page.setViewport({ width: 1920, height: 600 }); + await resting('e8.png'); + await page.keyboard.press('ArrowDown'); await resting('e9.png'); // moved on from the start: a tap shows the details (on the start it closes) + await page.mouse.click(960, 300); await sleep(400); + const geo = await page.evaluate(() => { const sc = document.querySelector('.mp-scroll'); const s = [...sc.querySelectorAll('.mp-slide')].find((x) => { const r = x.getBoundingClientRect(); return Math.abs(r.top) < 4 && Math.abs(r.left) < 4; }); const r = (q) => { const e = s.querySelector(q); const b = e.getBoundingClientRect(); return [Math.round(b.left), Math.round(b.right)]; }; return { show: document.querySelector('.media-pager').classList.contains('show'), left: r('.mp-left'), counts: r('.mp-counts'), meta: r('.mp-meta') }; }); + check('the details are up', geo.show); + check('the words start near the middle column, not the screen\'s edge', geo.left[0] >= 560 && geo.left[0] <= 600, JSON.stringify(geo)); + check('the counts sit at the column\'s edge, not the screen\'s corner', geo.counts[1] >= 1320 && geo.counts[1] <= 1360, JSON.stringify(geo)); + check('the gradient still spans the screen', geo.meta[0] === 0 && geo.meta[1] === 1920, JSON.stringify(geo)); + await page.setViewport({ width: 390, height: 844 }); await sleep(300); + const narrow = await page.evaluate(() => { const sc = document.querySelector('.mp-scroll'); const s = [...sc.querySelectorAll('.mp-slide')].find((x) => { const r = x.getBoundingClientRect(); return Math.abs(r.top) < 4 && Math.abs(r.left) < 4; }); const b = s.querySelector('.mp-left').getBoundingClientRect(); return [Math.round(b.left), Math.round(s.querySelector('.mp-counts').getBoundingClientRect().right)]; }); + check('a phone keeps the full width', narrow[0] <= 16 && narrow[1] >= 370, JSON.stringify(narrow)); check('no page errors', errs.length === 0, errs.slice(0, 2).join(' | ')); } catch (e) { console.error(e); ok = false; } finally { await browser.close(); server.stop(true); } console.log(ok ? '\nā
the pager keeps its post through a resize' : '\nā failed'); |