<!DOCTYPE html> <html class="reftest-wait reftest-snapshot-all"> <head> <style type="text/css"> input { -webkit-transition: -webkit-transform 200ms ease-in-out; transition: transform 200ms ease-in-out; } input:focus { -webkit-transform: scale(1.05); transform: scale(1.05); } </style> <script> function boom() { var i = document.querySelector("input"); i.addEventListener("transitionend", function(aEvent) { if (aEvent.propertyName != 'transform' && aEvent.propertyName != '-webkit-transform') { return; } i.removeEventListener("transitionend", arguments.callee, true); i.value = "test"; i.getClientRects(); i.value = ""; i.getClientRects(); i.addEventListener("transitionend", function(aEvent) { if (aEvent.propertyName != 'transform' && aEvent.propertyName != '-webkit-transform') { return; } i.removeEventListener("transitionend", arguments.callee, true); i.getClientRects(); document.documentElement.setAttribute("class", "reftest-snapshot-all"); }, true); i.blur(); i.getClientRects(); }, true); i.focus(); i.getClientRects(); } </script> </head> <body onload="boom()"> <input type="text" placeholder="foo"> </body> </html>