<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">

// Slightly more than one layout unit.
var tolerance = 0.02;

function verifyTextWidth(textToMeasure, direction) {
    var span = document.createElement('span');
    document.getElementById(direction + '_text').appendChild(span);
    span.textContent = textToMeasure;
    span.setAttribute('style', 'font-size:15px;font-family:Arial;');
    var rect = span.getBoundingClientRect();

    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext("2d");
    ctx.font = '15px Arial';
    ctx.direction = direction;
    ctx.textBaseline = 'top';
    ctx.textAlign = 'start';

    // verify that measureText returns the same width as computed by the DOM
    var resultArea = document.getElementById(direction + '_result');
    var measuredWidth = ctx.measureText(textToMeasure).width;
    if (Math.abs(measuredWidth - rect.width) < tolerance) {
        // Don't print the width value when test passes to avoid platform-specific baselines.
        resultArea.textContent = 'PASSED: ' + direction;
    } else {
        resultArea.textContent = 'FAILED: ' + direction + '. Expected width: ' + rect.width + '. Actual width: ' + measuredWidth;
    }

}

window.onload = function () {
    if (window.testRunner) {
        testRunner.dumpAsText();
    }

    var million = 'ملايين';
    var rtl = '\u202e';
    var ltr = '\u202d';
    var stop = '\u202c';

    verifyTextWidth(rtl + million + stop, 'rtl');
    verifyTextWidth(ltr + million + stop, 'ltr');
}

</script>
<div id='rtl_text'></div>
<div id='ltr_text'></div>
<span id='rtl_result'>FAILED: no result!</span>
<br>
<span id='ltr_result'>FAILED: no result!</span>
</body>
</html>