<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Shape across element boundary test</title>
        <script src="../../../resources/js-test.js"></script>
        <style>
            section { padding-left: 1rem; }
            section > div {
                display: inline-block;
                font-size: 1.5rem;
                width: 5rem;
                vertical-align: middle;
            }
            section > span {
                display: inline-block;
                width: 25rem;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <h1>Shape across element boundary test</h1>
        <section>
            <div><span  id="expected">سلام</span></div>
            The word by itself.
        </section>
        <section>
            <div><span id="split">س<span id="red" style="color: red">ل</span>ام</span></div>
            <span>
                Adding a span around a character that forms a ligature.
                Should render the same as the above, except that half
                of the middle glyph should be red.
            </span>
        </section>
        <section>
            <div>سل‍ام</div>
            Same word with a ZWJ character to disallow the ligature.
        </section>
        <section>
            <div><span id="isolated" style="color: red;">ل</span></div>
            The letter in red, in isolation.
        </section>
        <script>
            function width(id)
            {
                var el = document.getElementById(id);
                return el.getBoundingClientRect().width;
            }

            if (Math.abs(width('split') - width('expected')) > 0.1) {
                testFailed('Width of isolated word should match width of' +
                    ' word with markup.');
            } else {
                testPassed('Width of isolated word does match width of' +
                    ' word with markup.');
            }
        
            if (Math.abs(width('red') - width('isolated')) < 0.1) {
                testFailed('Width of partial glyph in ligature should not' +
                    ' match width of isolated glyph.');
            } else {
                testPassed('Width of partial glyph in ligature does not' +
                    ' match width of isolated glyph.');
            }
        </script>
    </body>
<html>