@pixel-point/toolcraft 0.0.16 → 0.0.18

package/templates/starter/e2e/browser-orientation-gizmo-live-preconditions.ts

@@ -0,0 +1,86 @@
+import { expect, type Locator, type Page } from "@playwright/test";
+
+import {
+  countToolcraftControlOwnersByTarget,
+  getToolcraftControlFieldByTarget,
+} from "./browser-control-target-helpers";
+import {
+  getToolcraftBrowserProofPage,
+  type ToolcraftBrowserProofSession,
+} from "./browser-proof-session";
+
+const TOOLCRAFT_APP_ROOT_SELECTOR = '[data-slot="toolcraft-runtime-app"]';
+const RENDER_SCALE_TARGET = "canvas.renderScale";
+
+async function expectPausedPlaybackWhenPresent(page: Page): Promise<void> {
+  const root = page.locator(TOOLCRAFT_APP_ROOT_SELECTOR);
+  const play = root.getByRole("button", { name: "Play playback" });
+  const pause = root.getByRole("button", { name: "Pause playback" });
+  const playCount = await play.count();
+  const actionCount = playCount + (await pause.count());
+
+  if (actionCount === 0) return;
+
+  expect(
+    actionCount,
+    "Orientation axis-drag proof requires exactly one standard playback action.",
+  ).toBe(1);
+  expect(
+    playCount,
+    "Orientation axis-drag proof must be paused; Play playback must be visible before its baseline.",
+  ).toBe(1);
+  await expect(play).toBeVisible();
+}
+
+async function readFiniteAriaNumber(
+  slider: Locator,
+  name: "aria-valuemax" | "aria-valuenow",
+): Promise<number> {
+  const raw = await slider.getAttribute(name);
+  const value = raw === null || raw.trim() === "" ? Number.NaN : Number(raw);
+
+  expect(
+    Number.isFinite(value),
+    `Orientation axis-drag proof requires a finite ${name} on canvas.renderScale.`,
+  ).toBe(true);
+  return value;
+}
+
+async function expectMaximumRenderScaleWhenPresent(page: Page): Promise<void> {
+  const ownerCount = await countToolcraftControlOwnersByTarget(
+    page,
+    RENDER_SCALE_TARGET,
+  );
+
+  if (ownerCount === 0) return;
+
+  expect(
+    ownerCount,
+    "Orientation axis-drag proof requires exactly one canvas.renderScale owner.",
+  ).toBe(1);
+  const field = await getToolcraftControlFieldByTarget(
+    page,
+    RENDER_SCALE_TARGET,
+  );
+  const slider = field.getByRole("slider");
+  await expect(
+    slider,
+    "Orientation axis-drag proof requires one canvas.renderScale slider.",
+  ).toHaveCount(1);
+  await expect(slider).toBeVisible();
+
+  const value = await readFiniteAriaNumber(slider, "aria-valuenow");
+  const maximum = await readFiniteAriaNumber(slider, "aria-valuemax");
+  expect(
+    value,
+    "Orientation axis-drag proof requires canvas.renderScale at maximum quality before its baseline.",
+  ).toBe(maximum);
+}
+
+export async function expectToolcraftOrientationLiveDragPreconditions(
+  session: ToolcraftBrowserProofSession,
+): Promise<void> {
+  const page = await getToolcraftBrowserProofPage(session);
+  await expectPausedPlaybackWhenPresent(page);
+  await expectMaximumRenderScaleWhenPresent(page);
+}

package/templates/starter/e2e/browser-render-scale-evidence.ts

@@ -1,10 +1,11 @@
 import { expect, type Page } from "@playwright/test";
-import type { ToolcraftPerformancePath } from "@repo/toolcraft-runtime";
+import { TOOLCRAFT_CANVAS_RENDER_SCALE } from "@repo/toolcraft-runtime";
 
+import type { ToolcraftPerformancePipelinePhase } from "../src/app/test-evidence/browser-performance-contract";
 import type { ToolcraftRenderScaleState } from "../src/app/starter-acceptance";
 import { attachToolcraftBrowserRuntimeEvidence } from "./browser-runtime-evidence";
 
-type CanvasMetrics = Readonly<{
+export type ToolcraftCanvasBackingMetrics = Readonly<{
   backingHeight: number;
   backingWidth: number;
   cssHeight: number;
@@ -12,6 +13,8 @@ type CanvasMetrics = Readonly<{
   devicePixelRatio: number;
 }>;
 
+export type ToolcraftCanvasVisibleSizePolicy = "fixed" | "viewport-driven";
+
 export type ToolcraftRenderScaleStateTransition = Readonly<{
   run: () => Promise<void>;
   state: ToolcraftRenderScaleState;
@@ -19,20 +22,12 @@ export type ToolcraftRenderScaleStateTransition = Readonly<{
 
 export type ToolcraftRenderScaleBackingOptions = Readonly<{
   baselineCssSize?: Readonly<{ height: number; width: number }>;
-  state?: ToolcraftRenderScaleState | "performance";
+  state?:
+    | ToolcraftRenderScaleState
+    | "performance-baseline"
+    | `performance-${ToolcraftPerformancePipelinePhase}`;
 }>;
 
-export function isToolcraftRenderScalePerformancePath(
-  path: Pick<ToolcraftPerformancePath, "targets" | "workloadDimensions">,
-): boolean {
-  return (
-    path.targets.includes("canvas.renderScale") ||
-    path.workloadDimensions.some((dimension) =>
-      /render[-_.]?scale|resolution[-_.]?scale/iu.test(dimension),
-    )
-  );
-}
-
 function assertPositiveFiniteScale(selectedScale: number): void {
   if (!Number.isFinite(selectedScale) || selectedScale <= 0) {
     throw new Error(
@@ -64,7 +59,7 @@ export function assertToolcraftRenderScaleBackingProofConfig(
 async function readCanvasMetrics(
   page: Page,
   canvasSelector: string,
-): Promise<CanvasMetrics> {
+): Promise<ToolcraftCanvasBackingMetrics> {
   if (!canvasSelector.trim()) {
     throw new Error(
       "Toolcraft canvas backing-pixel checks require a non-empty canvas selector.",
@@ -95,8 +90,8 @@ async function readCanvasMetrics(
   });
 }
 
-function assertBackingMetrics(
-  metrics: CanvasMetrics,
+export function assertToolcraftCanvasBackingMetricsForRenderScale(
+  metrics: ToolcraftCanvasBackingMetrics,
   selectedScale: number,
   options: ToolcraftRenderScaleBackingOptions,
 ): void {
@@ -128,14 +123,16 @@ function assertBackingMetrics(
     metrics.cssWidth * metrics.devicePixelRatio * selectedScale;
   const expectedHeight =
     metrics.cssHeight * metrics.devicePixelRatio * selectedScale;
+  const widthError = Math.abs(metrics.backingWidth - expectedWidth);
+  const heightError = Math.abs(metrics.backingHeight - expectedHeight);
   expect(
-    metrics.backingWidth,
-    `${stateLabel} expected canvas backing width to honor Resolution scale ${selectedScale}.`,
-  ).toBeGreaterThanOrEqual(Math.floor(expectedWidth - 1));
+    widthError,
+    `${stateLabel} expected exact canvas backing width within one physical pixel for Resolution scale ${selectedScale}.`,
+  ).toBeLessThanOrEqual(1);
   expect(
-    metrics.backingHeight,
-    `${stateLabel} expected canvas backing height to honor Resolution scale ${selectedScale}.`,
-  ).toBeGreaterThanOrEqual(Math.floor(expectedHeight - 1));
+    heightError,
+    `${stateLabel} expected exact canvas backing height within one physical pixel for Resolution scale ${selectedScale}.`,
+  ).toBeLessThanOrEqual(1);
 }
 
 export async function expectToolcraftCanvasBackingPixelsForRenderScale(
@@ -146,7 +143,11 @@ export async function expectToolcraftCanvasBackingPixelsForRenderScale(
 ): Promise<Readonly<{ height: number; width: number }>> {
   assertPositiveFiniteScale(selectedScale);
   const metrics = await readCanvasMetrics(page, canvasSelector);
-  assertBackingMetrics(metrics, selectedScale, options);
+  assertToolcraftCanvasBackingMetricsForRenderScale(
+    metrics,
+    selectedScale,
+    options,
+  );
   return { height: metrics.cssHeight, width: metrics.cssWidth };
 }
 
@@ -216,13 +217,17 @@ export async function expectToolcraftPerformanceRenderScaleBackingEvidence(
   page: Page,
   {
     canvasSelector,
+    baselineCssSize,
+    cssSizePolicy,
     pathId,
-    selectedScale,
+    phase,
     target,
   }: Readonly<{
+    baselineCssSize: Readonly<{ height: number; width: number }>;
     canvasSelector: string;
+    cssSizePolicy: ToolcraftCanvasVisibleSizePolicy;
     pathId: string;
-    selectedScale: number;
+    phase: ToolcraftPerformancePipelinePhase;
     target?: string;
   }>,
 ): Promise<void> {
@@ -234,12 +239,15 @@ export async function expectToolcraftPerformanceRenderScaleBackingEvidence(
   await expectToolcraftCanvasBackingPixelsForRenderScale(
     page,
     canvasSelector,
-    selectedScale,
-    { state: "performance" },
+    TOOLCRAFT_CANVAS_RENDER_SCALE.defaultValue,
+    {
+      ...(cssSizePolicy === "fixed" ? { baselineCssSize } : {}),
+      state: `performance-${phase}`,
+    },
   );
   await attachToolcraftBrowserRuntimeEvidence({
     evidenceType: "performance-render-scale",
-    requirementId: pathId,
+    requirementId: `${pathId}#${phase}`,
     target,
   });
 }

package/templates/starter/e2e/browser-runtime-applicability-requirements.ts

@@ -0,0 +1,84 @@
+import type { ResolvedToolcraftAppSchema } from "@repo/toolcraft-runtime";
+
+import type { ToolcraftBrowserRuntimeRequirement } from "../src/app/test-evidence/browser-runtime-contract";
+import {
+  getToolcraftApplicabilityRequirementId,
+  getToolcraftControlApplicabilityCases,
+  type ToolcraftComponentAcceptance,
+  type ToolcraftControlSectionInventoryEntry,
+} from "../src/app/starter-acceptance";
+
+type ApplicabilityAcceptanceSource = Pick<
+  ToolcraftComponentAcceptance,
+  "browserTestName" | "id" | "kind" | "target"
+>;
+
+const layoutOnlyEvidenceTypes = new Set<
+  ToolcraftBrowserRuntimeRequirement["evidenceType"]
+>(["discrete-slider-layout", "segmented-control-layout"]);
+
+export function expandToolcraftControlApplicabilityRequirements({
+  entry,
+  schema,
+  sectionInventory,
+  templates,
+}: Readonly<{
+  entry: ApplicabilityAcceptanceSource;
+  schema?: Pick<ResolvedToolcraftAppSchema, "panels">;
+  sectionInventory: readonly ToolcraftControlSectionInventoryEntry[];
+  templates: readonly ToolcraftBrowserRuntimeRequirement[];
+}>): ToolcraftBrowserRuntimeRequirement[] {
+  if (!schema || entry.kind !== "control" || !entry.target) {
+    return [...templates];
+  }
+
+  const cases = getToolcraftControlApplicabilityCases({
+    schema,
+    sectionInventory,
+    target: entry.target,
+  });
+
+  if (cases.length === 0) {
+    return [...templates];
+  }
+
+  const hasOutcomeRequirement = templates.some(
+    (requirement) => !layoutOnlyEvidenceTypes.has(requirement.evidenceType),
+  );
+
+  return cases.flatMap((applicabilityCase) => {
+    const visibilityRequirement = {
+      evidenceType:
+        applicabilityCase.expectation === "hidden"
+          ? ("control-applicability-hidden" as const)
+          : ("control-applicability-visible" as const),
+      requirementId: getToolcraftApplicabilityRequirementId(
+        entry.id,
+        applicabilityCase,
+      ),
+      target: entry.target,
+      testName: entry.browserTestName,
+    };
+
+    if (applicabilityCase.expectation === "hidden") {
+      return [visibilityRequirement];
+    }
+
+    if (!hasOutcomeRequirement) {
+      throw new Error(
+        `Visible applicability case for ${entry.id} has no product outcome requirement.`,
+      );
+    }
+
+    return [
+      visibilityRequirement,
+      ...templates.map((requirement) => ({
+        ...requirement,
+        requirementId: getToolcraftApplicabilityRequirementId(
+          requirement.requirementId,
+          applicabilityCase,
+        ),
+      })),
+    ];
+  });
+}

package/templates/starter/e2e/browser-runtime-evidence-reporter.ts

@@ -19,7 +19,10 @@ import {
   type ToolcraftBrowserRuntimeRequirement,
   type ToolcraftBrowserRuntimeTest,
 } from "../src/app/test-evidence/browser-runtime-contract";
-import { starterAcceptance } from "../src/app/starter-acceptance";
+import {
+  starterAcceptance,
+  starterControlSectionInventory,
+} from "../src/app/starter-acceptance";
 import { starterPerformance } from "../src/app/starter-performance";
 import { starterSchema } from "../src/app/starter-schema";
 import {
@@ -166,14 +169,21 @@ export default class ToolcraftBrowserRuntimeEvidenceReporter implements Reporter
     this.performanceSchema = this.performanceSchemaOverride ?? starterSchema;
     this.acceptanceRequirements =
       this.acceptanceRequirementsOverride ??
-      deriveToolcraftBrowserRuntimeRequirements(starterAcceptance, starterSchema);
+      deriveToolcraftBrowserRuntimeRequirements(
+        starterAcceptance,
+        starterSchema,
+        starterControlSectionInventory,
+      );
     this.canonicalPaths = deriveToolcraftPerformancePaths(
       this.performanceSchema,
       this.performanceConfig,
     );
     this.performanceRequirements =
       this.performanceRequirementsOverride ??
-      deriveToolcraftPerformancePathRuntimeRequirements(this.canonicalPaths);
+      deriveToolcraftPerformancePathRuntimeRequirements(
+        this.canonicalPaths,
+        this.performanceSchema,
+      );
   }
 
   onEnd(_result: FullResult): { status: "failed" } | undefined {

package/templates/starter/e2e/browser-runtime-evidence-requirements.ts

@@ -3,20 +3,23 @@ import type {
   ToolcraftPerformancePath,
 } from "@repo/toolcraft-runtime";
 
+import {
+  TOOLCRAFT_PERFORMANCE_PIPELINE_PHASES,
+} from "../src/app/test-evidence/browser-performance-contract";
 import type { ToolcraftBrowserRuntimeRequirement } from "../src/app/test-evidence/browser-runtime-contract";
 import { schemaHasVideoExportPanelAction } from "../src/app/acceptance/output-export";
 import {
   getRequiredToolcraftControlPartCoverage,
   type ToolcraftBackgroundOutputCoverage,
   type ToolcraftComponentAcceptance,
-  type ToolcraftConditionalVisibilityCoverage,
+  type ToolcraftControlSectionInventoryEntry,
   type ToolcraftInfinityCanvasCoverage,
   type ToolcraftModelImportCoverage,
   type ToolcraftOrientationGizmoCoverage,
   type ToolcraftTimelinePlaybackCoverage,
   TOOLCRAFT_REQUIRED_MODEL_IMPORT_COVERAGE,
 } from "../src/app/starter-acceptance";
-import { isToolcraftRenderScalePerformancePath } from "./browser-render-scale-evidence";
+import { expandToolcraftControlApplicabilityRequirements } from "./browser-runtime-applicability-requirements";
 import { getToolcraftPerformancePathTestName } from "./performance-path-helpers";
 
 type BrowserAcceptanceRequirementSource = Pick<
@@ -27,6 +30,7 @@ type BrowserAcceptanceRequirementSource = Pick<
   | "canvasHandle"
   | "controlPartCoverage"
   | "evidence"
+  | "exportArtifactCoverage"
   | "id"
   | "infinityCanvasCoverage"
   | "layerCoverage"
@@ -38,10 +42,14 @@ type BrowserAcceptanceRequirementSource = Pick<
   | "target"
   | "timelineCoverage"
   | "timelinePlaybackCoverage"
-  | "visibilityCoverage"
->;
+> & {
+  kind?: ToolcraftComponentAcceptance["kind"];
+};
 
-type BrowserSchemaRequirementSource = Pick<ResolvedToolcraftAppSchema, "panels">;
+type BrowserSchemaRequirementSource = Pick<
+  ResolvedToolcraftAppSchema,
+  "canvas" | "panels"
+>;
 
 function getAcceptanceEvidenceType(
   evidence: ToolcraftComponentAcceptance["evidence"],
@@ -90,18 +98,6 @@ const timelinePlaybackCoverage = Object.keys(
   timelineEvidenceTypeByCoverage,
 ) as Array<keyof typeof timelineEvidenceTypeByCoverage>;
 
-const conditionalVisibilityEvidenceTypeByCoverage = {
-  hidden: "conditional-control-hidden",
-  visible: "conditional-control-visible",
-} as const satisfies Record<
-  ToolcraftConditionalVisibilityCoverage,
-  ToolcraftBrowserRuntimeRequirement["evidenceType"]
->;
-
-const conditionalVisibilityCoverage = Object.keys(
-  conditionalVisibilityEvidenceTypeByCoverage,
-) as ToolcraftConditionalVisibilityCoverage[];
-
 const backgroundOutputEvidenceTypeByCoverage = {
   "image-transparent-when-excluded": "background-image-transparency",
   "infinity-viewport-color-and-dependency": "background-infinity-viewport",
@@ -167,7 +163,7 @@ const modelImportEvidenceTypeByCoverage = {
   ToolcraftBrowserRuntimeRequirement["evidenceType"]
 >;
 
-export function deriveToolcraftBrowserRuntimeRequirements(
+function deriveUnqualifiedToolcraftBrowserRuntimeRequirements(
   acceptance: readonly BrowserAcceptanceRequirementSource[],
   schema?: BrowserSchemaRequirementSource,
 ): ToolcraftBrowserRuntimeRequirement[] {
@@ -188,7 +184,25 @@ export function deriveToolcraftBrowserRuntimeRequirements(
       entry.orientationGizmoCoverage !== undefined;
     const evidenceTypes: ToolcraftBrowserRuntimeRequirement["evidenceType"][] = [];
     const baseEvidenceType = getAcceptanceEvidenceType(entry.evidence);
-    if (baseEvidenceType) evidenceTypes.push(baseEvidenceType);
+    const exportArtifactCoverage = entry.exportArtifactCoverage
+      ? typeof entry.exportArtifactCoverage === "string"
+        ? [entry.exportArtifactCoverage]
+        : entry.exportArtifactCoverage
+      : [];
+    if (
+      baseEvidenceType &&
+      entry.renderScaleCoverage === undefined &&
+      exportArtifactCoverage.length === 0
+    ) {
+      evidenceTypes.push(baseEvidenceType);
+    }
+    for (const coverage of exportArtifactCoverage) {
+      evidenceTypes.push(
+        coverage === "all-required-image-export-behavior"
+          ? "image-export-artifact"
+          : "video-export-artifact",
+      );
+    }
 
     if (entry.canvasHandle && !hasOrientationCoverage) {
       evidenceTypes.push("canvas-handle-interaction");
@@ -216,15 +230,6 @@ export function deriveToolcraftBrowserRuntimeRequirements(
     if (entry.referenceCoverage || entry.referenceTimelineCoverage) {
       evidenceTypes.push("reference-parity");
     }
-    const visibilityCoverage =
-      entry.visibilityCoverage === "all-conditional-visibility"
-        ? conditionalVisibilityCoverage
-        : entry.visibilityCoverage ?? [];
-    evidenceTypes.push(
-      ...visibilityCoverage.map(
-        (item) => conditionalVisibilityEvidenceTypeByCoverage[item],
-      ),
-    );
     const backgroundCoverage =
       entry.backgroundOutputCoverage === "all-required-background-output"
         ? backgroundOutputCoverage.filter(
@@ -321,7 +326,28 @@ export function deriveToolcraftBrowserRuntimeRequirements(
   });
 }
 
-const pathProductOutcomeInteractions = new Set<ToolcraftPerformancePath["interaction"]>([
+export function deriveToolcraftBrowserRuntimeRequirements(
+  acceptance: readonly BrowserAcceptanceRequirementSource[],
+  schema?: BrowserSchemaRequirementSource,
+  sectionInventory: readonly ToolcraftControlSectionInventoryEntry[] = [],
+): ToolcraftBrowserRuntimeRequirement[] {
+  return acceptance.flatMap((entry) => {
+    const templates = deriveUnqualifiedToolcraftBrowserRuntimeRequirements(
+      [entry],
+      schema,
+    );
+    return expandToolcraftControlApplicabilityRequirements({
+      entry,
+      schema,
+      sectionInventory,
+      templates,
+    });
+  });
+}
+
+const pathProductOutcomeInteractions = new Set<
+  ToolcraftPerformancePath["interaction"]
+>([
   "control-change",
   "control-drag",
   "mask-drag",
@@ -332,6 +358,7 @@ const pathProductOutcomeInteractions = new Set<ToolcraftPerformancePath["interac
 
 export function deriveToolcraftPerformancePathRuntimeRequirements(
   paths: readonly ToolcraftPerformancePath[],
+  schema: ResolvedToolcraftAppSchema,
 ): ToolcraftBrowserRuntimeRequirement[] {
   return paths.flatMap((path) => {
     const evidenceTypes: ToolcraftBrowserRuntimeRequirement["evidenceType"][] = [
@@ -353,19 +380,29 @@ export function deriveToolcraftPerformancePathRuntimeRequirements(
     if (path.interaction === "animation-frame") {
       evidenceTypes.push("performance-animation-frames");
     }
-    if (path.interaction === "viewport-drag" || path.interaction === "viewport-zoom") {
+    if (
+      path.interaction === "viewport-drag" ||
+      path.interaction === "viewport-zoom"
+    ) {
       evidenceTypes.push("performance-viewport");
     }
-    if (isToolcraftRenderScalePerformancePath(path)) {
-      evidenceTypes.push("performance-render-scale");
-    }
-
     const target = path.targets.length === 1 ? path.targets[0] : undefined;
-    return evidenceTypes.map((evidenceType) => ({
+    const requirements = evidenceTypes.map((evidenceType) => ({
       evidenceType,
       requirementId: path.id,
       target,
       testName: getToolcraftPerformancePathTestName(path),
     }));
+    if (schema.canvas.renderScale.enabled) {
+      for (const phase of TOOLCRAFT_PERFORMANCE_PIPELINE_PHASES) {
+        requirements.push({
+          evidenceType: "performance-render-scale",
+          requirementId: `${path.id}#${phase}`,
+          target,
+          testName: getToolcraftPerformancePathTestName(path),
+        });
+      }
+    }
+    return requirements;
   });
 }

package/templates/starter/e2e/browser-semantic-evidence-test-helpers.ts

@@ -55,3 +55,28 @@ export async function setSyntheticControlOwner(
     { target, visible },
   );
 }
+
+export async function setSyntheticSwitchControlOwner(
+  page: Page,
+  target: string,
+  checked: boolean,
+): Promise<void> {
+  await setSyntheticControlOwner(page, target, true);
+  await page.locator("[data-synthetic-target]").evaluateAll(
+    (owners, entry) => {
+      const owner = owners.find(
+        (candidate) =>
+          candidate.getAttribute("data-synthetic-target") === entry.target,
+      );
+      const button = owner?.querySelector("button");
+
+      if (!button) {
+        throw new Error(`Missing synthetic switch owner ${entry.target}.`);
+      }
+
+      button.setAttribute("aria-checked", String(entry.checked));
+      button.setAttribute("role", "switch");
+    },
+    { checked, target },
+  );
+}

package/templates/starter/e2e/browser-standard-timeline-evidence.ts

@@ -0,0 +1,106 @@
+import { expect } from "@playwright/test";
+
+import { attachToolcraftBrowserRuntimeEvidence } from "./browser-runtime-evidence";
+import {
+  getToolcraftBrowserProofPage,
+  type ToolcraftBrowserProofSession,
+} from "./browser-proof-session";
+
+async function readMarkerSignature(
+  page: Awaited<ReturnType<typeof getToolcraftBrowserProofPage>>,
+  markerSelector: string,
+): Promise<string> {
+  return page.locator(markerSelector).evaluate((element) => {
+    const node = element as HTMLElement;
+    return `${node.dataset.timelineProgress ?? "missing"}:${node.style.transform || node.style.left}`;
+  });
+}
+
+export async function expectToolcraftStandardTimelinePlayback(
+  session: ToolcraftBrowserProofSession,
+  options: Readonly<{
+    markerSelector: string;
+    requirementId: string;
+  }>,
+): Promise<void> {
+  const page = await getToolcraftBrowserProofPage(session);
+  const scrubber = page.getByRole("slider", { name: "Playback position" });
+  if (!(await scrubber.isVisible())) {
+    await page
+      .locator('[data-toolcraft-control-target="panels.timeline.extended"]')
+      .getByRole("switch")
+      .click();
+    await expect(scrubber).toBeVisible();
+  }
+  const pause = page.getByRole("button", { name: "Pause playback" });
+  if (await pause.isVisible()) await pause.click();
+
+  await scrubber.press("Home");
+  await expect(scrubber).toHaveAttribute("aria-valuenow", "0");
+  const initialStart = await readMarkerSignature(page, options.markerSelector);
+  await scrubber.press("End");
+  const initialEnd = await readMarkerSignature(page, options.markerSelector);
+  expect(initialEnd).toBe(initialStart);
+  await scrubber.press("ArrowLeft");
+  const scrubbed = await readMarkerSignature(page, options.markerSelector);
+  expect(scrubbed).not.toBe(initialStart);
+  await attachToolcraftBrowserRuntimeEvidence({
+    evidenceType: "timeline-scrub",
+    requirementId: options.requirementId,
+    target: "timeline.playback",
+  });
+  await attachToolcraftBrowserRuntimeEvidence({
+    evidenceType: "timeline-rendered-frame",
+    requirementId: options.requirementId,
+    target: "timeline.playback",
+  });
+  await attachToolcraftBrowserRuntimeEvidence({
+    evidenceType: "product-observable-change",
+    requirementId: options.requirementId,
+    target: "timeline.playback",
+  });
+
+  await page.getByRole("button", { name: "Edit timeline duration" }).click();
+  const durationEditor = page.getByRole("textbox", { name: "timeline duration" });
+  await durationEditor.fill("2s");
+  await durationEditor.press("Enter");
+  await expect(scrubber).toHaveAttribute("aria-valuemax", "2");
+  await scrubber.press("Home");
+  const resizedStart = await readMarkerSignature(page, options.markerSelector);
+  await scrubber.press("End");
+  const resizedEnd = await readMarkerSignature(page, options.markerSelector);
+  expect(resizedEnd).toBe(resizedStart);
+  await attachToolcraftBrowserRuntimeEvidence({
+    evidenceType: "timeline-duration",
+    requirementId: options.requirementId,
+    target: "timeline.playback",
+  });
+  await attachToolcraftBrowserRuntimeEvidence({
+    evidenceType: "timeline-loop",
+    requirementId: options.requirementId,
+    target: "timeline.playback",
+  });
+
+  await scrubber.press("Home");
+  await page.getByRole("button", { name: "Play playback" }).click();
+  await expect
+    .poll(() => scrubber.getAttribute("aria-valuenow"))
+    .not.toBe("0");
+  await page.getByRole("button", { name: "Pause playback" }).click();
+  const pausedTime = await scrubber.getAttribute("aria-valuenow");
+  const pausedSignature = await readMarkerSignature(page, options.markerSelector);
+  await page.waitForTimeout(100);
+  expect(await scrubber.getAttribute("aria-valuenow")).toBe(pausedTime);
+  expect(await readMarkerSignature(page, options.markerSelector)).toBe(
+    pausedSignature,
+  );
+  await page.getByRole("button", { name: "Play playback" }).click();
+  await expect
+    .poll(() => scrubber.getAttribute("aria-valuenow"))
+    .not.toBe(pausedTime);
+  await attachToolcraftBrowserRuntimeEvidence({
+    evidenceType: "timeline-pause-resume",
+    requirementId: options.requirementId,
+    target: "timeline.playback",
+  });
+}