2d.text.measure.fillTextCluster-drawing-styles-change.tentative-expected.html (2673B)
1 <!DOCTYPE html> 2 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> 3 <meta charset="UTF-8"> 4 <link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css"> 5 <title>Canvas test: 2d.text.measure.fillTextCluster-drawing-styles-change.tentative</title> 6 <h1>2d.text.measure.fillTextCluster-drawing-styles-change.tentative</h1> 7 <p class="desc">Test that fillTextCluster() renders using the drawing styles as they were when `ctx.measureText()` was called, regardless of any changes in the context since.</p> 8 9 <div class="grid-container" style="--grid-width: 2"> 10 <span> 11 <div>letter_spacing</div> 12 <canvas class="grid-cell-content" id="canvas0" width="250" height="80"> 13 <p class="fallback">FAIL (fallback content)</p> 14 </canvas> 15 <script type="module"> 16 const canvas = document.getElementById("canvas0"); 17 const ctx = canvas.getContext('2d'); 18 19 ctx.font = '20px serif'; 20 const text = 'Test ♦️ find'; 21 22 ctx.letterSpacing = '2px'; 23 24 ctx.fillText(text, 10, 25); 25 26 ctx.letterSpacing = '6px'; 27 28 ctx.fillText(text, 10, 50); 29 </script> 30 </span> 31 32 <span> 33 <div>word_spacing</div> 34 <canvas class="grid-cell-content" id="canvas1" width="250" height="80"> 35 <p class="fallback">FAIL (fallback content)</p> 36 </canvas> 37 <script type="module"> 38 const canvas = document.getElementById("canvas1"); 39 const ctx = canvas.getContext('2d'); 40 41 ctx.font = '20px serif'; 42 const text = 'Test ♦️ find'; 43 44 ctx.wordSpacing = '2px'; 45 46 ctx.fillText(text, 10, 25); 47 48 ctx.wordSpacing = '10px'; 49 50 ctx.fillText(text, 10, 50); 51 </script> 52 </span> 53 54 <span> 55 <div>font_kerning</div> 56 <canvas class="grid-cell-content" id="canvas2" width="250" height="80"> 57 <p class="fallback">FAIL (fallback content)</p> 58 </canvas> 59 <script type="module"> 60 const canvas = document.getElementById("canvas2"); 61 const ctx = canvas.getContext('2d'); 62 63 ctx.font = '20px serif'; 64 const text = 'Test ♦️ find'; 65 66 ctx.fontKerning = 'none'; 67 68 ctx.fillText(text, 10, 25); 69 70 ctx.fontKerning = 'normal'; 71 72 ctx.fillText(text, 10, 50); 73 </script> 74 </span> 75 76 <span> 77 <div>font_variant_caps</div> 78 <canvas class="grid-cell-content" id="canvas3" width="250" height="80"> 79 <p class="fallback">FAIL (fallback content)</p> 80 </canvas> 81 <script type="module"> 82 const canvas = document.getElementById("canvas3"); 83 const ctx = canvas.getContext('2d'); 84 85 ctx.font = '20px serif'; 86 const text = 'Test ♦️ find'; 87 88 ctx.fontVariantCaps = 'small-caps'; 89 90 ctx.fillText(text, 10, 25); 91 92 ctx.fontVariantCaps = 'all-small-caps'; 93 94 ctx.fillText(text, 10, 50); 95 </script> 96 </span> 97 98 </div>