Fix keyframe easing detection

Serialize effective per-keyframe easing back into the linked stylesheet corpus so overshoot motion is detected. Add a browser regression with a neutral animation name.\n\nAI assistance disclosure: Codex helped implement and test this fix under maintainer direction.
This commit is contained in:
Paul Bakaus
2026-09-02 12:32:23 -07:00
parent 1902ef03c2
commit 04c5f0babe
5 changed files with 23 additions and 1 deletions
+4
View File
@@ -1547,6 +1547,10 @@ if (IS_BROWSER) {
const declarations = Object.entries(frame)
.filter(([property, value]) => !metadata.has(property) && value != null && value !== '')
.map(([property, value]) => `${cssPropertyName(property)}: ${value};`);
const easing = String(frame.easing || '').trim();
if (easing && easing.toLowerCase() !== 'linear') {
declarations.push(`animation-timing-function: ${easing};`);
}
if (declarations.length === 0) continue;
blocks.push(`${offset}% { ${declarations.join(' ')} }`);
}
@@ -8451,6 +8451,10 @@ if (IS_BROWSER) {
const declarations = Object.entries(frame)
.filter(([property, value]) => !metadata.has(property) && value != null && value !== '')
.map(([property, value]) => `${cssPropertyName(property)}: ${value};`);
const easing = String(frame.easing || '').trim();
if (easing && easing.toLowerCase() !== 'linear') {
declarations.push(`animation-timing-function: ${easing};`);
}
if (declarations.length === 0) continue;
blocks.push(`${offset}% { ${declarations.join(' ')} }`);
}
+2 -1
View File
@@ -1469,7 +1469,8 @@ describe('detectUrl — browser-only fixtures', () => {
assert.equal(grids[0].severity, 'advisory');
assert.equal(grids[0].advisory, true);
assert.equal(
linkedFindings.some(finding => finding.type === 'bounce-easing'),
linkedFindings.some(finding => finding.type === 'bounce-easing'
&& finding.detail === 'cubic-bezier(0.34, 1.56, 0.64, 1)'),
true,
JSON.stringify({ linkedFindings, linkedCssom }),
);
+12
View File
@@ -47,6 +47,18 @@ main > ::before {
to { transform: translateX(-50%); }
}
.linked-keyframe-overshoot {
animation: linked-keyframe-curve 2s linear infinite;
}
@keyframes linked-keyframe-curve {
from {
transform: translateY(0);
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
to { transform: translateY(2px); }
}
.overridden-keyframes-animation {
animation: overridden-horizontal-loop 2s linear infinite;
}
+1
View File
@@ -12,6 +12,7 @@
<div data-decoy="">Empty attribute-value decoy</div>
<div class="::before">Escaped identifier selector</div>
<div class="linked-marquee">Rendered linked marquee animation</div>
<div class="linked-keyframe-overshoot">Rendered linked keyframe easing</div>
<div class="overridden-keyframes-animation">Overridden linked keyframes</div>
<div class="layered-keyframes-animation">Layer-priority linked keyframes</div>
<div class="linked-pulse-dot"></div>