<!DOCTYPE HTML>
<style>
body {
direction: rtl;
overflow: hidden;
}
#transformed {
position: absolute;
left: 0;
top: 0;
transform: translate(-50px, 0px);
height: 200px;
width: 200px;
background-color: lightgreen;
}
</style>
<div id="transformed">This box should be exactly in the top-left corner</div>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
requestAnimationFrame(function() {
var transformed = document.getElementById('transformed');
transformed.style.transform = 'none';
if (window.testRunner)
testRunner.notifyDone();
});
</script>