test(screencast): test that css animations are recorded (#3427)

microsoft · Aug 13, 2020 · 68e6ab8 · 68e6ab8
1 parent 4bb2658
commit 68e6ab8
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 5 deletions.
diff --git a/test/assets/rotate-z.html b/test/assets/rotate-z.html
@@ -0,0 +1,26 @@
+<html>
+  <head>
+    <style type="text/css">
+      .square {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 200px;
+        height: 100px;
+        background-color: red;
+        animation-name: z-spin;
+        animation-duration: 5s;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+      }
+
+      @keyframes z-spin {
+        0%    { transform: rotateZ(0deg); }
+        100%  { transform: rotateZ(360deg); }
+      }
+    </style>
+  </head>
+  <body >
+      <div class="square"></div>
+  </body>
+</html>
diff --git a/test/screencast.spec.ts b/test/screencast.spec.ts
@@ -164,18 +164,18 @@ class VideoPlayer {
     }
   }
 
-  async pixels() {
-    const pixels = await this._page.$eval('video', (video:HTMLVideoElement) => {
+  async pixels(point = {x: 0, y: 0}) {
+    const pixels = await this._page.$eval('video', (video:HTMLVideoElement, point) => {
       let canvas = document.createElement("canvas");
       if (!video.videoWidth || !video.videoHeight)
         throw new Error("Video element is empty");
       canvas.width = video.videoWidth;
       canvas.height = video.videoHeight;
       const context = canvas.getContext('2d');
       context.drawImage(video, 0, 0);
-      const imgd = context.getImageData(0, 0, 10, 10);
+      const imgd = context.getImageData(point.x, point.y, 10, 10);
       return Array.from(imgd.data);
-    });
+    }, point);
     return pixels;
   }
 }
@@ -206,7 +206,6 @@ it.fail(CHROMIUM)('should capture static page', async({page, persistentDirectory
   expectAll(pixels, almostRed);
 });
 
-// TODO: the test fails in headful Firefox when running under xvfb.
 it.fail(CHROMIUM)('should capture navigation', async({page, persistentDirectory, server, videoPlayer, toImpl}) => {
   if (!toImpl)
     return;
@@ -239,3 +238,28 @@ it.fail(CHROMIUM)('should capture navigation', async({page, persistentDirectory,
     expectAll(pixels, almostGrey);
   }
 });
+
+it.fail(CHROMIUM)('should capture css transformation', async({page, persistentDirectory, server, videoPlayer, toImpl}) => {
+  if (!toImpl)
+    return;
+  const videoFile = path.join(persistentDirectory, 'v.webm');
+  await page.goto(server.PREFIX + '/rotate-z.html');
+  await toImpl(page)._delegate.startVideoRecording({outputFile: videoFile, width: 640, height: 480});
+  // TODO: in WebKit figure out why video size is not reported correctly for
+  // static pictures.
+  if (HEADLESS && WEBKIT)
+    await page.setViewportSize({width: 1270, height: 950});
+  await new Promise(r => setTimeout(r, 300));
+  await toImpl(page)._delegate.stopVideoRecording();
+  expect(fs.existsSync(videoFile)).toBe(true);
+
+  await videoPlayer.load(videoFile);
+  const duration = await videoPlayer.duration();
+  expect(duration).toBeGreaterThan(0);
+
+  {
+    await videoPlayer.seekLastNonEmptyFrame();
+    const pixels = await videoPlayer.pixels({x: 95, y: 45});
+    expectAll(pixels, almostRed);
+  }
+});