check that animations are not resetting

vtbag · Oct 28, 2024 · 2ad225d · 2ad225d
1 parent ba5d488
commit 2ad225d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 19 deletions.
diff --git a/src/pages/crossing/vanilla/_Description.astro b/src/pages/crossing/vanilla/_Description.astro
@@ -28,7 +28,7 @@ const PATH_VALUES = `
     <source src="/video.mp4" type="video/mp4" />Your browser does not support the
     video tag.</video
   >
-  <svg id="animated-svg" viewBox="0 0 900 600" width="200" height="112.5" data-vtbag-x="#svg svg-anim:test">
+  <svg viewBox="0 0 900 600" width="200" height="112.5" data-vtbag-x="#svg ~">
     <g transform="translate(400 300)">
     <path>
       <animate
@@ -139,8 +139,6 @@ const PATH_VALUES = `
   }
 
   video, svg {
-/*    margin: auto;
-    display: block; */
     border: inset 10px #8888;
   }
 

diff --git a/tests/01_crossing.spec.ts b/tests/01_crossing.spec.ts
@@ -54,32 +54,29 @@ test.describe("vtbag", () => {
 
 
   test('preserves animations and media timing', async ({ page }) => {
-    // todo: unable to get the video to play yet
     await page.goto('http://localhost:4321/crossing/vanilla/1/');
     await expect(page).toHaveTitle('Vanilla Element Crossing 1/2 | @vtbag');
     await page.evaluate(async () => {
-      const video = document.querySelector("video");
-      video && video.play();
+      document.querySelector("video")!.play();
     });
     await new Promise(r => setTimeout(r, 1000));
     const video1 = await page.$eval('video', el => el.currentTime);
-    const svg1 = await page.$eval(
-      '#animated-svg',
-        (el) => el instanceof SVGSVGElement && el.getCurrentTime()
-      );
-    console.log(video1);
-    console.log(svg1);
-
+    const svg1 = await page.$eval('svg', (el: SVGSVGElement) => el.getCurrentTime());
+    const footer1 =await page.$eval('footer div', el => ~~getComputedStyle(el).transform.split(/,\s*/)[4]!);
+
     await page.click('text=Page 2');
     await expect(page).toHaveTitle('Vanilla Element Crossing 2/2 | @vtbag');
 
     const video2 = await page.$eval("video", (el) => el.currentTime);
-    const svg2 = await page.$eval(
-      '#animated-svg',
-      (el) => el instanceof SVGSVGElement && el.getCurrentTime()
-    );
-    console.log(video2);
-    console.log(svg2);
+    const svg2 = await page.$eval('svg', (el: SVGSVGElement) => el.getCurrentTime());
+    const footer2 =await page.$eval('footer div', el => ~~getComputedStyle(el).transform.split(/,\s*/)[4]!);
+
+    expect(video1).toBeGreaterThan(1);
+    expect(video2).toBeGreaterThan(video1);
+    expect(svg1).toBeGreaterThan(1);
+    expect(svg2).toBeGreaterThan(svg1);
+    expect(footer1).toBeGreaterThan(1);
+    expect(footer2).toBeGreaterThan(footer1);
   });
 });