From 1805acd5d501dafa44d764ae34f9f0706fc72581 Mon Sep 17 00:00:00 2001 From: Dmitry Gozman Date: Tue, 18 Feb 2020 14:30:56 -0800 Subject: [PATCH] test: update animation click test (#1053) --- test/click.spec.js | 68 ++++++++++++++++++++++++++++------------------ 1 file changed, 42 insertions(+), 26 deletions(-) diff --git a/test/click.spec.js b/test/click.spec.js index 2dd4e1cb32..ba7cdc9459 100644 --- a/test/click.spec.js +++ b/test/click.spec.js @@ -403,35 +403,51 @@ module.exports.describe = function({testRunner, expect, playwright, FFOX, CHROMI await page.click('button'); expect(await page.evaluate('window.clicked')).toBe(true); }); - xit('should click on an animated button', async({page}) => { - const buttonSize = 50; + xit('should fail to click a button animated via CSS animations and setInterval', async({page}) => { + // This test has a setInterval that consistently animates a button. + // It checks that we detect the button to be continuously animating, and never try to click it. + // This test exposes two issues: + // - Chromium headless does not issue rafs between first and second animateLeft() calls. + // - Chromium and WebKit keep element bounds the same when for 2 frames when changing left to a new value. + const buttonSize = 10; const containerWidth = 500; - const transition = 500; + const transition = 100; await page.setContent(` - - -
- -
- - - + + +
+ +
+ + + `); - await page.click('button'); - expect(await page.evaluate('window.clicked')).toBe(1); - expect(await page.evaluate('document.querySelector("#button").style.left')).toBe(`${containerWidth - buttonSize}px`); - await new Promise(resolve => setTimeout(resolve, 500)); - await page.click('button'); - expect(await page.evaluate('window.clicked')).toBe(2); - expect(await page.evaluate('document.querySelector("#button").style.left')).toBe('0px'); + await page.evaluate(transition => { + window.setInterval(animateLeft, transition); + animateLeft(); + }, transition); + const error1 = await page.click('button', { timeout: 250 }).catch(e => e); + expect(await page.evaluate('window.clicked')).toBe(0); + expect(error1.message).toContain('timeout 250ms exceeded'); + const error2 = await page.click('button', { timeout: 250 }).catch(e => e); + expect(await page.evaluate('window.clicked')).toBe(0); + expect(error2.message).toContain('timeout 250ms exceeded'); }); });