mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-14 08:13:11 +00:00
miga-heygenandMiguel Ángel
468f7ec35b
* fix(compiler): skip CSS var() in font resolver — fixes FONT_FETCH_FAILED on distributed renders The font scanner treated `var(--ui-font)` as a literal font family name, causing fail-closed distributed renders to throw FONT_FETCH_FAILED for any composition using CSS custom properties in font-family declarations. CSS var() expressions resolve at browser paint time, not at compile time. The regex-based font scanner cannot resolve them statically — skip them and let headless Chrome handle variable substitution during render. Closes #1654 — Miga * test(regression): add distributed css-var-fonts fixture Regression test for compositions that use CSS custom properties in font-family declarations. Exercises the var() skip guard in extractRequestedFontFamilies() under the distributed renderer's fail-closed font resolution path. Baseline needs to be generated on first CI run with --update. — Miga * fix(compiler): address review feedback — mixed declaration test + validator TODO Add unit test verifying concrete fonts alongside var() in mixed declarations still get resolved (non-aggression pin). Add TODO(#1654) in validateNoSystemFonts for the var()-as-primary gap flagged by both reviewers. — Miga * fix(test): correct stale 4xx fail-closed test expectations The 4xx tests expected no throw, but that was the contract before #1255 added the system font capture path (Path 3). Post-#1255, a font that gets 4xx from Google Fonts AND isn't a bundled alias AND has no system font IS genuinely unresolvable — fail-closed mode should throw. The 4xx distinction still matters at the fetch level (no retry, treated as deterministic "not served"), but at the final unresolved check, a completely unresolvable font must throw regardless of the HTTP status that caused the Google Fonts path to return empty. Updated tests to match the actual contract: 4xx + unresolvable = throw. Also set allowSystemFontCapture: false to match how distributed renders (plan.ts:799) actually call the function. — Miga --------- Co-authored-by: Miguel Ángel <miguel.sierra@heygen.com>
75 lines
2.0 KiB
HTML
75 lines
2.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<title>CSS var() font-family regression fixture</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
|
<style>
|
|
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Montserrat:wght@400;700;900&display=swap");
|
|
|
|
:root {
|
|
--ui-font: "Inter";
|
|
--display-font: "Montserrat";
|
|
}
|
|
|
|
body,
|
|
html {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 640px;
|
|
height: 360px;
|
|
background: #1a1a2e;
|
|
overflow: hidden;
|
|
font-family: var(--ui-font), sans-serif;
|
|
}
|
|
|
|
#main-comp {
|
|
position: relative;
|
|
width: 640px;
|
|
height: 360px;
|
|
}
|
|
|
|
.heading {
|
|
position: absolute;
|
|
top: 30%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-family: var(--display-font), sans-serif;
|
|
font-size: 48px;
|
|
font-weight: 900;
|
|
color: #e94560;
|
|
white-space: nowrap;
|
|
opacity: 0;
|
|
}
|
|
|
|
.body-text {
|
|
position: absolute;
|
|
top: 60%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-family: var(--ui-font), sans-serif;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
color: #c4c4c4;
|
|
white-space: nowrap;
|
|
opacity: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="main-comp" data-composition-id="css-var-fonts" data-width="640" data-height="360" data-start="0">
|
|
<div class="heading">CSS Variable Fonts</div>
|
|
<div class="body-text">var(--ui-font) and var(--display-font)</div>
|
|
</div>
|
|
<script>
|
|
window.__timelines = window.__timelines || {};
|
|
const tl = gsap.timeline();
|
|
tl.to(".heading", { opacity: 1, duration: 0.5 });
|
|
tl.to(".body-text", { opacity: 1, duration: 0.5 }, "+=0.2");
|
|
tl.to({}, { duration: 1 });
|
|
window.__timelines["css-var-fonts"] = tl;
|
|
</script>
|
|
</body>
|
|
</html>
|