fix(player): the stacked layout's minimum width no longer clips the wide one
The 36rem floor guards the stacked layout's width/height feedback loop; the wide side-panel card has no such loop, and on a short wide window the floor made the video taller than the card, cutting off YouTube's control bar. The floor now applies to the stacked layout only; e2e covers a 1400x380 window.
This commit is contained in:
@@ -29,7 +29,8 @@ test.describe("player modal", () => {
|
||||
|
||||
// The video's size, in the windows the owner meets: layout bugs no DOM test can see. Each viewport
|
||||
// is a real one — 1920×911 is a 1080p screen at 100% (the side-panel layout), 1097×520 the same
|
||||
// screen at 175% or a small laptop at 100% (the stacked layout, on a short window).
|
||||
// screen at 175% or a small laptop at 100% (the stacked layout, on a short window), 1400×380 a wide
|
||||
// window made short by docked devtools (the side-panel layout, whose card does not scroll).
|
||||
test.describe("player modal sizing", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.route(/youtube\.com/, (route) => route.abort());
|
||||
@@ -41,6 +42,7 @@ test.describe("player modal sizing", () => {
|
||||
for (const [w, h] of [
|
||||
[1920, 911],
|
||||
[1097, 520],
|
||||
[1400, 380],
|
||||
] as const) {
|
||||
test(`the video keeps a real size at ${w}×${h}, and maximised fills the window`, async ({
|
||||
page,
|
||||
@@ -54,6 +56,16 @@ test.describe("player modal sizing", () => {
|
||||
const stage = await box(page, ".player-stage");
|
||||
expect(stage.width).toBeGreaterThanOrEqual(Math.min(w * 0.5, 560));
|
||||
expect(stage.height).toBeGreaterThan(stage.width * 0.5);
|
||||
// …and all of it is in sight: its bottom edge is the YouTube control bar, and the side-panel
|
||||
// card clips what overflows it (it does not scroll), the stacked card scrolls to it.
|
||||
const overflow = await page
|
||||
.locator(".player-stage")
|
||||
.first()
|
||||
.evaluate((el) => {
|
||||
const card = el.parentElement!;
|
||||
return el.getBoundingClientRect().bottom - card.getBoundingClientRect().bottom;
|
||||
});
|
||||
expect(overflow).toBeLessThanOrEqual(0.5);
|
||||
|
||||
// Maximise (F): the stage is fixed to the viewport. In the side-panel layout its `self-start`
|
||||
// once aligned the fixed box too, and it shrank to its content's height — 0 px, a thin line.
|
||||
|
||||
Reference in New Issue
Block a user