Release 2.21.2: fix animation timing

test/templates.test.js

@@ -338,7 +338,7 @@ test('template animation controls mark the form dirty', () => {
 
   assert.match(script, /animationPresetInputs[\s\S]*markTemplateFormDirty\(\);/);
   assert.ok(script.includes("animationAdvancedModal.addEventListener('input'"));
-  assert.ok(script.includes('clampAnimationModalField(event.target);'));
+  assert.ok(script.includes('window.pulseRegionAnimationControls.clampAdvancedField(event.target);'));
   assert.ok(script.includes("animationAdvancedModal.addEventListener('change'"));
   assert.ok(script.includes("animationModalApplyButton.addEventListener('click', function () {"));
   assert.ok(script.includes("saveAnimationModal();"));
@@ -355,6 +355,7 @@ test('template animation durations use percent in the advanced modal', () => {
 
   assert.match(modal, /signage\/templates\/animation-advanced-fields/);
   assert.match(modal, /data-animation-modal-title>Advanced animations:/);
+  assert.match(advancedFields, /Finish before transition \(ms\).*data-animation-modal-step="outro"/);
   assert.ok(modal.indexOf('data-animation-modal-apply') < modal.lastIndexOf('>Cancel</button>'));
   assert.match(modal, /class="btn btn-warning" data-bs-dismiss="modal">Cancel<\/button>/);
   assert.ok(script.includes("title.textContent = 'Advanced animations: ' + (label ? label.textContent : 'Region');"));
@@ -584,4 +585,28 @@ test('template designer restores region default content and read-only state from
     type: 'html', value: '<div>Template-owned</div>'
   });
   assert.equal(fields['[data-region-read-only]'].checked, true);
+});
+
+test('template animation preview applies configured delays to the CSS animation property', () => {
+  const script = fs.readFileSync(require.resolve('../src/web/public/js/templates/template-designer.js'), 'utf8');
+  assert.doesNotMatch(script, /var stagger = 90/);
+  assert.match(script, /var delay = mode === 'out' \? 0 : Math\.max\(0, Number\(step && step\.delay_ms\) \|\| 0\);/);
+  const match = script.match(/  function applyAnimateCssPreview\([^]*?\n  }/);
+  assert.ok(match);
+  const context = vm.createContext({});
+  vm.runInContext(match[0] + '\nthis.applyAnimateCssPreview = applyAnimateCssPreview;', context);
+  const values = {};
+  const rect = {
+    classList: { add() {}, remove() {} },
+    style: {
+      setProperty(name, value) { values[name] = value; },
+      removeProperty(name) { delete values[name]; }
+    }
+  };
+
+  context.applyAnimateCssPreview(rect, 'fadeIn', { duration_ms: 1000, delay_ms: 425 }, 'intro');
+
+  assert.equal(values['animation-delay'], '425ms');
+  context.applyAnimateCssPreview(rect, 'fadeOut', { duration_ms: 1000, delay_ms: 425 }, 'out');
+  assert.equal(values['animation-delay'], undefined);
 });