598726-1.html (1499B)
1 <!DOCTYPE html> 2 <html class="reftest-wait reftest-snapshot-all"> 3 <head> 4 <style type="text/css"> 5 input { 6 -webkit-transition: -webkit-transform 200ms ease-in-out; 7 transition: transform 200ms ease-in-out; 8 } 9 input:focus { 10 -webkit-transform: scale(1.05); 11 transform: scale(1.05); 12 } 13 </style> 14 <script> 15 function boom() { 16 var i = document.querySelector("input"); 17 i.addEventListener("transitionend", function(aEvent) { 18 if (aEvent.propertyName != 'transform' && 19 aEvent.propertyName != '-webkit-transform') { 20 return; 21 } 22 i.removeEventListener("transitionend", arguments.callee, true); 23 i.value = "test"; 24 i.getClientRects(); 25 i.value = ""; 26 i.getClientRects(); 27 i.addEventListener("transitionend", function(aEvent) { 28 if (aEvent.propertyName != 'transform' && 29 aEvent.propertyName != '-webkit-transform') { 30 return; 31 } 32 i.removeEventListener("transitionend", arguments.callee, true); 33 i.getClientRects(); 34 document.documentElement.setAttribute("class", "reftest-snapshot-all"); 35 }, true); 36 i.blur(); 37 i.getClientRects(); 38 }, true); 39 i.focus(); 40 i.getClientRects(); 41 } 42 </script> 43 </head> 44 <body onload="boom()"> 45 <input type="text" placeholder="foo"> 46 </body> 47 </html>