<!DOCTYPE HTML>
<html>
<style>
canvas {
    border: 1px solid black;
}
.pass {
    color: green;
    font-weight: bold;
}

.fail {
    color: red;
    font-weight: bold;
}
</style>
<body onload="runTest();">
<div>
<span>Tests that setting font of Canvas 2d context always uses up-to-date style: <span id="result"></span></span><br>
<canvas id="expected"></canvas>
<canvas id="actual"></canvas>
</div>
<script type="text/javascript">
if (window.testRunner)
    testRunner.dumpAsText();

function drawCanvasText(id, text, forceStyleUpdate)
{
    var canvasElement = document.getElementById(id);
    var context = canvasElement.getContext('2d');
    context.font = '20px Arial';
    context.fillText(id, 0, 20);
    canvasElement.offsetTop;
    canvasElement.style.fontSize = '64px';

    if (forceStyleUpdate)
        canvasElement.offsetTop;
    context.font = '1em Calibri';
    context.fillText(text, 0, 100);
    return context.font;
}

function runTest()
{
    var expectedFontSize = drawCanvasText('expected', 'Some Text', true);
    var actualFontSize = drawCanvasText('actual', 'Some Text');
    var resultElement = document.getElementById('result');
    var result = expectedFontSize === actualFontSize ? 'PASS' : 'FAIL';
    resultElement.textContent = result;
    resultElement.className = (result === 'PASS') ? 'pass' : 'fail';
}
</script>
</body>
</html>