This commit is contained in:
@@ -43,14 +43,16 @@ Bookの閲覧テストはJavaScript無効、ランディングのテストは有
|
||||
|
||||
### ランディング
|
||||
|
||||
トップはSVGのルートマークから始まります。コンテの2はホバー専用の「Tap」表現で、ポインタを離すと消え、待っていても本編には進みません。クリック・ホイール／タッチスクロール・キー入力のいずれか一回で、3〜6を約5.6秒で最後まで再生します。ホバーは再生の前提ではなく、追加入力で段階を進めたり、再生を重ねたりもしません。Escapeまたは画面右下のスキップで直ちにデモへ移れます。ブラウザの修飾キー付きショートカットは妨げません。
|
||||
トップはSVGのルートマークから始まります。コンテの2はホバー専用の「Tap」表現で、ポインタを離すと消え、待っていても本編には進みません。クリック・ホイール／タッチスクロール・キー入力のいずれか一回で、3〜6を約6.9秒で最後まで再生します。ホバーは再生の前提ではなく、追加入力で段階を進めたり、再生を重ねたりもしません。Escapeまたは画面右下のスキップで直ちにデモへ移れます。ブラウザの修飾キー付きショートカットは妨げません。
|
||||
|
||||
コンテ4では、大きなルートを左へ移し、円周の上端から右の接線へ文字を流しながら横の幹を伸ばします。円の半径・曲率は変えません。幹を伸ばす区間を見せてからルートと幹を縮小・移動し、幹の先端を罫線`──┐`の角へ接続して枝を展開します。
|
||||
|
||||
ツリーとパネルはASCII glitchから確定した文字・罫線へ収束します。ノイズは局所的なセル置換を10Hzで更新し、全画面の点滅は使いません。空白・改行・日本語は保持し、完了／スキップ時には元の文字列を完全に復元します。
|
||||
|
||||
- `src/components/Landing.astro` — SVGと、最終的に操作するツリー／パネルの静的HTML。
|
||||
- `src/components/BoxFrame.astro` — `┌─┐`・`│`・`└─┘`によるText View／Call resultの枠。CSS borderやSVGで枠を代用せず、幅・高さに合わせて罫線素片をクリップします。JavaScript無効時も表示されます。
|
||||
- `src/lib/landing-ascii.mjs` — セル幅を保つ決定的なglitch文字置換。
|
||||
- `src/scripts/landing.ts` — 単一の`requestAnimationFrame`時計、役割別の速度曲線、等弧長で円をほどくSVG path、ツリー操作。
|
||||
- `src/scripts/landing.ts` — 単一の`requestAnimationFrame`時計、役割別の速度曲線、固定円周＋上端接線の文字経路、幹の伸長から罫線への接続、ツリー操作。
|
||||
- `src/lib/landing-demo.ts` — ブラウザ内だけで使うサンプル。外部Hostへの接続、変更操作、通信はありません。Object signatureとInterface signatureを分け、本文は明示的なCallで表示します。
|
||||
- `src/styles/landing.css` — トップ全体を14pxのmonoフォント・24pxの行高で構成。フレーム幅を4ch単位に揃え、列・ガター・パディングもセルと行の整数倍にします。ツリーはSVGの線ではなく`├──`・`└──`・`│`などの罫線素片を使い、JavaScript無効時も同じ構造を表示します。モバイルはツリーとパネルを縦に配置します。
|
||||
|
||||
|
||||
@@ -8,6 +8,7 @@ import BoxFrame from './BoxFrame.astro';
|
||||
<div class="intro-art" aria-hidden="true">
|
||||
<div class="tap-stream tap-stream-a"><span>Tap → Tap → Tap → Tap → Tap → </span></div>
|
||||
<div class="tap-stream tap-stream-b"><span>Tap → Tap → Tap → Tap → Tap → </span></div>
|
||||
<svg class="intro-trunk" aria-hidden="true" focusable="false"><path class="trunk-line" d="M0 0H0" /></svg>
|
||||
<svg class="orbit" viewBox="-300 -300 600 600" focusable="false">
|
||||
<defs><path id="welcome-orbit" d="M0 -180 C99 -180 180 -99 180 0 C180 99 99 180 0 180 C-99 180 -180 99 -180 0 C-180 -99 -99 -180 0 -180" /></defs>
|
||||
<text><textPath href="#welcome-orbit" textLength="1080" lengthAdjust="spacing">WELCOME TO WIP / DISCOVERY / UNDERSTANDING / ACTION / </textPath></text>
|
||||
@@ -40,7 +41,7 @@ import BoxFrame from './BoxFrame.astro';
|
||||
aria-selected={object.path === initialObject.path ? 'true' : 'false'}
|
||||
tabindex={object.path === initialObject.path ? 0 : -1} disabled
|
||||
>
|
||||
{root ? <svg class="root-vector" viewBox="0 0 48 64" aria-hidden="true" focusable="false"><path class="root-shape" d="M31 4H41L17 60H7Z" /><path class="root-tether" d="M29 32H64" pathLength="1" vector-effect="non-scaling-stroke" /></svg> : <><span class="node-label">{object.name}</span>{children.length > 0 && <span class="node-indicator" aria-hidden="true">−</span>}</>}
|
||||
{root ? <svg class="root-vector" viewBox="0 0 48 64" aria-hidden="true" focusable="false"><path class="root-shape" d="M31 4H41L17 60H7Z" /></svg> : <><span class="node-label">{object.name}</span>{children.length > 0 && <span class="node-indicator" aria-hidden="true">−</span>}</>}
|
||||
</button>
|
||||
{root && <><span class="root-wire" aria-hidden="true">──┐</span><span class="root-caption" data-reveal>worldspace</span></>}
|
||||
</div>;
|
||||
|
||||
+57
-47
@@ -20,8 +20,8 @@ function bezier(x1: number, y1: number, x2: number, y2: number) {
|
||||
const timing = {
|
||||
// Mass leaves the centre horizontally; a longer deceleration seats the root.
|
||||
travel: bezier(.58, 0, .22, 1),
|
||||
// Curvature releases after travel has begun, rather than a simultaneous zoom.
|
||||
unroll: bezier(.55, 0, .3, 1),
|
||||
// Typography accelerates along a fixed track, not a deforming circle.
|
||||
release: bezier(.55, 0, .3, 1),
|
||||
scale: bezier(.42, 0, .18, 1),
|
||||
// The leading edge slows as it reaches a branch/node connection.
|
||||
trace: bezier(.22, .3, .25, 1),
|
||||
@@ -29,20 +29,12 @@ const timing = {
|
||||
const mix = (a: number, b: number, value: number) => a + (b - a) * value;
|
||||
// Scene 2 is an independent hover affordance. Playback begins at scene 3.
|
||||
const playbackOffset = 620;
|
||||
const duration = 6200 - playbackOffset;
|
||||
// Preserve the arc length while reducing curvature. Unlike interpolating arbitrary
|
||||
// Bézier control points, this cannot fold or bunch the letters during unrolling.
|
||||
function unrolledOrbit(opening: number): string {
|
||||
const x = mix(-180, -150, opening);
|
||||
if (opening > .999) return `M${x} 0 H${x + 360 * Math.PI}`;
|
||||
const radius = 180 / (1 - opening);
|
||||
const tangent = mix(-Math.PI / 2, 0, opening);
|
||||
const point = (fraction: number) => {
|
||||
const angle = tangent + Math.PI * 2 * (1 - opening) * fraction;
|
||||
return `${x + radius * (Math.sin(angle) - Math.sin(tangent))} ${radius * (Math.cos(tangent) - Math.cos(angle))}`;
|
||||
};
|
||||
return `M${x} 0 A${radius} ${radius} 0 0 1 ${point(.5)} A${radius} ${radius} 0 0 1 ${point(1)}`;
|
||||
}
|
||||
const duration = 7500 - playbackOffset;
|
||||
const orbitRadius = 180;
|
||||
const circumference = 2 * Math.PI * orbitRadius;
|
||||
// The clockwise circle ends at its top, tangent to a rightward straight line.
|
||||
// Scene 4 feeds the text down this rail; the circle's geometry never changes.
|
||||
const circularTrack = 'M0 -180 A180 180 0 1 1 0 180 A180 180 0 1 1 0 -180';
|
||||
|
||||
export function initLanding() {
|
||||
const element = document.querySelector<HTMLElement>('[data-landing-stage]');
|
||||
@@ -52,7 +44,7 @@ export function initLanding() {
|
||||
const motion = matchMedia('(prefers-reduced-motion: reduce)');
|
||||
const get = <T extends Element = HTMLElement>(selector: string) => stage.querySelector<T>(selector)!;
|
||||
const root = get<HTMLButtonElement>('.root-mark');
|
||||
const tether = get<SVGPathElement>('.root-tether');
|
||||
const trunk = get<SVGPathElement>('.trunk-line');
|
||||
const slot = get('.root-slot');
|
||||
const tree = get('.demo-tree');
|
||||
const nodes = [...stage.querySelectorAll<HTMLButtonElement>('.demo-node')];
|
||||
@@ -81,15 +73,15 @@ export function initLanding() {
|
||||
const collapsed = new Set<string>();
|
||||
const panels = [...stage.querySelectorAll<HTMLElement>('.ascii-panel')];
|
||||
const glitchTargets = [...stage.querySelectorAll<HTMLElement>([
|
||||
'.branch-prefix', '.root-wire', '.node-label', '.box-fill', '.box-column', '.box-corner',
|
||||
'.branch-prefix', '.node-label', '.box-fill', '.box-column', '.box-corner',
|
||||
'.panel-title h3', '.panel-title > span', '[data-object-signature]', '[data-interface-signature]',
|
||||
'[data-target]', '[data-operation]', '.result-label > span', '[data-result]',
|
||||
].join(','))].map((element, seed) => {
|
||||
const panel = element.closest('.ascii-panel');
|
||||
const row = element.closest('.node-row');
|
||||
const index = rows.indexOf(row as HTMLElement);
|
||||
const start = panel ? (panel.classList.contains('call-panel') ? 5200 : 5020)
|
||||
: element === rootWire ? 4140 : 4140 + Math.max(0, index - 1) * 85;
|
||||
const start = panel ? (panel.classList.contains('call-panel') ? 6500 : 6320)
|
||||
: 5450 + Math.max(0, index - 1) * 85;
|
||||
return { element, text: element.textContent ?? '', start, duration: panel ? 850 : 580, seed };
|
||||
});
|
||||
let lastGlitchFrame = -1;
|
||||
@@ -104,7 +96,7 @@ export function initLanding() {
|
||||
target.element.textContent = glitchText(target.text, value, frame, target.seed);
|
||||
}
|
||||
panels.forEach((panel) => {
|
||||
const start = panel.classList.contains('call-panel') ? 5200 : 5020;
|
||||
const start = panel.classList.contains('call-panel') ? 6500 : 6320;
|
||||
panel.toggleAttribute('data-glitching', time >= start && time < start + 850);
|
||||
});
|
||||
}
|
||||
@@ -209,9 +201,7 @@ export function initLanding() {
|
||||
delete stage.dataset.hover;
|
||||
restoreGlitch();
|
||||
root.style.removeProperty('transform');
|
||||
tether.style.removeProperty('stroke-dasharray');
|
||||
tether.style.removeProperty('stroke-dashoffset');
|
||||
tether.style.removeProperty('opacity');
|
||||
trunk.style.opacity = '0';
|
||||
root.setAttribute('aria-label', 'ルート /');
|
||||
invitation.style.removeProperty('opacity');
|
||||
nodes.forEach((node) => {
|
||||
@@ -238,49 +228,69 @@ export function initLanding() {
|
||||
// One clock owns all phases. Inputs cannot advance, restart, or stack timelines.
|
||||
function render(time: number) {
|
||||
const target = slot.getBoundingClientRect();
|
||||
const wireTarget = rootWire.getBoundingClientRect();
|
||||
const endX = target.left + root.offsetWidth / 2;
|
||||
const endY = target.bottom - root.offsetHeight / 2;
|
||||
const travel = timing.travel(progress(time, 2320, 2330));
|
||||
const remaining = 1 - travel;
|
||||
// A continuous spatial Bézier: depart left, arrive vertically. The orbit is
|
||||
// attached to this very same moving origin, not animated on a separate track.
|
||||
const centreX = remaining ** 3 * innerWidth / 2
|
||||
+ 3 * remaining ** 2 * travel * (innerWidth * .26)
|
||||
+ 3 * remaining * travel ** 2 * endX + travel ** 3 * endX;
|
||||
const orbitScale = parseFloat(getComputedStyle(orbit).width) / 600;
|
||||
const radius = orbitRadius * orbitScale;
|
||||
const stagedX = Math.max(innerWidth * .3, radius + 16);
|
||||
const shiftedX = mix(innerWidth / 2, stagedX, timing.travel(progress(time, 2320, 980)));
|
||||
// First slide the large composition left and grow its trunk. Only after
|
||||
// that readable beat do we dock and shrink it into the terminal grid.
|
||||
const dock = timing.travel(progress(time, 4100, 1350));
|
||||
const remaining = 1 - dock;
|
||||
const centreX = remaining ** 3 * shiftedX
|
||||
+ 3 * remaining ** 2 * dock * mix(shiftedX, endX, .3)
|
||||
+ 3 * remaining * dock ** 2 * endX + dock ** 3 * endX;
|
||||
const centreY = remaining ** 3 * innerHeight / 2
|
||||
+ 3 * remaining ** 2 * travel * innerHeight / 2
|
||||
+ 3 * remaining * travel ** 2 * (endY + innerHeight * .15) + travel ** 3 * endY;
|
||||
const scale = mix(7.2, 1, timing.scale(progress(time, 3120, 1530)));
|
||||
+ 3 * remaining ** 2 * dock * innerHeight / 2
|
||||
+ 3 * remaining * dock ** 2 * mix(endY, innerHeight / 2, .2) + dock ** 3 * endY;
|
||||
const scale = mix(7.2, 1, timing.scale(progress(time, 4100, 1350)));
|
||||
root.style.transform = `translate3d(${centreX - endX}px, ${centreY - endY}px, 0) scale(${scale})`;
|
||||
tether.style.strokeDasharray = '1';
|
||||
tether.style.strokeDashoffset = String(1 - timing.trace(progress(time, 3260, 980)));
|
||||
tether.style.opacity = String(1 - progress(time, 4200, 450));
|
||||
|
||||
const extension = timing.trace(progress(time, 2680, 1000));
|
||||
const longLength = Math.max(0, innerWidth * .92 - stagedX - radius);
|
||||
const startX = centreX + mix(radius, wireTarget.left - endX, dock);
|
||||
const tipX = centreX + mix(radius + longLength * extension, wireTarget.right - wireTarget.width / 6 - endX, dock);
|
||||
const lineY = centreY + mix(0, wireTarget.top + wireTarget.height / 2 - endY, dock);
|
||||
// Crossfade only once both geometries coincide: the SVG tip becomes the
|
||||
// corner of ──┐, then the literal box-drawing branches grow from that joint.
|
||||
const handoff = progress(time, 5480, 140);
|
||||
trunk.setAttribute('d', `M${startX} ${lineY} H${tipX}`);
|
||||
trunk.style.strokeWidth = String(mix(10, 1, dock));
|
||||
const ink = [[32, 142], [34, 152], [31, 134]].map(([from, to]) => Math.round(mix(from, to, dock)));
|
||||
trunk.style.stroke = `rgb(${ink.join(',')})`;
|
||||
trunk.style.opacity = time < 2680 ? '0' : String(1 - handoff);
|
||||
invitation.style.opacity = String(1 - progress(time, playbackOffset, 280));
|
||||
const opening = timing.unroll(progress(time, 2530, 1350));
|
||||
orbitPath.setAttribute('d', unrolledOrbit(opening));
|
||||
orbit.style.opacity = String(progress(time, 620, 480) * (1 - progress(time, 3500, 550)));
|
||||
const turn = mix(-36, 2, progress(time, 620, 2100)) * (1 - opening);
|
||||
|
||||
const release = timing.release(progress(time, 2460, 1640));
|
||||
const exitLength = innerWidth / orbitScale + circumference;
|
||||
orbitPath.setAttribute('d', circularTrack + (time >= 2460 ? ` H${exitLength}` : ''));
|
||||
orbit.style.opacity = String(progress(time, 620, 480));
|
||||
// Rotation comes to rest before release. The exit is always horizontal
|
||||
// at the circle's top, never the expanding-radius curve used previously.
|
||||
const turn = mix(-36, 0, progress(time, 620, 1700));
|
||||
orbit.style.transform = `translate(calc(-50% + ${centreX - innerWidth / 2}px), calc(-50% + ${centreY - innerHeight / 2}px)) rotate(${turn}deg)`;
|
||||
textPath.setAttribute('startOffset', String(12 + opening * 650));
|
||||
rootWire.style.opacity = String(progress(time, 4140, 320));
|
||||
textPath.setAttribute('startOffset', String(12 + release * (circumference + exitLength)));
|
||||
rootWire.style.opacity = String(handoff);
|
||||
branches.forEach((wire, index) => {
|
||||
const value = timing.trace(progress(time, 4140 + index * 85, 520));
|
||||
const value = timing.trace(progress(time, 5450 + index * 85, 520));
|
||||
wire.style.opacity = String(clamp(value * 4));
|
||||
wire.style.clipPath = `inset(0 ${(1 - value) * 100}% 0 0)`;
|
||||
});
|
||||
nodes.slice(1).forEach((node, index) => {
|
||||
// Labels resolve where the growing line arrives; they do not slide in.
|
||||
node.style.opacity = String(progress(time, 4490 + index * 85, 220));
|
||||
node.style.opacity = String(progress(time, 5790 + index * 85, 220));
|
||||
});
|
||||
reveals.forEach((element, index) => {
|
||||
const isPanel = element.classList.contains('ascii-panel');
|
||||
const start = isPanel ? 5020 + (element.classList.contains('call-panel') ? 180 : 0) : 4680 + index * 55;
|
||||
const start = isPanel ? 6320 + (element.classList.contains('call-panel') ? 180 : 0) : 5980 + index * 55;
|
||||
const value = progress(time, start, isPanel ? 850 : 380);
|
||||
// Noise resolves into the panel, not a wipe or a sliding card.
|
||||
element.style.opacity = String(isPanel ? clamp(value * 6) : value);
|
||||
});
|
||||
renderGlitch(time);
|
||||
stage.dataset.phase = time < 2530 ? 'orbit' : time < 4080 ? 'unfold' : time < 5020 ? 'tree' : 'panels';
|
||||
stage.dataset.phase = time < 2460 ? 'orbit' : time < 2680 ? 'unfold' : time < 4100 ? 'extend' : time < 6320 ? 'tree' : 'panels';
|
||||
}
|
||||
|
||||
function tick(now: number) {
|
||||
|
||||
@@ -48,8 +48,6 @@ html[data-landing] .landing-page .site-header { opacity: 0; }
|
||||
.root-mark { width: 3ch; height: var(--row); display: block; padding: 0; background: transparent !important; transform-origin: center; z-index: 25; transition: none; }
|
||||
.root-vector { display: block; width: 100%; height: 100%; overflow: visible; }
|
||||
.root-shape { fill: currentColor; }
|
||||
.root-tether { fill: none; stroke: #8e9886; stroke-width: 1; opacity: 0; }
|
||||
html[data-landing="boot"] .root-tether { stroke-dasharray: 1; stroke-dashoffset: 1; }
|
||||
.root-mark[aria-selected="true"] { color: #4e752d; }
|
||||
.root-caption { margin-left: 2ch; height: var(--row); color: var(--muted); }
|
||||
.ascii-panel { position: relative; min-width: 0; padding: calc(2 * var(--row)) 2ch; }
|
||||
@@ -120,6 +118,8 @@ html[data-landing] .root-mark { color: var(--ink); }
|
||||
html[data-landing="boot"] .root-mark { position: fixed; left: calc(50vw - 1.5ch); top: calc(50svh - var(--row) / 2); transform: scale(7.2); }
|
||||
html[data-landing] .intro-art { display: block; position: fixed; z-index: 10; width: 100%; height: 100svh; inset: 0; pointer-events: none; }
|
||||
.orbit { position: absolute; left: 50%; top: 50%; width: min(640px, 112vw); height: min(640px, 112vw); overflow: visible; transform: translate(-50%, -50%); opacity: 0; }
|
||||
.intro-trunk { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
|
||||
.trunk-line { fill: none; stroke: var(--ink); stroke-width: 10; stroke-linecap: butt; opacity: 0; }
|
||||
.orbit text { fill: var(--ink); font: 500 17px var(--mono); letter-spacing: 1.5px; }
|
||||
.tap-stream { position: absolute; left: 50%; top: 50%; width: 200px; overflow: hidden; font: 500 10px var(--mono); letter-spacing: 2px; opacity: 0; white-space: nowrap; }
|
||||
.tap-stream-a { transform: translate(-145px, -24px) rotate(-67deg); }
|
||||
|
||||
@@ -63,16 +63,46 @@ test('storyboard phases retain one root and ignore repeated triggers', async ({
|
||||
await page.clock.runFor(1150);
|
||||
await expect(page.locator(stage)).toHaveAttribute('data-phase', 'orbit');
|
||||
const arcLength = await page.locator('#welcome-orbit').evaluate((path) => (path as SVGPathElement).getTotalLength());
|
||||
const circlePath = await page.locator('#welcome-orbit').getAttribute('d');
|
||||
await page.screenshot({ path: testInfo.outputPath('03-orbit.png') });
|
||||
await page.mouse.wheel(0, 180);
|
||||
await page.keyboard.press('ArrowDown');
|
||||
await page.mouse.click(20, 20);
|
||||
await page.clock.runFor(1430);
|
||||
await expect(page.locator(stage)).toHaveAttribute('data-phase', 'unfold');
|
||||
const unfoldingLength = await page.locator('#welcome-orbit').evaluate((path) => (path as SVGPathElement).getTotalLength());
|
||||
expect(Math.abs(unfoldingLength - arcLength)).toBeLessThan(2);
|
||||
await page.clock.runFor(1080); // Scene 4: early trunk growth, before docking.
|
||||
await expect(page.locator(stage)).toHaveAttribute('data-phase', 'extend');
|
||||
expect(await page.locator('#welcome-orbit').getAttribute('d')).toMatch(new RegExp(`^${circlePath} H`));
|
||||
const tangent = await page.locator('#welcome-orbit').evaluate((element, length) => {
|
||||
const path = element as SVGPathElement;
|
||||
const first = path.getPointAtLength(length + 40);
|
||||
const second = path.getPointAtLength(length + 80);
|
||||
return { dx: second.x - first.x, dy: second.y - first.y, y: first.y };
|
||||
}, arcLength);
|
||||
expect(tangent.dx).toBeCloseTo(40, 1);
|
||||
expect(tangent.dy).toBeCloseTo(0, 1);
|
||||
expect(tangent.y).toBeCloseTo(-180, 1);
|
||||
const earlyLength = await page.locator('.trunk-line').evaluate((path) => (path as SVGPathElement).getTotalLength());
|
||||
expect(earlyLength).toBeGreaterThan(10);
|
||||
await page.screenshot({ path: testInfo.outputPath('04-unfold.png') });
|
||||
await page.clock.runFor(1550);
|
||||
await page.clock.runFor(950); // Let the horizontal line finish extending.
|
||||
await expect(page.locator(stage)).toHaveAttribute('data-phase', 'extend');
|
||||
const extendedLength = await page.locator('.trunk-line').evaluate((path) => (path as SVGPathElement).getTotalLength());
|
||||
expect(extendedLength).toBeGreaterThan(earlyLength * 1.4);
|
||||
expect(extendedLength).toBeGreaterThan(page.viewportSize()!.width * .18);
|
||||
await expect(page.locator('.trunk-line')).toHaveCSS('stroke-width', '10px');
|
||||
const extendedRoot = await root.boundingBox();
|
||||
expect(extendedRoot!.height).toBeCloseTo(initial!.height, 0);
|
||||
expect(extendedRoot!.y).toBeCloseTo(initial!.y, 0);
|
||||
await expect(page.locator('.demo-node:not(.root-mark)').first()).toHaveCSS('opacity', '0');
|
||||
await page.screenshot({ path: testInfo.outputPath('04-trunk.png') });
|
||||
await page.clock.runFor(1700); // SVG/box-drawing handoff, with neither removed.
|
||||
const handoff = await page.evaluate(() => {
|
||||
const path = document.querySelector<SVGPathElement>('.trunk-line')!;
|
||||
const tip = path.getPointAtLength(path.getTotalLength()).matrixTransform(path.getScreenCTM()!);
|
||||
const target = document.querySelector('.root-wire')!.getBoundingClientRect();
|
||||
return Math.hypot(tip.x - (target.right - target.width / 6), tip.y - (target.top + target.height / 2));
|
||||
});
|
||||
expect(handoff).toBeLessThan(1);
|
||||
await page.clock.runFor(550);
|
||||
await expect(page.locator(stage)).toHaveAttribute('data-phase', 'tree');
|
||||
await page.screenshot({ path: testInfo.outputPath('05-tree.png') });
|
||||
await page.clock.runFor(600);
|
||||
@@ -128,7 +158,7 @@ test('skipping an active glitch restores exact text and frames', async ({ page }
|
||||
await page.keyboard.press('a');
|
||||
await expect(page.locator(stage)).toHaveAttribute('data-phase', 'orbit');
|
||||
await expect(page.locator('.tap-stream-a')).toHaveCSS('opacity', '0');
|
||||
await page.clock.runFor(4800);
|
||||
await page.clock.runFor(6100);
|
||||
await expect(page.locator('.call-panel')).toHaveAttribute('data-glitching');
|
||||
await page.keyboard.press('Escape');
|
||||
await complete(page);
|
||||
|
||||
Reference in New Issue
Block a user