55 lines
1.3 KiB
HTML
55 lines
1.3 KiB
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>
|