mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-15 07:36:50 +03:00
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:
@@ -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(' ')} }`);
|
||||
}
|
||||
|
||||
@@ -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 }),
|
||||
);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user