LayoutTests/fast/canvas/canvas-set-font-with-updated-style.html - WebKit - Git at Google

 <!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>
	<!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>