<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #test {
                font-family: arial;
                font-size: 300%;
            }
        </style>
    </head>
    <body>
        <section id="test">
            بِِِِِِِِِِِِِِِِِِِِِِِِِِِِِِِا<br><span>test 1</span><br><span>test 2</span>
        </section>
        <section>
            <p>
                Tests that the glyph overflow rect, used for repaint, is
                correctly computed. After selecting and unselecting either
                <code>test</code> line above the harakat from the first line are
                correctly repainted.
            </p>
        </section>
        <script>
            if (window.testRunner)
                testRunner.waitUntilDone();
            
            var testElements = document.getElementById('test').
                getElementsByTagName('span');

            window.setTimeout(function() {
                var text = testElements[0].firstChild;
                window.getSelection().setBaseAndExtent(text, 0, text, text.length);
                window.setTimeout(function() {
                    var text = testElements[1].firstChild;
                    window.getSelection().setBaseAndExtent(text, 0, text, text.length);
                    window.setTimeout(function() {
                        var text = testElements[1].firstChild;
                        window.getSelection().setBaseAndExtent(text, 3, text, text.length);
                        if (window.testRunner)
                            testRunner.notifyDone();
                    }, 0);
                }, 0);                
            }, 0);
        </script>
    </body>
</html>