fix: request an animation frame to fix flaky clickablePoint test (#7587)

Sometimes an element has not been layed out yet and, in this case,
clickablePoint fails because backend cannot compute content quads.

Co-authored-by: Jan Scheffler <janscheffler@chromium.org>

test/jshandle.spec.ts

@@ -309,7 +309,9 @@ describe('JSHandle', function () {
           <div style="cursor: pointer; width: 120px; height: 60px; margin: 30px; padding: 15px;"></div>
         `;
       });
-
+      await page.evaluate(async () => {
+        return new Promise((resolve) => window.requestAnimationFrame(resolve));
+      });
       const divHandle = await page.$('div');
       expect(await divHandle.clickablePoint()).toEqual({
         x: 45 + 60, // margin + middle point offset
@@ -335,6 +337,9 @@ describe('JSHandle', function () {
           <iframe style="border: none; margin: 0; padding: 0;" seamless sandbox srcdoc="<style>* { margin: 0; padding: 0;}</style><div style='cursor: pointer; width: 120px; height: 60px; margin: 30px; padding: 15px;' />"></iframe>
         `;
       });
+      await page.evaluate(async () => {
+        return new Promise((resolve) => window.requestAnimationFrame(resolve));
+      });
       const frame = page.frames()[1];
       const divHandle = await frame.$('div');
       expect(await divHandle.clickablePoint()).toEqual({