mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-09 04:50:59 +00:00
Measure the panel against the band, not against the page
The sideways check could not fail for the case it was written for. A panel wider than the phone kept it green: the hero band wears overflow-hidden for its glow, so an over-wide panel is clipped rather than scrolled and the document never widens by a pixel. The person loses the right-hand end of every row and nothing reports it. It now compares the panel with the room the band actually offers, which is the comparison the clipping makes meaningful.
This commit is contained in:
1 parent
cc7978a573
commit
b697a0a10e
1 file changed
+19
-1
@@ -439,11 +439,20 @@ describe("hero band geometry", () => {
|
||||
culprit = child.getAttribute("data-slot") ?? child.className;
|
||||
}
|
||||
}
|
||||
const strip = el.closest('[data-slot="insights-hero-strip"]')!;
|
||||
const stripBox = getComputedStyle(strip);
|
||||
return {
|
||||
scroll: el.scrollWidth,
|
||||
client: el.clientWidth,
|
||||
width: Math.round(el.getBoundingClientRect().width),
|
||||
widest: Math.round(widest),
|
||||
culprit: String(culprit).slice(0, 60),
|
||||
// The width the band actually offers, padding taken off.
|
||||
available: Math.round(
|
||||
strip.getBoundingClientRect().width -
|
||||
parseFloat(stripBox.paddingLeft) -
|
||||
parseFloat(stripBox.paddingRight),
|
||||
),
|
||||
docScroll: document.documentElement.scrollWidth,
|
||||
docClient: document.documentElement.clientWidth,
|
||||
};
|
||||
@@ -457,7 +466,16 @@ describe("hero band geometry", () => {
|
||||
m.widest,
|
||||
`a child is wider than the panel: ${JSON.stringify(m)}`,
|
||||
).toBeLessThanOrEqual(m.client + 1);
|
||||
// The page itself, which is what a person actually feels.
|
||||
// The panel against the room the band gives it. This is the assertion
|
||||
// that has to carry the phone case: the band wears `overflow-hidden`
|
||||
// for its glow, so a panel wider than the band is silently CLIPPED
|
||||
// rather than scrolled, and the document check below stays green while
|
||||
// a person loses the right-hand end of every row.
|
||||
expect(
|
||||
m.width,
|
||||
`the panel is wider than the band gives it: ${JSON.stringify(m)}`,
|
||||
).toBeLessThanOrEqual(m.available + 1);
|
||||
// Kept anyway, for anything that escapes the band's clip.
|
||||
expect(
|
||||
m.docScroll,
|
||||
`the page scrolls sideways: ${JSON.stringify(m)}`,
|
||||
|
||||
Reference in new issue
Block a user