canvas.2d.fontStretch.extra-expanded.html (907B)
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 = new OffscreenCanvas(300, 150); 8 var ctx = canvas.getContext('2d'); 9 10 // P shows as Pass for fontStretch = extra-expanded and shows as fail for 11 // fontStretch = fail. 12 function draw() { 13 ctx.font = '25px test'; 14 ctx.fontStretch = "extra-expanded"; 15 ctx.fillText("P", 10, 40); 16 document.getElementById('c') 17 .getContext("bitmaprenderer") 18 .transferFromImageBitmap(canvas.transferToImageBitmap()); 19 } 20 21 var f = new FontFace('test', 'url(/fonts/pass.woff)'); 22 f.stretch = "extra-expanded"; 23 document.fonts.add(f); 24 25 var f2 = new FontFace('test', 'url(/fonts/fail.woff)'); 26 document.fonts.add(f2); 27 28 Promise.all([f.load(), f2.load()]).then(draw); 29 30 </script>