Release 2.21.2: fix animation timing

test/region-layout.test.js

@@ -322,6 +322,12 @@ test('shared animation controls round-trip advanced settings with template norma
   assert.equal(clamped.intro.duration_ms, 2000);
   assert.equal(clamped.intro.delay_ms, 0);
   assert.equal(clamped.loop.iterations, 999);
+  fields[1].value = '999';
+  fields[4].value = '2000';
+  controls.clampAdvancedField(fields[1]);
+  controls.clampAdvancedField(fields[4]);
+  assert.equal(fields[1].value, '200');
+  assert.equal(fields[4].value, '999');
 });
 
 test('slide advanced popup applies changes, cancels drafts and preserves the parent animation draft', function () {
@@ -330,7 +336,8 @@ test('slide advanced popup applies changes, cancels drafts and preserves the par
       addEventListener(type, handler) { this.handlers[type] = handler; },
       querySelectorAll() { return []; }, replaceChildren() {}, appendChild() {}, focus() {},
       setAttribute() {}, removeAttribute() {},
-      style: { setProperty() {}, removeProperty() {} }, classList: { add() {}, remove() {}, toggle() {} } };
+      style: { values: {}, setProperty(name, value) { this.values[name] = value; }, removeProperty(name) { delete this.values[name]; } },
+      classList: { add() {}, remove() {}, toggle() {} } };
   }
   const ids = Object.fromEntries([
     'slide-animation-modal', 'adjust-slide-animations', 'slide-animation-region',
@@ -352,9 +359,12 @@ test('slide advanced popup applies changes, cancels drafts and preserves the par
     add(...classNames) { readonlyPreviewRegion.className += ' ' + classNames.join(' '); },
     remove(...classNames) { readonlyPreviewRegion.className = readonlyPreviewRegion.className.split(/\s+/).filter(name => !classNames.includes(name)).join(' '); }
   };
+  const secondPreviewRegion = element();
+  secondPreviewRegion.className = 'slide-preview-region';
+  secondPreviewRegion.dataset.regionKey = 'fixed_brand_second';
   advanced.querySelectorAll = () => fields;
   ids['slide-animation-modal'].querySelectorAll = selector => selector === '[data-slide-animation-preview]' ? animationPreviewButtons : [];
-  ids['slide-animation-preview'].querySelectorAll = () => [readonlyPreviewRegion];
+  ids['slide-animation-preview'].querySelectorAll = () => [readonlyPreviewRegion, secondPreviewRegion];
   advanced.querySelector = selector => selector === '[data-animation-modal-apply]' ? advancedApply
     : selector === '[data-animation-modal-reset]' ? advancedReset : element();
   const hidden = { value: '{}' };
@@ -399,17 +409,29 @@ test('slide advanced popup applies changes, cancels drafts and preserves the par
   context.createSlideAnimationEditor({ stage: { parentNode: { insertBefore() {} }, nextSibling: null },
     getTemplate() { return { regions: [
       { region_key: 'hero', animation_json: { intro: { preset: 'bounceIn' }, outro: { preset: 'fadeOut' } } },
-      { region_key: 'fixed_brand', read_only: true, animation_json: { loop: { preset: 'pulse', duration_ms: 200, iterations: 1 } } }
+      { region_key: 'fixed_brand', read_only: true, animation_json: {
+        outro: { preset: 'fadeOut', duration_ms: 200, delay_ms: 500 },
+        loop: { preset: 'pulse', duration_ms: 200, delay_ms: 240, iterations: 1 }
+      } },
+      { region_key: 'fixed_brand_second', read_only: true, animation_json: { loop: { preset: 'pulse', duration_ms: 200, iterations: 1 } } }
     ] }; },
     getAnimationOverrides() { return {}; }, requestPreviewRender() {}, markEdited() {},
     setAnimationOverrides(value) { applied = value; }
   });
   ids['slide-animation-region'].value = 'hero';
   ids['adjust-slide-animations'].handlers.click();
+  fields[1].value = '999';
+  ids['animation-advanced-modal'].handlers.input({ target: fields[1] });
+  assert.equal(fields[1].value, '200');
   assert.equal(animationPreviewButtons[2].disabled, false);
   animationPreviewButtons[2].handlers.click();
   assert.match(readonlyPreviewRegion.className, /animate__pulse/);
+  assert.equal(readonlyPreviewRegion.style.values['animation-delay'], '240ms');
+  assert.equal(secondPreviewRegion.style.values['animation-delay'], '0ms');
   animationPreviewButtons[2].handlers.click();
+  animationPreviewButtons[1].handlers.click();
+  assert.equal(readonlyPreviewRegion.style.values['animation-delay'], '0ms');
+  animationPreviewButtons[1].handlers.click();
   const resetRegion = ids['slide-animation-reset-region'];
   const resetAll = ids['slide-animation-reset-all'];
   assert.equal(resetRegion.disabled, true);