<html>
<head>
  <script>
    var longInlineBlockDirectionText = "longlonglonglonglongtext<br>longlonglonglonglongtext<br>longlonglonglonglongtext<br>longlonglonglonglongtext<br>longlonglonglonglongtext<br>longlonglonglonglongtext<br>";
    var longInlineBaseDirectionText = "longlonglonglonglongtext";
    var longBlockFlowDirectionText="long<br>long<br>long<br>long<br>long<br>long<br>long<br>";
    var shortText = "l";
    function setupTest() {
        // horizontal overflow.
        var horizontalOverflow = testResults[currentTest][1];
        var verticalOverflow = testResults[currentTest][2];

        if (horizontalOverflow && verticalOverflow) {
            document.getElementById('child').innerHTML = longInlineBlockDirectionText;
        } else if (horizontalOverflow) {
            document.getElementById('child').innerHTML = longBlockFlowDirectionText;
        } else if (verticalOverflow) {
            document.getElementById('child').innerHTML = longInlineBaseDirectionText;
        } else {
            document.getElementById('child').innerHTML = shortText;
        }
    }

    function finished(result)
    {
        document.getElementById('result').innerHTML = result;
        document.getElementById('child').innerHTML = "";

        if (window.testRunner)
            testRunner.notifyDone();
    }

    function nextTest() {
        if (currentTest == testResults.length) {
            finished("SUCCESS");
            return;
        }

        forceLayout();
        setupTest();
        forceLayout();
        forceLayout();
    }

    function overflowChanged(event) {
        var result = [event.orient, event.horizontalOverflow, event.verticalOverflow];

        if ('' + result == testResults[currentTest]) {
            currentTest++;
            nextTest();
        } else
            finished("FAILURE: expected " + testResults[currentTest] + " got " + result);
    }

    function forceLayout() {
        document.body.offsetTop;
    }

    function runTest() {
        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }

        testResults = [[OverflowEvent.HORIZONTAL, true, false],
                       [OverflowEvent.HORIZONTAL, false, false],
                       [OverflowEvent.VERTICAL, false, true],
                       [OverflowEvent.VERTICAL, false, false],
                       [OverflowEvent.BOTH, true, true],
                       [OverflowEvent.BOTH, false, false],
                       [OverflowEvent.VERTICAL, false, true],
                       [OverflowEvent.BOTH, true, false],
                       [OverflowEvent.BOTH, false, true]];

        currentTest = 0;

        var c = document.getElementById('container');
        c.addEventListener('overflowchanged', overflowChanged, false);
        nextTest();
    }
  </script>
</head>
<body onload="runTest()">
    <div id="container" style="width:100; height:100px; border: solid red 2px; overflow: hidden">
        <div id="child" style="margin-top: 30px; margin-left: 30px; font-family: Ahem; border: solid blue 2px; -webkit-writing-mode: vertical-lr;"></div>
    </div>
    This tests that overflowchanged events are fired correctly on nodes with writing-mode: vertical-lr. If the test is successful, the text "SUCCESS" should be shown below.
    <div id="result">FAILURE</div>
</body>
</html>