<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8">
        <style>
            div {
                font-size: 24pt;
                position: relative;
            }
            div > span {
                visibility: hidden;
                display: inline-block;
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 10pt;
                background: white;
            }
        </style>
    </head>
    <body>
        <div>ب-بّ-ب<span id="mask">&nbsp;</span></div>
        <p>
            The three Arabic glyphs above should have the same baseline.
        </p>
        <script>
            // Hide combining mark when running as test and try to match
            // with the same text without the mark.
            if (window.testRunner)
                document.getElementById('mask').style.visibility = 'visible';
        </script>
    </body>
</html>