<head>
<style type="text/css">
  .ahem { font: 20px Ahem; }
</style>
<script>

if (window.testRunner)
    testRunner.dumpAsText();

var onMacPlatform = navigator.userAgent.search(/\bMac OS X\b/) != -1;

function runTest() {
    runFrameScrollTest();
    runDivScrollTest();
}

function generateContent() {
    var content = "";
    for (var i = 0; i < 10; ++i)
        content += "<p>line " + i + "</p>\n";
    return content;
}

function runFrameScrollTest() {
    var frame = frames[0];
    var doc = frame.document;
    var body = doc.body;
    body.innerHTML = generateContent();
    frame.focus();
    frame.getSelection().setPosition(body.firstChild, 0);
    if (onMacPlatform)
        offsets = [ 55, 175 ];
    else 
        offsets = [ 120, 240 ];
    runScrollingTest("iframe", frame, offsets, function() { return frame.pageYOffset; });
}

function runDivScrollTest() {
    var editable = document.getElementById('editable');
    editable.innerHTML = generateContent();
    editable.focus();
    window.getSelection().setPosition(editable, 0);
    if (onMacPlatform)
        offsets = [ 75, 195 ];
    else 
        offsets = [ 140, 260 ];
    runScrollingTest("div", editable, offsets, function() { return editable.scrollTop; });
}

function runScrollingTest(testName, frame, offsets, scrollFunction) {
    var tolerance = 0;
    var modifiers = onMacPlatform ? ["altKey"] : [];
    
    if (!window.eventSender)
        return;

    eventSender.keyDown("pageDown", modifiers);
    if (Math.abs(scrollFunction() - offsets[0]) > tolerance) {
        throw "Frame viewport should be around " + offsets[0] +
            "px , not at " + scrollFunction();
    }

    eventSender.keyDown("pageDown", modifiers);
    if (Math.abs(scrollFunction() - offsets[1]) > tolerance) {
        throw "Frame viewport should be around " + offsets[1] +
            "px , not " + scrollFunction();
    }

    eventSender.keyDown("pageUp", modifiers);
    if (Math.abs(scrollFunction() - offsets[0]) > tolerance) {
        throw "Frame viewport should be around " + offsets[0] +
            "px , not at " + scrollFunction();
    }

    document.getElementById("results").innerHTML += testName + " PASS<br/>";
}
</script>
</head>
<body onload="runTest()">
<div>Page up/down (option+page up/down on Mac) should move the move cursor and scroll the content
in contenteditable elements. This sample covers scroll position test of a) iframe element containing
contenteditable body and b) content editable div element. Even though the cursor will move exactly to
the same location on all platforms (covered by test option-page-up-down.html), please note that Mac will
scroll the visible area by placing the cursor position in the middle. All other platforms will scroll by
keeping the cursor aligned with the top edge of the visible area. </div>
<iframe src="../resources/contenteditable-iframe-fixed-size-src.html" style="height:150px; padding: 0px;"></iframe>
<div id="editable" contenteditable="true" class="ahem" style="height:150px; overflow:auto; padding: 0px; margin: 0px;"></div>
<div id="results"></div>
</body>