<!DOCTYPE html>
<html>
<head>
<script src="resources/text-based-repaint.js"></script>
<style>
#menu {
    float: left;
    position: relative;
}

#watches {
    float: left;
    transform: scale(1,1);
}

#placeholder {
    position: relative;
    backface-visibility: hidden;
}

#submenu {
    position: absolute;
    top: -200px;
    background: red;
}
</style>

</head>
<body>
<div>This test has passed if there is no red rectangle below.</div>
<ul>
    <li id="watches"><span id="placeholder"></span></li>
    <li id="menu">
        <ul id="submenu">
            <li></li>
        </ul>
    </li>
</ul>

<script>
if (window.testRunner)
    testRunner.waitUntilDone();
window.testIsAsync = true;

var submenu = document.getElementById("submenu");
function repaintTest()
{
    submenu.style.top = "-200px";
    finishRepaintTest();
}

window.requestAnimationFrame(function() {
    submenu.style.top = "50px";
    window.requestAnimationFrame(function() {
        runRepaintTest();
    });
});
</script>

</body>
</html>