canvas.2d.fontStretch.normal.html (988B)
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 = 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 document.getElementById('c') 16 .getContext("bitmaprenderer") 17 .transferFromImageBitmap(canvas.transferToImageBitmap()); 18 } 19 20 var f = new FontFace('test', 'url(/fonts/fail.woff)'); 21 f.stretch = "expanded"; 22 document.fonts.add(f); 23 24 var f1 = new FontFace('test', 'url(/fonts/pass.woff)'); 25 document.fonts.add(f1); 26 27 var f2 = new FontFace('test', 'url(/fonts/fail.woff)'); 28 f2.stretch = "condensed"; 29 document.fonts.add(f2); 30 31 Promise.all([f.load(), f1.load(), f2.load()]).then(draw); 32 33 </script>