Subchapter 31.22

Pad Frame Duration Test

scripts/lib/pad-frame-duration.test.mjs

JavaScript76 lines3 KB

1import { test } from "node:test";
2import assert from "node:assert/strict";
3import { mkdtempSync, mkdirSync, writeFileSync, readFileSync, rmSync } from "node:fs";
4import { tmpdir } from "node:os";
5import { join } from "node:path";
6import { padFrameInternalDuration } from "./pad-frame-duration.mjs";
7
8

pad-frame-duration.test.mjs on GitHub

// Regression: an outgoing transition pads the index.html WRAPPER's

// data-duration to cover the transition tail, but the frame's own internal

// file kept its shorter content-only duration, so the render engine

// clip-gated the sub-composition's visible content at the shorter value —

// content vanished abruptly instead of fading through the wrapper's

// extended fade-out tween. A user diagnosed and verified this fix

// themselves: pad the frame's own #root/clip data-duration to match.

test("padFrameInternalDuration pads the matching frame's own data-duration", () => {

const dir = mkdtempSync(join(tmpdir(), "transitions-pad-"));

const framesDir = join(dir, "compositions", "frames");

mkdirSync(framesDir, { recursive: true });

const frameSrc = "compositions/frames/scene-1.html";

const framePath = join(dir, frameSrc);

writeFileSync(

framePath,

`<template>

<div

id="root"

data-composition-id="scene-1"

data-width="1920"

data-height="1080"

data-duration="4.2"

></div>

</template>`,

);

try {

padFrameInternalDuration(dir, frameSrc, "scene-1", 4.7);

const updated = readFileSync(framePath, "utf8");

assert.match(updated, /data-duration="4\.7"/);

assert.doesNotMatch(updated, /data-duration="4\.2"/);

} finally {

rmSync(dir, { recursive: true, force: true });

}

});

test("padFrameInternalDuration only touches the tag matching the given frame id", () => {

const dir = mkdtempSync(join(tmpdir(), "transitions-pad-scope-"));

const framesDir = join(dir, "compositions", "frames");

mkdirSync(framesDir, { recursive: true });

const frameSrc = "compositions/frames/scene-2.html";

const framePath = join(dir, frameSrc);

const original = `<template>

</div>

</template>`;

writeFileSync(framePath, original);

try {

padFrameInternalDuration(dir, frameSrc, "scene-2", 3.5);

const updated = readFileSync(framePath, "utf8");

assert.match(updated, /data-composition-id="scene-2" data-duration="3\.5"/);

assert.match(updated, /data-composition-id="unrelated-child" data-duration="1\.0"/);

} finally {

rmSync(dir, { recursive: true, force: true });

}

});

test("padFrameInternalDuration is a no-op when the frame file does not exist", () => {

const dir = mkdtempSync(join(tmpdir(), "transitions-pad-missing-"));

try {

assert.doesNotThrow(() =>

padFrameInternalDuration(dir, "compositions/frames/missing.html", "missing", 5),

);

} finally {

rmSync(dir, { recursive: true, force: true });

}

});