<!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>