[chnobli] fix reversing multiple times might cause some jumps

chnobli/src/tests/timing.test.ts

@@ -150,6 +150,7 @@ describe('timing', () => {
 		timing.reverse();
 		expect(timing.state).toBe(STATE_BEFORE);
 		expect(timing.position).toBe(0);
+		expect(timing.positionAbsolute()).toBe(0);
 
 		// >
 		timing.advance(25);
@@ -270,4 +271,35 @@ describe('timing', () => {
 		timing.advance(50);
 		expect(timing.position).toBe(0.25);
 	});
+
+	it('forward and back', () => {
+		const timing = new Timing({
+			duration: 100,
+			reversed: true,
+		});
+		// I wan't the start value to be 0
+		timing.seek(1);
+		expect(timing.reversed).toBe(true);
+		expect(timing.state).toBe(STATE_ENDED);
+		expect(timing.position).toBe(0);
+
+		timing.reverse();
+		expect(timing.state).toBe(STATE_START);
+		timing.advance(25);
+		expect(timing.reversed).toBe(false);
+		expect(timing.state).toBe(STATE_RUNNING);
+		expect(timing.position).toBe(0.25);
+
+		timing.reverse();
+		timing.advance(20);
+		expect(timing.reversed).toBe(true);
+		expect(timing.state).toBe(STATE_RUNNING);
+		expect(timing.position.toFixed(2)).toBe('0.05');
+
+		timing.reverse();
+		timing.advance(20);
+		expect(timing.reversed).toBe(false);
+		expect(timing.state).toBe(STATE_RUNNING);
+		expect(timing.position.toFixed(2)).toBe('0.25');
+	});
 });

chnobli/src/tests/usecases.test.ts

@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest';
 import TestTicker from '../timing/TestTicker.js';
 import TestResponsiveEvent from '../responsive/TestEvent.js';
-import { animate, timeline } from '../chnobli.js';
-import { responsive } from '../utils/utils.js';
+import { timeline } from '../chnobli.js';
+import { fromTo, responsive } from '../utils/utils.js';
 import { el } from '../target/TestDomNode.js';
 
 describe('usecases', () => {
@@ -64,4 +64,43 @@ describe('usecases', () => {
 		expect(ctn.style.maxHeight).toBe(undefined);
 		expect(itm.classList.contains('open')).toBe(false);
 	});
+
+	it('accordion2', () => {
+		const ticker = new TestTicker();
+		const respEv = new TestResponsiveEvent();
+
+		const itm = el();
+		const ctn = el();
+		ctn.computedStyle.maxHeight = 'none';
+		// @ts-ignore
+		ctn.scrollHeight = '100px';
+
+		const tl = timeline({ reversed: true }).add(ctn, {
+			height: fromTo(
+				0,
+				responsive(el => el.scrollHeight),
+			),
+			duration: 100,
+		});
+
+		const toggle = () => {
+			tl.reverse();
+			tl.play();
+		};
+
+		// on click reverse or not
+		toggle();
+		ticker.run(1);
+		expect(ctn.style.height).toBe('1.000px');
+		ticker.run(49);
+		expect(ctn.style.height).toBe('50.000px');
+		toggle();
+		ticker.run(1);
+		expect(ctn.style.height).toBe('49.000px');
+		ticker.run(29);
+		expect(ctn.style.height).toBe('20.000px');
+		toggle();
+		ticker.run(1);
+		expect(ctn.style.height).toBe('21.000px');
+	});
 });