Import 2dcontext Web Platform Tests
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / 2dcontext / drawing-text-to-the-canvas / 2d.text.draw.fill.maxWidth.fontface.html
1 <!DOCTYPE html>
2 <!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
3 <title>Canvas test: 2d.text.draw.fill.maxWidth.fontface</title>
4 <script src="/resources/testharness.js"></script>
5 <script src="/resources/testharnessreport.js"></script>
6 <script src="/common/canvas-tests.js"></script>
7 <link rel="stylesheet" href="/common/canvas-tests.css">
8 <style>
9 @font-face {
10   font-family: CanvasTest;
11   src: url("/fonts/CanvasTest.ttf");
12 }
13 </style>
14 <body class="show_output">
15
16 <h1>2d.text.draw.fill.maxWidth.fontface</h1>
17 <p class="desc">fillText works on @font-face fonts</p>
18
19
20 <span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
21 <p class="output">Actual output:</p>
22 <canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
23 <p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
24 <ul id="d"></ul>
25 <script>
26 var t = async_test("fillText works on @font-face fonts");
27 _addTest(function(canvas, ctx) {
28
29 ctx.font = '50px CanvasTest';
30 deferTest();
31 step_timeout(t.step_func_done(function () {
32     ctx.fillStyle = '#0f0';
33     ctx.fillRect(0, 0, 100, 50);
34     ctx.fillStyle = '#f00';
35     ctx.fillText('EEEE', -50, 37.5, 40);
36     _assertPixelApprox(canvas, 5,5, 0,255,0,255, "5,5", "0,255,0,255", 2);
37     _assertPixelApprox(canvas, 95,5, 0,255,0,255, "95,5", "0,255,0,255", 2);
38     _assertPixelApprox(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255", 2);
39     _assertPixelApprox(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255", 2);
40 }), 500);
41
42
43 });
44 </script>
45