How to test (automatedly) that an operation occurs after browser repaint?

问题

According to the comments of this blog post, the following technique executes an operation asynchronously but waits for a repaint:

function nextTick(callback) {
    var img = new Image;
    img.onerror = callback;
    img.src = 'data:image/png,' + Math.random();
}

whereas this one does not wait for a repaint:

var mc = new MessageChannel;
function nextTick(callback) {
    mc.port1.onmessage = callback;
    mc.port2.postMessage(0);
}

How could I verify this, programmatically, in a way that automated tests running on multiple platforms/browsers could check?

回答1:

You may want to use requestAnimationFrame instead of the workaround in the blog post.

Read more about it at Paul Irish's blog http://paulirish.com/2011/requestanimationframe-for-smart-animating/

来源：https://stackoverflow.com/questions/7612864/how-to-test-automatedly-that-an-operation-occurs-after-browser-repaint