import { test, expect } from "@playwright/test"

test.describe("Keyframes", () => {
    test.beforeEach(async ({ page }) => {
        await page.goto("/vue/keyframes")
    })

    /**
     * This test isn't overly exhaustive, it just checks
     * that the animation is running as we would expect.
     */
    test("element is running animation", async ({ page }) => {
        const element = page.locator("#sandbox .box")

        // Get initial transform
        const initialTransform = await element.evaluate(
            (el) => window.getComputedStyle(el).transform
        )

        // Wait for animation to progress
        await page.waitForTimeout(500)

        // Get mid-animation transform
        const midTransform = await element.evaluate(
            (el) => window.getComputedStyle(el).transform
        )

        // Verify transform changed
        expect(midTransform).not.toBe(initialTransform)
    })
})