<!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true AsyncFrameScrollingEnabled=true ] -->
<style>
#outer {
    overflow: scroll;
    width: 400px;
    height: 400px;
    border: 2px solid yellow;
}
#inner {
    overflow: auto;
    width: 300px;
    height: 300px;
    border: 2px solid blue;
}
#innercontent {
    width: 1000px;
    height: 1000px;
    border: 10px solid green;
}
#outercontent {
    width: 1000px;
    height: 1000px;
    border: 10px solid red;
}
</style>
<script src="../../resources/ui-helper.js"></script>
<script>
if (window.testRunner)
    testRunner.waitUntilDone();

async function scroll() {
    let removed = outercontent;
    outercontent.remove();
    document.offsetLeft;

    await new Promise(requestAnimationFrame);

    outer.appendChild(removed);
    testRunner.notifyDone();
}

async function doTest() {
    if (!window.testRunner)
        return;
    inner.addEventListener("scroll", scroll);

    await UIHelper.immediateScrollElementAtContentPointToOffset(50, 50, 0, 200);
}

window.addEventListener('load', doTest, false);
</script>

<div id=outer>
    <div id=inner>
        <div id=innercontent>This should be scrollable</div>
    </div>
    <div id=outercontent class=content></div>
</div>