set-transform-and-top.html | Explore in Territory

<html>
<head>
<style>
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 60px;
    left: 40px;
}
</style>
<script type="text/javascript">

function checkPosition(id) {
    var element = document.getElementById(id);
    var y = element.getBoundingClientRect().top;

    var resultString = '';
    if (y > 250) {
        resultString += "PASS - Element " + id + " moved past y=250px";
    } else {
        resultString += "FAIL - Element " + id + " still at y=" + y + "px";
    }

    var div = document.createElement("div");
    div.appendChild(document.createTextNode(resultString));
    document.body.appendChild(div);
}


function runTest() {
    checkPosition("a");
    checkPosition("b");

    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.notifyDone();
    }
}
</script>
</head>
<body>

<div class="box" id="a">A</div>
<div class="box" id="b">B</div>

<script>
    if (window.testRunner)
        testRunner.waitUntilDone();

    setTimeout(move, 10);
    function move() {
        document.getElementById('a').style.top = "300px";
        document.getElementById('a').style.webkitTransform = "rotate(45deg)";
        document.getElementById('b').style.top = "300px";
        document.getElementById('b').style.webkitTransform = "rotate(90deg)";
        setTimeout(runTest, 0);
    }
</script>
</body>
</html>
chromium/third_party/blink/web_tests/transforms/2d/set-transform-and-top.html
