canvas.2d.fontStretch.normal.html (842B)
1 <!DOCTYPE html> 2 <title>Canvas test: 2d.text.fontStretch</title> 3 <link rel="match" href="canvas.2d.fontStretch-ref.html"> 4 <canvas id="c" class="output"><p class="fallback">FAIL (fallback content)</p></canvas> 5 <script> 6 7 var canvas = document.getElementById("c"); 8 var ctx = canvas.getContext('2d'); 9 10 // P shows as Pass for fontStretch = normal and shows as fail for 11 // fontStretch = expanded or condensed. 12 function draw() { 13 ctx.font = '25px test'; 14 ctx.fillText("P", 10, 40); 15 } 16 17 var f = new FontFace('test', 'url(/fonts/fail.woff)'); 18 f.stretch = "expanded"; 19 document.fonts.add(f); 20 21 var f1 = new FontFace('test', 'url(/fonts/pass.woff)'); 22 document.fonts.add(f1); 23 24 var f2 = new FontFace('test', 'url(/fonts/fail.woff)'); 25 f2.stretch = "condensed"; 26 document.fonts.add(f2); 27 28 Promise.all([f.load(), f1.load(), f2.load()]).then(draw); 29 30 </script>