Align outro animations at slide end

test/templates.test.js

@@ -609,4 +609,17 @@ test('template animation preview applies configured delays to the CSS animation
   assert.equal(values['animation-delay'], '425ms');
   context.applyAnimateCssPreview(rect, 'fadeOut', { duration_ms: 1000, delay_ms: 425 }, 'out');
   assert.equal(values['animation-delay'], undefined);
+});
+
+test('template outro preview aligns regions using computed CSS animation duration', () => {
+  const script = fs.readFileSync(require.resolve('../src/web/public/js/templates/template-designer.js'), 'utf8');
+  assert.match(script, /getComputedAnimationDurationMs\(rect, durationMs\) \* iterations/);
+  assert.match(script, /mode === 'out' \? Math\.max\(0, longestTimingMs - entry\.runtimeMs\) : entry\.delay/);
+  assert.match(script, /Number\(rect\.getAttribute\('data-index'\)\)/);
+
+  const helper = script.match(/  function getComputedAnimationDurationMs\([^]*?\n  }/);
+  assert.ok(helper);
+  const context = vm.createContext({ window: { getComputedStyle() { return { animationDuration: '1s, 2.5s' }; } } });
+  vm.runInContext(helper[0] + '\nthis.getComputedAnimationDurationMs = getComputedAnimationDurationMs;', context);
+  assert.equal(context.getComputedAnimationDurationMs({}, 900), 2500);
 });