<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Normalized String Test</title>
</head>

<body>
<p>On success, two same text string with equal width will be rendered.</p>
<canvas id="myCanvas" width="300px" height="300px" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<div id="console"></div>

<script type="text/javascript">
function compareImageData(img1,img2)
{
    if(img1.data.length != img2.data.length)
        return false;

    for(var i = 0; i < img1.data.length; ++i){
        if(img1.data[i] != img2.data[i])
            return false;
    }
    return true;
}

function compareStrings(string1, string2, fontSize, ctx, yCo)
{
    ctx.fillText(string1, 10, yCo);
    var imgDataCombinedText = ctx.getImageData(10,yCo-fontSize, ctx.measureText(string1).width,fontSize);

    yCo += fontSize * 2;
    ctx.fillText(string2, 10, yCo);
    var imgData = ctx.getImageData(10, yCo-fontSize, ctx.measureText(string2).width,fontSize);
    return compareImageData(imgDataCombinedText, imgData);
}

if (window.testRunner)
    testRunner.dumpAsText();

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var yCo = 30;
var testFlag = false;
var fontFamily = "Arial, san-serif";
var fontSize = 20;
ctx.font = fontSize + "px " + fontFamily;

// This will test both Complex and Simple code path
var latinString="Sample string \u0009 \u000A \u000D string end";
var normalizedLatinString="Sample string \u0020 \u0020 \u0020 string end";

var HindiString="हिन्दी \u0009 \u000A \u000D हिन्दी ";
var normalizedHindiString="हिन्दी \u0020 \u0020 \u0020 हिन्दी ";

testFlag = compareStrings(latinString, normalizedLatinString, fontSize, ctx, yCo);
yCo += fontSize * 4;
testFlag = compareStrings(HindiString, normalizedHindiString, fontSize, ctx, yCo);
if (testFlag)
    document.getElementById("console").innerHTML = "TEST PASSED";
else
    document.getElementById("console").innerHTML = "TEST FAILED";

</script>
</body>
</html>