Inside a display: contents wrapper (1)
Inside a display: contents wrapper (2)
diff --git a/packages/core/src/SideNav/SideNavRailMotion.test.tsx b/packages/core/src/SideNav/SideNavRailMotion.test.tsx
index 1d3d868079e3c..4be402ba5637f 100644
--- a/packages/core/src/SideNav/SideNavRailMotion.test.tsx
+++ b/packages/core/src/SideNav/SideNavRailMotion.test.tsx
@@ -1,5 +1,7 @@
// Copyright (c) Meta Platforms, Inc. and affiliates.
+import {readFileSync} from 'node:fs';
+import {join} from 'node:path';
import {act, fireEvent, render, screen} from '@testing-library/react';
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
@@ -610,6 +612,29 @@ describe('SideNav rail motion (component:SideNav FR6, component:AppShell FR17)',
expect((copy as HTMLElement).style.width).toBe(`${EXPANDED}px`);
});
+ it("plays the animated-layout module's two-state edge reveal on its inline edge, keeping only its labels' and icons' fades (spec:AST-105 FR9)", () => {
+ const source = readFileSync(join(__dirname, 'railMotion.ts'), 'utf8')
+ .replace(/\/\*[\s\S]*?\*\//g, '')
+ .replace(/\/\/.*$/gm, '');
+ // The module holds the old rail, clips its inline-end edge and rides the
+ // content's glide (architecture:react-component-runtime INV12).
+ expect(source).toMatch(/\bholdLayoutEdge\(/);
+ expect(source).toMatch(/\bplayLayoutEdge\(/);
+ expect(source).toMatch(/edge: 'inline-end'/);
+ // No clip, copy or ride of the rail's own.
+ for (const own of [
+ 'clipPath',
+ 'inset(',
+ 'holdLayoutSwap',
+ 'playLayoutSwap',
+ 'playLayoutFrames',
+ 'zIndex',
+ 'getBoundingClientRect',
+ ]) {
+ expect(source, own).not.toContain(own);
+ }
+ });
+
it('changes at once without Web Animations', async () => {
delete (HTMLElement.prototype as unknown as {animate?: unknown}).animate;
render(
);
diff --git a/packages/core/src/SideNav/railMotion.ts b/packages/core/src/SideNav/railMotion.ts
index 564916ab7f560..be7f8d71c442c 100644
--- a/packages/core/src/SideNav/railMotion.ts
+++ b/packages/core/src/SideNav/railMotion.ts
@@ -5,7 +5,7 @@
/**
* @file railMotion.ts
* @input The rail's outer element, the animated-layout module's handle,
- * motion and in-place swap (motion/animatedLayout.ts)
+ * motion and two-state edge reveal (motion/animatedLayout.ts)
* @output Exports `SideNavShellContext` (what AppShell lends its SideNav),
* `createRailLayout`, `snapshotRail` and `playRail`: the rail's collapse
* motion
@@ -14,28 +14,30 @@
*
* Collapsing or expanding the rail plays one motion on one clock, the
* `springs.settle` role the animated-layout module reads (`spec:AST-105`
- * FR4):
- * - Layout snaps to the final rail width at once; nothing animates a width.
- * - A collapse covers the old rail by a clip: the module's in-place swap
- * (`spec:AST-105` FR8) holds the old, expanded rail as one transient copy
- * and the clip closes it to the new width. The copy's text fades over the
- * first 40%; the real collapsed rail, raised above the copy, fades in over
- * the last 30%, so the real rail, icons only, is all that remains.
- * - An expand reveals the real rail by a clip from the old width, its text
- * fading in over the last 60% so no label shows at the collapsed width,
- * under the old, collapsed rail held by the same swap, which fades over the
- * first 60%: the first frame is the frame before the click.
- * - In AppShell the rail's edge rides the content column's glide, frame by
- * frame, so the two never part, also when a change interrupts a running
- * one; the copy is laid in the row that holds both.
+ * FR4). The rail is FR9's edge reveal in its inline two-state form, which
+ * the module produces (`architecture:react-component-runtime` INV12): layout
+ * snaps to the final rail width at once, nothing animates a width, and the
+ * module clips the rail's inline-end edge from the width it shows to the new
+ * one. A collapse covers the old, expanded rail, held as one transient copy,
+ * with the real collapsed rail raised above it; an expand reveals the real
+ * rail under the old, collapsed one. In AppShell that edge rides the content
+ * column's glide, frame by frame, so the two never part, also when a change
+ * interrupts a running one. Every starting clip applies in the commit's
+ * layout effect, before the first frame paints. Under Reduce Motion it
+ * follows `design:reduced-motion`: opacity only under a coarse primary
+ * pointer (DR2), an immediate change otherwise (DR3). Without Web
+ * Animations, the change lands at once.
+ *
+ * What this file adds is the rail's own fades, on the same progress:
+ * - A collapse fades the copy's text over the first 40% and the copy over
+ * the last 30%, while the real collapsed rail, its icons, fades in over the
+ * last 30%, so the real rail, icons only, is all that remains.
+ * - An expand fades the real rail's text in over the last 60%, so no label
+ * shows at the collapsed width, while the old, collapsed rail fades over
+ * the first 60%: the first frame is the frame before the click.
* - A change made during a running motion starts from what the rail shows:
* its width, its labels' opacity and its collapsed icons' opacity, so the
* rail stays continuous.
- * - Every starting clip applies in the commit's layout effect, before the
- * first frame paints.
- * - Under Reduce Motion it follows `design:reduced-motion`: opacity only
- * under a coarse primary pointer (DR2), an immediate change otherwise
- * (DR3). Without Web Animations, the change lands at once.
*
* SYNC: When modified, update SideNav.tsx, AppShell.tsx and
* SideNavRailMotion.test.tsx.
@@ -44,11 +46,10 @@
import {createContext} from 'react';
import {
createAnimatedLayout,
- holdLayoutSwap,
- layoutMotionFor,
- playLayoutFrames,
- playLayoutSwap,
+ holdLayoutEdge,
+ playLayoutEdge,
type AnimatedLayout,
+ type LayoutEdgeHold,
type LayoutSwap,
} from '../motion/animatedLayout';
@@ -88,12 +89,12 @@ export interface RailShown {
}
export interface RailSnapshot {
- readonly rail: HTMLElement;
- readonly railRect: DOMRect;
+ /** The old rail, held for the module's edge reveal. */
+ readonly hold: LayoutEdgeHold;
+ /** The old rail as one transient copy, or null when it cannot be held. */
+ readonly swap: LayoutSwap | null;
/** What the rail shows when the change lands. */
readonly shown: RailShown;
- /** The old rail, held by the swap. */
- readonly swap: LayoutSwap | null;
}
/** A playing rail motion. */
@@ -114,19 +115,22 @@ export function snapshotRail(
running: RailShown | null,
isCollapsed: boolean,
): RailSnapshot | null {
- if (rail == null || typeof rail.animate !== 'function') {
+ // The rail's edge is the one beside the content, its inline end.
+ const hold = holdLayoutEdge(handle, rail, {
+ edge: 'inline-end',
+ shown: running?.width ?? null,
+ });
+ if (hold == null) {
return null;
}
- const railRect = rail.getBoundingClientRect();
return {
- rail,
- railRect,
+ hold,
+ swap: hold.swap,
shown: running ?? {
- width: railRect.width,
+ width: hold.extent,
labels: isCollapsed ? 0 : 1,
collapsed: isCollapsed ? 1 : 0,
},
- swap: holdLayoutSwap(handle, rail),
};
}
@@ -141,17 +145,6 @@ function textElements(rail: HTMLElement): Element[] {
);
}
-/** `element`'s ancestor (or itself) that sits directly in `host`. */
-function childOf(host: Element, element: HTMLElement): HTMLElement | null {
- let node: HTMLElement | null = element;
- while (node != null && node.parentElement !== host) {
- node = node.parentElement;
- }
- return node;
-}
-
-const AT_REST: RailMotion = {end: () => {}, shown: () => null};
-
/**
* After the change commits, before paint: play the rail's motion from the
* snapshot, on the module's motion. With a `column` (in AppShell), the rail's
@@ -163,19 +156,8 @@ export function playRail(
handle: AnimatedLayout,
column: HTMLElement | null = null,
): RailMotion {
- const {railRect, swap, shown: from} = snapshot;
- // The rail as it is now: a resizable rail's nav remounts when its resize
- // wrapper comes and goes with the collapse.
- const rail = current?.isConnected === true ? current : snapshot.rail;
- if (!rail.isConnected) {
- return AT_REST;
- }
- const motion = layoutMotionFor(rail);
- const next = rail.getBoundingClientRect();
- if (motion.kind === 'instant' || Math.abs(next.width - from.width) < 0.5) {
- return AT_REST;
- }
- const isCollapse = next.width < from.width;
+ const {shown: from} = snapshot;
+ let isCollapse = false;
// The labels and the collapsed icons over the motion's progress, from what
// the rail showed.
const labelsAt = (p: number) =>
@@ -186,130 +168,42 @@ export function playRail(
isCollapse
? from.collapsed + (1 - from.collapsed) * clamp((p - 0.7) / 0.3)
: from.collapsed * (1 - clamp(p / 0.6));
- const rtl = getComputedStyle(rail).direction === 'rtl';
- const sign = rtl ? -1 : 1;
- const inset = (px: number) =>
- rtl ? `inset(0px 0px 0px ${px}px)` : `inset(0px ${px}px 0px 0px)`;
- // The row that holds the rail and the column, or the rail's parent.
- const host =
- column?.parentElement != null && column.parentElement.contains(rail)
- ? column.parentElement
- : rail.parentElement;
- // Riding needs the swap: its frames carry the column's travel. Without one
- // (old content that cannot be copied) the clip follows the motion's curve.
- const rides = host != null && column?.parentElement === host && swap != null;
- // The width the rail shows over the motion: on the column's glide (its
- // travel so far added to where it started), or on the motion's curve.
- const widthAt = (p: number, ride: {x: number}) =>
- rides
- ? from.width + sign * ride.x
- : from.width + (next.width - from.width) * p;
- const now = () => Number(rail.ownerDocument.timeline?.currentTime ?? 0);
- const startedAt = now();
- const durationMs =
- motion.kind === 'spring' ? motion.progress.durationMs : motion.durationMs;
- const shown = (): RailShown | null => {
- const elapsed = now() - startedAt;
- if (elapsed >= durationMs) {
- return null;
- }
- const p =
- motion.kind === 'spring' ? 1 - motion.progress.remaining(elapsed) : 0;
- let width = from.width + (next.width - from.width) * p;
- if (rides && column != null) {
- // The rail's edge is the column's: read it where it shows.
- const edge = column.getBoundingClientRect();
- const own = rail.getBoundingClientRect();
- width = rtl ? own.right - edge.right : edge.left - own.left;
- }
- return {width, labels: labelsAt(p), collapsed: collapsedAt(p)};
- };
- const rideWith =
- rides && column != null
- ? {
- element: column,
- travel: {x: sign * (from.width - next.width), y: 0},
- isCopyMoved: false,
- }
- : undefined;
- // The copy keeps the rail's inline-start edge where the rail is now, so it
- // meets the real rail wherever SideNav sits (a centered rail moves).
- const at = DOMRect.fromRect({
- x: rtl ? next.right - railRect.width : next.left,
- y: next.top,
- width: railRect.width,
- height: railRect.height,
+ const motion = playLayoutEdge(snapshot.hold, current, handle, {
+ edge: 'inline-end',
+ rideWith: column,
+ parts: (isConceal, rail) => {
+ isCollapse = isConceal;
+ return isConceal
+ ? {
+ // The old rail's text fades early, the copy late, as the real
+ // collapsed rail, raised above it, fades in.
+ copyOpacity: p => 1 - clamp((p - 0.7) / 0.3),
+ copyText: labelsAt,
+ incoming: [
+ {element: rail, frames: p => ({opacity: collapsedAt(p)})},
+ ],
+ }
+ : {
+ // The old, collapsed rail fades early; the real rail's text, late.
+ copyOpacity: collapsedAt,
+ incoming: textElements(rail).map(element => ({
+ element,
+ frames: (p: number) => ({opacity: labelsAt(p)}),
+ })),
+ };
+ },
});
-
- if (isCollapse) {
- // A collapse covers the old rail, held by the swap, from the width it
- // shows down to the new one; the real, collapsed rail fades in above it.
- if (swap == null || host == null) {
- return AT_REST;
- }
- const raised = childOf(host, rail);
- const restore =
- raised == null
+ return {
+ end: motion.end,
+ shown: () => {
+ const now = motion.shown();
+ return now == null
? null
: {
- position: raised.style.position,
- zIndex: raised.style.zIndex,
+ width: now.extent,
+ labels: labelsAt(now.progress),
+ collapsed: collapsedAt(now.progress),
};
- if (raised != null) {
- if (getComputedStyle(raised).position === 'static') {
- raised.style.position = 'relative';
- }
- raised.style.zIndex = '2';
- }
- const end = playLayoutSwap(
- {...swap, rect: at},
- {
- host,
- isOpaque: true,
- copy: (p, ride) => ({
- clipPath: inset(railRect.width - widthAt(p, ride)),
- opacity: 1 - clamp((p - 0.7) / 0.3),
- }),
- copyText: labelsAt,
- rideWith,
- onEnd: () => {
- if (raised != null && restore != null) {
- raised.style.position = restore.position;
- raised.style.zIndex = restore.zIndex;
- }
- },
- incoming: [{element: rail, frames: p => ({opacity: collapsedAt(p)})}],
- },
- );
- return {end, shown};
- }
-
- // An expand reveals the real rail from the width it showed, its text fading
- // in late, under the old, collapsed rail fading early.
- const incoming = [
- {
- element: rail,
- frames: (p: number, ride: {x: number}) => ({
- clipPath: inset(next.width - widthAt(p, ride)),
- }),
},
- ...textElements(rail).map(element => ({
- element,
- frames: (p: number) => ({opacity: labelsAt(p)}),
- })),
- ];
- const end =
- swap != null && host != null
- ? playLayoutSwap(
- {...swap, rect: at},
- {
- host,
- isOpaque: true,
- copy: p => ({opacity: collapsedAt(p)}),
- rideWith,
- incoming,
- },
- )
- : playLayoutFrames(handle, incoming);
- return {end, shown};
+ };
}
diff --git a/packages/core/src/motion/__tests__/animatedLayout.interaction.browser.spec.ts b/packages/core/src/motion/__tests__/animatedLayout.interaction.browser.spec.ts
index 85073edf984ac..9544b2461894a 100644
--- a/packages/core/src/motion/__tests__/animatedLayout.interaction.browser.spec.ts
+++ b/packages/core/src/motion/__tests__/animatedLayout.interaction.browser.spec.ts
@@ -8,7 +8,10 @@
* @output One proof per `spec:AST-105` Coverage row, and FR2–FR4: which
* elements glide after a reported size change, by how much, on one shared
* start and spring, never past the area and never scrolling it; nothing
- * without a handle; Reduce Motion by pointer
+ * without a handle; Reduce Motion by pointer; and FR9's edge reveal, a
+ * block-end and an inline-edge reveal and conceal and the two-state form,
+ * each element's moving edge on the content beside it on every frame, a
+ * reversal included
* @position Real-browser verification of `spec:AST-105` and
* `architecture:react-component-runtime` INV12
*/
@@ -39,6 +42,44 @@ declare global {
}) => Promise
;
/** Animations on an element: their first transform and timing. */
motionOf: (selector: string) => MotionRead[];
+ /**
+ * Pauses every animation `ms` into its motion: the page as it shows then,
+ * however far apart the browser draws its frames.
+ */
+ holdAt: (ms: number) => void;
+ /** Plays on every animation `holdAt` left paused. */
+ resumeAll: () => void;
+ /**
+ * An element's box where its glide's own keyframes put it at the glide's
+ * current time. WebKit evaluates a compositor-run translate a little
+ * ahead of the frame (measured: up to 1.6 px at a fast glide's peak
+ * speed, 0 in some frames) while a clip on the main thread reads exactly
+ * its keyframes, so the edge proofs place what the edge rides by its
+ * keyframes: the same clock the module rides on.
+ */
+ glideBoxOf: (element: Element) => DOMRect;
+ /**
+ * The px an element's `inset()` clip hides from each side, from its clip
+ * animation's own keyframes at its current time (the computed clip when
+ * nothing animates it). With `glideBoxOf`, the edge proofs read both
+ * sides of a ride on the module's own clock; `computedInsetOf` and the
+ * rect read what the engine evaluates, which in WebKit runs a little
+ * apart (a compositor translate ahead of the frame, a main-thread clip a
+ * frame behind on a late first frame) and is reported beside them.
+ */
+ insetOf: (element: Element) => {
+ top: number;
+ right: number;
+ bottom: number;
+ left: number;
+ };
+ /** The px an element's computed `inset()` clip hides from each side. */
+ computedInsetOf: (element: Element) => {
+ top: number;
+ right: number;
+ bottom: number;
+ left: number;
+ };
}
}
@@ -80,6 +121,101 @@ window.change = async ({changed, mutate, area = '#area', handle = true}) => {
AnimatedLayout.playLayoutChange(layout, target);
await new Promise(resolve => queueMicrotask(resolve));
};
+window.holdAt = ms => {
+ for (const animation of document.getAnimations()) {
+ animation.pause();
+ animation.currentTime = ms;
+ }
+};
+window.resumeAll = () => {
+ for (const animation of document.getAnimations()) {
+ if (animation.playState === 'paused') {
+ animation.play();
+ }
+ }
+};
+window.glideBoxOf = element => {
+ // Where layout puts it (offsets ignore transforms; this page lays out on
+ // whole pixels), plus its glide's translate from the glide's keyframes at
+ // its current time: no evaluated transform is read at all.
+ let x = 0;
+ let y = 0;
+ for (let node = element; node != null; node = node.offsetParent) {
+ x += node.offsetLeft + (node === element ? 0 : node.clientLeft);
+ y += node.offsetTop + (node === element ? 0 : node.clientTop);
+ }
+ x -= window.scrollX;
+ y -= window.scrollY;
+ const animation = element
+ .getAnimations()
+ .filter(a => a.effect.getKeyframes().some(k => k.translate != null))
+ .at(-1);
+ if (animation != null) {
+ const numbers = value =>
+ [...String(value).matchAll(/(-?[\\d.e+-]+)px/g)].map(m => Number(m[1]));
+ const frames = animation.effect.getKeyframes();
+ const duration = Number(animation.effect.getTiming().duration);
+ const at = Math.min(1, Math.max(0, Number(animation.currentTime) / duration));
+ let i = 0;
+ while (i < frames.length - 2 && frames[i + 1].computedOffset < at) {
+ i += 1;
+ }
+ const [x0 = 0, y0 = 0] = numbers(frames[i].translate);
+ const [x1 = 0, y1 = 0] = numbers(frames[i + 1].translate);
+ const span = frames[i + 1].computedOffset - frames[i].computedOffset;
+ const f = span > 0 ? (at - frames[i].computedOffset) / span : 1;
+ x += x0 + (x1 - x0) * f;
+ y += y0 + (y1 - y0) * f;
+ }
+ return new DOMRect(x, y, element.offsetWidth, element.offsetHeight);
+};
+const parseInset = (value, box) => {
+ const out = {top: 0, right: 0, bottom: 0, left: 0};
+ const match = /^inset\\(([^)]*?)(?:\\s+round\\s[^)]*)?\\)$/.exec(
+ String(value ?? ''),
+ );
+ if (match == null) {
+ return out;
+ }
+ const [t, r = t, b = t, l = r] = match[1].trim().split(/\\s+/);
+ const px = (value, size) =>
+ value.endsWith('%') ? (parseFloat(value) / 100) * size : parseFloat(value);
+ return {
+ top: px(t, box.height),
+ right: px(r, box.width),
+ bottom: px(b, box.height),
+ left: px(l, box.width),
+ };
+};
+window.computedInsetOf = element =>
+ parseInset(getComputedStyle(element).clipPath, element.getBoundingClientRect());
+window.insetOf = element => {
+ const box = element.getBoundingClientRect();
+ const animation = element
+ .getAnimations()
+ .filter(a => a.effect.getKeyframes().some(k => k.clipPath != null))
+ .at(-1);
+ if (animation == null) {
+ return window.computedInsetOf(element);
+ }
+ const frames = animation.effect.getKeyframes();
+ const duration = Number(animation.effect.getTiming().duration);
+ const at = Math.min(1, Math.max(0, Number(animation.currentTime) / duration));
+ let i = 0;
+ while (i < frames.length - 2 && frames[i + 1].computedOffset < at) {
+ i += 1;
+ }
+ const a = parseInset(frames[i].clipPath, box);
+ const b = parseInset(frames[i + 1].clipPath, box);
+ const span = frames[i + 1].computedOffset - frames[i].computedOffset;
+ const f = span > 0 ? (at - frames[i].computedOffset) / span : 1;
+ return {
+ top: a.top + (b.top - a.top) * f,
+ right: a.right + (b.right - a.right) * f,
+ bottom: a.bottom + (b.bottom - a.bottom) * f,
+ left: a.left + (b.left - a.left) * f,
+ };
+};
window.motionOf = selector => {
const element = document.querySelector(selector);
return element.getAnimations({subtree: false}).map(animation => {
@@ -1597,6 +1733,535 @@ test.describe('spec:AST-105 FR2–FR4', () => {
});
});
+/** One frame of an edge reveal: the moving edge, the content beside it. */
+interface EdgeFrame {
+ phase: string;
+ /** Where the element's moving edge shows (its box less its clip). */
+ edge: number;
+ /** Where the facing edge of the content beside it shows. */
+ beside: number;
+ /** How much of the element shows along the edge's axis. */
+ shown: number;
+ /**
+ * How far the engine's evaluated clip and rect stand from the keyframes'
+ * values at the animations' current time, both sides summed.
+ */
+ skew: number;
+}
+
+/**
+ * The edge proofs read both sides of a ride on the module's clock. Chromium
+ * evaluates exactly that (its skew stays under half a px); WebKit's skew is
+ * reported, an engine clock the module cannot reach.
+ */
+function reportSkew(frames: EdgeFrame[], browserName: string) {
+ const skew = Math.max(0, ...frames.map(f => f.skew));
+ test.info().annotations.push({
+ type: 'evaluation skew (px)',
+ description: String(skew),
+ });
+ if (browserName === 'chromium') {
+ expect(skew).toBeLessThan(0.5);
+ }
+}
+
+test.describe('spec:AST-105 FR9 (the edge reveal)', () => {
+ test('a block-start reveal and conceal, in a column that stacks from its end, keep the moving edge on the content before it on every frame, and the conceal leaves the element where it shows', async ({
+ page,
+ browserName,
+ }) => {
+ await open(
+ page,
+ ``,
+ );
+ const result = await page.evaluate(async () => {
+ const AL = window.AnimatedLayout;
+ const area = document.querySelector('#area');
+ const content = document.querySelector('#content') as HTMLElement;
+ const a = document.querySelector('#a') as HTMLElement;
+ const layout = AL.createAnimatedLayout(() => area);
+ const frames: EdgeFrame[] = [];
+ const bottoms: number[] = [];
+ const read = (phase: string) => {
+ const box = content.getBoundingClientRect();
+ const inset = window.insetOf(content);
+ const beside = window.glideBoxOf(a);
+ frames.push({
+ phase,
+ edge: box.top + inset.top,
+ beside: beside.bottom,
+ shown: box.height - inset.top - inset.bottom,
+ skew:
+ Math.abs(window.computedInsetOf(content).top - inset.top) +
+ Math.abs(a.getBoundingClientRect().top - beside.top),
+ });
+ if (phase === 'closing') {
+ bottoms.push(box.bottom);
+ }
+ };
+ const frame = async () =>
+ new Promise(resolve => {
+ requestAnimationFrame(() => resolve());
+ });
+ await frame();
+ // Shown: the content before it glides up out of its way, and its top
+ // edge comes down with it.
+ const opening = AL.reportLayoutChange(layout, () => content);
+ opening.measureBefore();
+ content.style.display = 'block';
+ opening.animate();
+ AL.playLayoutChange(layout, content, {edge: 'block-start'});
+ for (let i = 0; i < 60; i++) {
+ await frame();
+ read('opening');
+ }
+ const openBottom = content.getBoundingClientRect().bottom;
+ // The gap the layout leaves between them at rest (the rows' margins).
+ const restGap =
+ content.getBoundingClientRect().top - a.getBoundingClientRect().bottom;
+ // Hidden again: the content before it glides back down over it, its
+ // top edge on that content, while it stays where it shows.
+ const closing = AL.reportLayoutChange(layout, () => content);
+ closing.measureBefore();
+ closing.animate();
+ const isHeld = AL.holdLayoutExit(layout, content, () => {}, {
+ edge: 'block-start',
+ });
+ for (let i = 0; i < 60; i++) {
+ await frame();
+ read('closing');
+ }
+ return {frames, bottoms, openBottom, restGap, isHeld};
+ });
+ expect(result.isHeld).toBe(true);
+ const shown = result.frames.filter(f => f.shown > 0.5);
+ expect(shown.filter(f => f.phase === 'opening').length).toBeGreaterThan(4);
+ expect(shown.filter(f => f.phase === 'closing').length).toBeGreaterThan(4);
+ for (const f of shown) {
+ expect(
+ Math.abs(f.edge - f.beside - result.restGap),
+ JSON.stringify({...f, restGap: result.restGap}),
+ ).toBeLessThan(1.5);
+ }
+ // It stays where it shows while it conceals: no jump by its own size.
+ for (const bottom of result.bottoms) {
+ expect(Math.abs(bottom - result.openBottom)).toBeLessThan(1);
+ }
+ reportSkew(shown, browserName);
+ });
+
+ test('a block-end reveal keeps its edge on the content after it on every frame, and a conceal that reverses it starts from what it shows', async ({
+ page,
+ browserName,
+ }) => {
+ await open(
+ page,
+ ``,
+ );
+ const frames = await page.evaluate(async () => {
+ const area = document.querySelector('#area');
+ const content = document.querySelector('#content') as HTMLElement;
+ const a = document.querySelector('#a') as HTMLElement;
+ const layout = window.AnimatedLayout.createAnimatedLayout(() => area);
+ const out: EdgeFrame[] = [];
+ const read = (phase: string) => {
+ const box = content.getBoundingClientRect();
+ const inset = window.insetOf(content);
+ out.push({
+ phase,
+ edge: box.bottom - inset.bottom,
+ beside: window.glideBoxOf(a).top,
+ shown: box.height - inset.top - inset.bottom,
+ skew:
+ Math.abs(window.computedInsetOf(content).bottom - inset.bottom) +
+ Math.abs(a.getBoundingClientRect().top - window.glideBoxOf(a).top),
+ });
+ };
+ const frame = async () =>
+ new Promise(resolve => {
+ requestAnimationFrame(() => resolve());
+ });
+ await frame();
+ const opening = window.AnimatedLayout.reportLayoutChange(
+ layout,
+ () => content,
+ );
+ opening.measureBefore();
+ content.style.display = '';
+ opening.animate();
+ window.AnimatedLayout.playLayoutChange(layout, content);
+ for (let i = 0; i < 2; i++) {
+ await frame();
+ read('opening');
+ }
+ // Closed again 120 ms into the reveal, as the page shows it then.
+ window.holdAt(120);
+ read('reversed');
+ const closing = window.AnimatedLayout.reportLayoutChange(
+ layout,
+ () => content,
+ );
+ closing.measureBefore();
+ closing.animate();
+ window.AnimatedLayout.holdLayoutExit(layout, content, () => {});
+ await new Promise(resolve => {
+ queueMicrotask(resolve);
+ });
+ // Where the conceal starts, on its own clock, before any frame.
+ read('restart');
+ window.resumeAll();
+ for (let i = 0; i < 60; i++) {
+ await frame();
+ read('closing');
+ }
+ return out;
+ });
+ const shown = frames.filter(f => f.shown > 0.5);
+ expect(shown.length).toBeGreaterThan(10);
+ // Wherever the row after it shows, the content shows down to it.
+ for (const f of shown) {
+ expect(Math.abs(f.beside - f.edge), JSON.stringify(f)).toBeLessThan(1.5);
+ }
+ reportSkew(shown, browserName);
+ // It closes from what it showed: no jump back to its whole height.
+ const reversed = frames.find(f => f.phase === 'reversed') as EdgeFrame;
+ const restart = frames.find(f => f.phase === 'restart') as EdgeFrame;
+ expect(reversed.shown).toBeGreaterThan(5);
+ expect(reversed.shown).toBeLessThan(75);
+ expect(Math.abs(restart.shown - reversed.shown)).toBeLessThan(1.5);
+ });
+
+ for (const direction of ['ltr', 'rtl'] as const) {
+ test(`an inline-end reveal and conceal keep its edge on the item after it on every frame (${direction})`, async ({
+ page,
+ browserName,
+ }) => {
+ await open(
+ page,
+ ``,
+ );
+ const frames = await page.evaluate(async rtl => {
+ const area = document.querySelector('#area');
+ const content = document.querySelector('#content') as HTMLElement;
+ const a = document.querySelector('#a') as HTMLElement;
+ const layout = window.AnimatedLayout.createAnimatedLayout(() => area);
+ const out: EdgeFrame[] = [];
+ const read = (phase: string) => {
+ const box = content.getBoundingClientRect();
+ const next = window.glideBoxOf(a);
+ const inset = window.insetOf(content);
+ const computed = window.computedInsetOf(content);
+ out.push({
+ phase,
+ edge: rtl ? box.left + inset.left : box.right - inset.right,
+ beside: rtl ? next.right : next.left,
+ shown: box.width - inset.left - inset.right,
+ skew:
+ Math.abs(computed.left - inset.left) +
+ Math.abs(computed.right - inset.right) +
+ Math.abs(a.getBoundingClientRect().left - next.left),
+ });
+ };
+ const frame = async () =>
+ new Promise(resolve => {
+ requestAnimationFrame(() => resolve());
+ });
+ await frame();
+ const opening = window.AnimatedLayout.reportLayoutChange(
+ layout,
+ () => content,
+ );
+ opening.measureBefore();
+ content.style.display = '';
+ opening.animate();
+ window.AnimatedLayout.playLayoutChange(layout, content, {
+ edge: 'inline-end',
+ });
+ for (let i = 0; i < 5; i++) {
+ await frame();
+ read('opening');
+ }
+ await new Promise(resolve => {
+ requestAnimationFrame(() => {
+ read('reversed');
+ const closing = window.AnimatedLayout.reportLayoutChange(
+ layout,
+ () => content,
+ );
+ closing.measureBefore();
+ closing.animate();
+ window.AnimatedLayout.holdLayoutExit(layout, content, () => {}, {
+ edge: 'inline-end',
+ });
+ // Where the conceal starts, on its own clock, once it rides.
+ queueMicrotask(() => {
+ read('restart');
+ resolve();
+ });
+ });
+ });
+ for (let i = 0; i < 60; i++) {
+ await frame();
+ read('closing');
+ }
+ return out;
+ }, direction === 'rtl');
+ const shown = frames.filter(f => f.shown > 0.5);
+ expect(shown.length).toBeGreaterThan(10);
+ for (const f of shown) {
+ expect(Math.abs(f.beside - f.edge), JSON.stringify(f)).toBeLessThan(
+ 1.5,
+ );
+ }
+ reportSkew(shown, browserName);
+ const reversed = frames.find(f => f.phase === 'reversed') as EdgeFrame;
+ const restart = frames.find(f => f.phase === 'restart') as EdgeFrame;
+ expect(Math.abs(restart.shown - reversed.shown)).toBeLessThan(1.5);
+ });
+ }
+
+ for (const direction of ['ltr', 'rtl'] as const) {
+ test(`the two-state form holds the old state as one copy and keeps the edge on the column it rides, a reversal included (${direction})`, async ({
+ page,
+ browserName,
+ }) => {
+ await open(
+ page,
+ ``,
+ '#panel.narrow { width: 48px !important; }',
+ );
+ const result = await page.evaluate(async rtl => {
+ const area = document.querySelector('#area');
+ const row = document.querySelector('#row') as HTMLElement;
+ const panel = document.querySelector('#panel') as HTMLElement;
+ const column = document.querySelector('#column') as HTMLElement;
+ const AL = window.AnimatedLayout;
+ const layout = AL.createAnimatedLayout(() => area);
+ const frames: EdgeFrame[] = [];
+ let copies = 0;
+ const read = (phase: string, element: Element) => {
+ const box = element.getBoundingClientRect();
+ const next = window.glideBoxOf(column);
+ const inset = window.insetOf(element);
+ const computed = window.computedInsetOf(element);
+ frames.push({
+ phase,
+ edge: rtl ? box.left + inset.left : box.right - inset.right,
+ beside: rtl ? next.right : next.left,
+ shown: box.width - inset.left - inset.right,
+ skew:
+ Math.abs(computed.left - inset.left) +
+ Math.abs(computed.right - inset.right) +
+ Math.abs(column.getBoundingClientRect().left - next.left),
+ });
+ };
+ const copyOf = () =>
+ row.querySelector(
+ ':scope > [inert][aria-hidden="true"]',
+ );
+ const frame = async () =>
+ new Promise(resolve => {
+ requestAnimationFrame(() => resolve());
+ });
+ await frame();
+ // Collapse: the old, wide panel is held and covered on its edge.
+ let hold = AL.holdLayoutEdge(layout, panel, {edge: 'inline-end'});
+ let report = AL.reportLayoutChange(layout, () => panel);
+ report.measureBefore();
+ panel.classList.add('narrow');
+ report.animate();
+ const motion = AL.playLayoutEdge(hold!, panel, layout, {
+ edge: 'inline-end',
+ rideWith: column,
+ });
+ for (let i = 0; i < 2; i++) {
+ await frame();
+ const copy = copyOf();
+ copies = Math.max(copies, copy == null ? 0 : 1);
+ if (copy != null) {
+ read('collapsing', copy);
+ }
+ }
+ // Expanded again 120 ms into the collapse, from the width it shows
+ // then.
+ window.holdAt(120);
+ const copy = copyOf();
+ copies = Math.max(copies, copy == null ? 0 : 1);
+ if (copy != null) {
+ read('collapsing', copy);
+ }
+ const shown = motion.shown()?.extent ?? null;
+ motion.end();
+ hold = AL.holdLayoutEdge(layout, panel, {
+ edge: 'inline-end',
+ shown,
+ });
+ report = AL.reportLayoutChange(layout, () => panel);
+ report.measureBefore();
+ panel.classList.remove('narrow');
+ report.animate();
+ AL.playLayoutEdge(hold!, panel, layout, {
+ edge: 'inline-end',
+ rideWith: column,
+ });
+ await new Promise(resolve => {
+ queueMicrotask(resolve);
+ });
+ window.resumeAll();
+ for (let i = 0; i < 60; i++) {
+ await frame();
+ read('expanding', panel);
+ }
+ return {frames, copies, left: row.querySelectorAll('[inert]').length};
+ }, direction === 'rtl');
+ expect(result.copies).toBe(1);
+ // The copy is gone once the motion ends.
+ expect(result.left).toBe(0);
+ const moving = result.frames.filter(
+ f => f.shown > 48.5 && f.shown < 259.5,
+ );
+ expect(moving.length).toBeGreaterThan(5);
+ for (const f of moving) {
+ expect(Math.abs(f.beside - f.edge), JSON.stringify(f)).toBeLessThan(
+ 1.5,
+ );
+ }
+ reportSkew(moving, browserName);
+ // The expand starts where the collapse got to.
+ const lastCollapse = result.frames
+ .filter(f => f.phase === 'collapsing')
+ .at(-1) as EdgeFrame;
+ const firstExpand = result.frames.find(
+ f => f.phase === 'expanding',
+ ) as EdgeFrame;
+ expect(Math.abs(firstExpand.shown - lastCollapse.shown)).toBeLessThan(30);
+ });
+ }
+
+ for (const [side, direction, collapsed] of [
+ ['start', 'ltr', 48],
+ ['start', 'rtl', 0],
+ ['end', 'ltr', 48],
+ ] as const) {
+ test(`a resized pane with no copy collapses and opens by the edge facing its handle, that edge on the handle on every frame, a reversal included (${side} pane, ${direction}, to ${collapsed} px)`, async ({
+ page,
+ browserName,
+ }) => {
+ const pane = ``;
+ const grip = ``;
+ const content = `The page`;
+ await open(
+ page,
+ `${
+ side === 'start' ? pane + grip + content : content + grip + pane
+ }
Row ${i}
`,
+ ).join('');
+ document.body.innerHTML = `
+
+
Shipping details
${rows}
+
+
${
+ side === 'start' ? pane + handleEl + content : content + handleEl + pane
+ }
+