Add another group test

packages/react/test/apps/react-18/app/group-1-unchanged/page.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import * as React from 'react'
+import NumberFlow, { NumberFlowElement, NumberFlowGroup } from '@number-flow/react'
+import { flushSync } from 'react-dom'
+
+export default function Page() {
+	const [value, setValue] = React.useState(42)
+	const ref1 = React.useRef<NumberFlowElement>(null)
+	const ref2 = React.useRef<NumberFlowElement>(null)
+	return (
+		<>
+			<div>
+				<NumberFlowGroup>
+					<NumberFlow ref={ref1} value={value} />
+					<NumberFlow ref={ref2} value={0} />
+				</NumberFlowGroup>
+			</div>
+			<button
+				onClick={() => {
+					flushSync(() => {
+						setValue(152000)
+					})
+					;[
+						...(ref1.current?.shadowRoot?.getAnimations() ?? []),
+						...(ref2.current?.shadowRoot?.getAnimations() ?? [])
+					].forEach((a) => {
+						a.pause()
+						a.currentTime = 300
+					})
+				}}
+			>
+				Change and pause
+			</button>
+			<br />
+			<button
+				onClick={() => {
+					;[
+						...(ref1.current?.shadowRoot?.getAnimations() ?? []),
+						...(ref2.current?.shadowRoot?.getAnimations() ?? [])
+					].forEach((a) => {
+						a.play()
+					})
+				}}
+			>
+				Resume
+			</button>
+		</>
+	)
+}

packages/react/test/apps/react-19/app/group-1-unchanged/page.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import * as React from 'react'
+import NumberFlow, { NumberFlowElement, NumberFlowGroup } from '@number-flow/react'
+import { flushSync } from 'react-dom'
+
+export default function Page() {
+	const [value, setValue] = React.useState(42)
+	const ref1 = React.useRef<NumberFlowElement>(null)
+	const ref2 = React.useRef<NumberFlowElement>(null)
+	return (
+		<>
+			<div>
+				<NumberFlowGroup>
+					<NumberFlow ref={ref1} value={value} />
+					<NumberFlow ref={ref2} value={0} />
+				</NumberFlowGroup>
+			</div>
+			<button
+				onClick={() => {
+					flushSync(() => {
+						setValue(152000)
+					})
+					;[
+						...(ref1.current?.shadowRoot?.getAnimations() ?? []),
+						...(ref2.current?.shadowRoot?.getAnimations() ?? [])
+					].forEach((a) => {
+						a.pause()
+						a.currentTime = 300
+					})
+				}}
+			>
+				Change and pause
+			</button>
+			<br />
+			<button
+				onClick={() => {
+					;[
+						...(ref1.current?.shadowRoot?.getAnimations() ?? []),
+						...(ref2.current?.shadowRoot?.getAnimations() ?? [])
+					].forEach((a) => {
+						a.play()
+					})
+				}}
+			>
+				Resume
+			</button>
+		</>
+	)
+}

packages/svelte/src/routes/group-1-unchanged/+page.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import NumberFlow, { NumberFlowGroup, NumberFlowElement } from '$lib/index.js'
+	import { afterUpdate, tick } from 'svelte'
+
+	const initialValue = 42
+
+	let value = initialValue
+	let el1: NumberFlowElement | undefined
+	let el2: NumberFlowElement | undefined
+
+	afterUpdate(async () => {
+		await tick()
+		if (value !== initialValue) {
+			;[
+				...(el1?.shadowRoot?.getAnimations() ?? []),
+				...(el2?.shadowRoot?.getAnimations() ?? [])
+			].forEach((a) => {
+				a.pause()
+				a.currentTime = 300
+			})
+		}
+	})
+</script>
+
+<div>
+	<NumberFlowGroup>
+		<NumberFlow bind:el={el1} {value} /><NumberFlow bind:el={el2} value={0} />
+	</NumberFlowGroup>
+</div>
+<button on:click={() => (value = 152000)}>Change and pause</button>
+<br />
+<button
+	on:click={() => {
+		;[
+			...(el1?.shadowRoot?.getAnimations() ?? []),
+			...(el2?.shadowRoot?.getAnimations() ?? [])
+		].forEach((a) => {
+			a.play()
+		})
+	}}
+>
+	Resume
+</button>

packages/vue/test/apps/nuxt3/src/pages/group-1-unchanged.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import NumberFlow, { NumberFlowGroup } from '@number-flow/vue'
+import { ref } from 'vue'
+
+const flow1 = useTemplateRef('flow1')
+const flow2 = useTemplateRef('flow2')
+const value = ref(42)
+watch(
+	value,
+	async () => {
+		await nextTick()
+		;[
+			...(flow1.value?.el?.shadowRoot?.getAnimations() ?? []),
+			...(flow2.value?.el?.shadowRoot?.getAnimations() ?? [])
+		].forEach((a) => {
+			a.pause()
+			a.currentTime = 300
+		})
+	},
+	{ flush: 'post' }
+)
+</script>
+<template>
+	<div>
+		<NumberFlowGroup>
+			<NumberFlow ref="flow1" :value />
+			<NumberFlow ref="flow2" :value="0" />
+		</NumberFlowGroup>
+	</div>
+	<button @click="value = 152000">Change and pause</button><br />
+	<button
+		@click="
+			() => {
+				;[
+					...(flow1?.el?.shadowRoot?.getAnimations() ?? []),
+					...(flow2?.el?.shadowRoot?.getAnimations() ?? [])
+				].forEach((a) => {
+					a.play()
+				})
+			}
+		"
+	>
+		Resume
+	</button>
+</template>

test-suites/wrapper/group-1-unchanged.test.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test.skip(
+	({ javaScriptEnabled, contextOptions }) =>
+		!javaScriptEnabled || contextOptions.reducedMotion === 'reduce'
+)
+
+test('transitions correctly', async ({ page, contextOptions }) => {
+	// Not sure why this is necessary for Svelte Chromium/Safari but I couldn't get it to work without it:
+	// https://www.reddit.com/r/sveltejs/comments/15m9jch/how_do_you_wait_for_sveltekit_to_be_completely/
+	await page.goto('/group-1-unchanged', { waitUntil: 'networkidle' })
+
+	await page.getByRole('button', { name: 'Change and pause' }).click()
+	await expect(page).toHaveScreenshot({ animations: 'allow' })
+})