fix(player): the YouTube player's full window filled only its card — a blurred ancestor trapped the fixed stage (E28)
E28 S3d1 moved the modal's card from `.glass-card` (no blur) to the `.glass` panel role, whose `backdrop-filter` makes the card the containing block of the fixed "full window" stage: F showed a 894×161 strip inside the card with a scrolling, wrapped control bar. While the stage is maximised the card now drops its blur (`html .glass:has(> .player-stage--max)`, outranking the dark theme's rule); measured live: the stage 1268×861 = the viewport, the blur back on exit.
This commit is contained in:
@@ -1071,6 +1071,14 @@ html[data-theme="light"] {
|
|||||||
here escapes it — a higher level would claim an authority this layer neither has nor needs. */
|
here escapes it — a higher level would claim an authority this layer neither has nor needs. */
|
||||||
z-index: var(--z-index-rail);
|
z-index: var(--z-index-rail);
|
||||||
}
|
}
|
||||||
|
/* …and it only fills the viewport while no ancestor has a filter: a `backdrop-filter` makes that
|
||||||
|
ancestor the fixed stage's containing block. The modal's card is a blurred `.glass` panel (E28 S3d1),
|
||||||
|
so while the stage is maximised the card drops its blur — the stage covers the card anyway. `html `
|
||||||
|
outranks `html[data-theme="dark"] .glass`, which sets the blur again (lib/playerStage.contract.test.ts). */
|
||||||
|
html .glass:has(> .player-stage--max) {
|
||||||
|
backdrop-filter: none;
|
||||||
|
-webkit-backdrop-filter: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* Thin, theme-aware scrollbars */
|
/* Thin, theme-aware scrollbars */
|
||||||
* {
|
* {
|
||||||
|
|||||||
@@ -0,0 +1,19 @@
|
|||||||
|
import { readFileSync } from "node:fs";
|
||||||
|
|
||||||
|
import { expect, it } from "vitest";
|
||||||
|
|
||||||
|
// The YouTube player's "full window" (F) is a `position: fixed; inset: 0` stage INSIDE the modal's card.
|
||||||
|
// A fixed element is sized by the viewport only while no ancestor has a filter: a `backdrop-filter`
|
||||||
|
// makes that ancestor its containing block. E28 S3d1 moved the card from `.glass-card` (no blur) to
|
||||||
|
// `.glass` (blurred), and the full window shrank to a 894×161 strip inside the card (E28 audit, seen
|
||||||
|
// live). jsdom does no layout, so what is pinned is the escape rule: while the stage is maximised, the
|
||||||
|
// card drops its blur, with a selector that outranks `html[data-theme="dark"] .glass` (0,2,1).
|
||||||
|
const css = readFileSync(new URL("../index.css", import.meta.url), "utf8");
|
||||||
|
|
||||||
|
it("a maximised player stage takes the blur off the glass card it sits in", () => {
|
||||||
|
const at = css.indexOf("html .glass:has(> .player-stage--max)");
|
||||||
|
expect(at, "the escape rule").toBeGreaterThan(css.indexOf('html[data-theme="dark"] .glass'));
|
||||||
|
const body = css.slice(at, css.indexOf("}", at));
|
||||||
|
expect(body).toMatch(/(^|[\s;{])backdrop-filter:\s*none/);
|
||||||
|
expect(body).toMatch(/-webkit-backdrop-filter:\s*none/);
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user