blob: ebf3cffb621bcc7ec8be90dd32986cc210f26532 [file] [log] [blame]
chang.shu@nokia.comd5cb9102010-05-21 20:47:13 +00001<!DOCTYPE html>
2<title>Canvas test: 2d.text.draw.baseline.middle</title>
3<script src="../tests.js"></script>
4<link rel="stylesheet" href="../tests.css">
chang.shu@nokia.comd5cb9102010-05-21 20:47:13 +00005<style>
6@font-face {
7 font-family: CanvasTest;
8 src: url("../fonts/CanvasTest.ttf");
9}
andreas.kling@nokia.com7817c162010-11-07 13:49:39 +000010</style>
11<body>
12<p id="passtext">Pass</p>
13<p id="failtext">Fail</p>
chang.shu@nokia.comd5cb9102010-05-21 20:47:13 +000014<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
andreas.kling@nokia.com7817c162010-11-07 13:49:39 +000015<p class="output">These images should be identical:</p>
chang.shu@nokia.comd5cb9102010-05-21 20:47:13 +000016<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17<p class="output expectedtext">Expected output:<p><img src="green-100x50.png" class="output expected" id="expected" alt="">
18<ul id="d"></ul>
19<script>
20_addTest(function(canvas, ctx) {
21
22ctx.font = '50px CanvasTest';
23deferTest();
24setTimeout(wrapFunction(function () {
25 ctx.fillStyle = '#f00';
26 ctx.fillRect(0, 0, 100, 50);
27 ctx.fillStyle = '#0f0';
28 ctx.textBaseline = 'middle';
29 ctx.fillText('CC', 0, 25);
30 _assertPixelApprox(canvas, 5,5, 0,255,0,255, "5,5", "0,255,0,255", 2);
31 _assertPixelApprox(canvas, 95,5, 0,255,0,255, "95,5", "0,255,0,255", 2);
32 _assertPixelApprox(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255", 2);
33 _assertPixelApprox(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255", 2);
34 _assertPixelApprox(canvas, 5,45, 0,255,0,255, "5,45", "0,255,0,255", 2);
35 _assertPixelApprox(canvas, 95,45, 0,255,0,255, "95,45", "0,255,0,255", 2);
36}), 500);
37
38
39});
40</script>
41