2d.text.measure.strokeTextCluster-align.tentative.html (3404B)
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 <link rel="match" href="2d.text.measure.strokeTextCluster-align.tentative-expected.html"> 6 <title>Canvas test: 2d.text.measure.strokeTextCluster-align.tentative</title> 7 <h1>2d.text.measure.strokeTextCluster-align.tentative</h1> 8 <p class="desc">Test that strokeTextCluster() correctly positions the text, taking into account the textAlign from the context at the time the text was measured.</p> 9 10 <div class="grid-container" style="--grid-width: 3"> 11 <span> 12 <div>ctx_align_left</div> 13 <canvas class="grid-cell-content" id="canvas0" width="250" height="43"> 14 <p class="fallback">FAIL (fallback content)</p> 15 </canvas> 16 <script type="module"> 17 const canvas = new OffscreenCanvas(250, 43); 18 const ctx = canvas.getContext('2d'); 19 20 ctx.font = '20px serif'; 21 const text = 'Test ☺️ א'; 22 const x = canvas.width / 2; 23 const y = canvas.height / 2; 24 25 ctx.textAlign = 'left'; 26 let tm = ctx.measureText(text); 27 const clusters = tm.getTextClusters(); 28 29 // Rendering all clusters with the same (x, y) parameters must be 30 // equivalent to a strokeText() call at (x, y). 31 for (const cluster of clusters) { 32 ctx.strokeTextCluster(cluster, x, y); 33 } 34 35 const outputCanvas = document.getElementById("canvas0"); 36 const outputCtx = outputCanvas.getContext('2d'); 37 outputCtx.drawImage(canvas, 0, 0); 38 </script> 39 </span> 40 41 <span> 42 <div>ctx_align_center</div> 43 <canvas class="grid-cell-content" id="canvas1" width="250" height="43"> 44 <p class="fallback">FAIL (fallback content)</p> 45 </canvas> 46 <script type="module"> 47 const canvas = new OffscreenCanvas(250, 43); 48 const ctx = canvas.getContext('2d'); 49 50 ctx.font = '20px serif'; 51 const text = 'Test ☺️ א'; 52 const x = canvas.width / 2; 53 const y = canvas.height / 2; 54 55 ctx.textAlign = 'center'; 56 let tm = ctx.measureText(text); 57 const clusters = tm.getTextClusters(); 58 59 // Rendering all clusters with the same (x, y) parameters must be 60 // equivalent to a strokeText() call at (x, y). 61 for (const cluster of clusters) { 62 ctx.strokeTextCluster(cluster, x, y); 63 } 64 65 const outputCanvas = document.getElementById("canvas1"); 66 const outputCtx = outputCanvas.getContext('2d'); 67 outputCtx.drawImage(canvas, 0, 0); 68 </script> 69 </span> 70 71 <span> 72 <div>ctx_align_right</div> 73 <canvas class="grid-cell-content" id="canvas2" width="250" height="43"> 74 <p class="fallback">FAIL (fallback content)</p> 75 </canvas> 76 <script type="module"> 77 const canvas = new OffscreenCanvas(250, 43); 78 const ctx = canvas.getContext('2d'); 79 80 ctx.font = '20px serif'; 81 const text = 'Test ☺️ א'; 82 const x = canvas.width / 2; 83 const y = canvas.height / 2; 84 85 ctx.textAlign = 'right'; 86 let tm = ctx.measureText(text); 87 const clusters = tm.getTextClusters(); 88 89 // Rendering all clusters with the same (x, y) parameters must be 90 // equivalent to a strokeText() call at (x, y). 91 for (const cluster of clusters) { 92 ctx.strokeTextCluster(cluster, x, y); 93 } 94 95 const outputCanvas = document.getElementById("canvas2"); 96 const outputCtx = outputCanvas.getContext('2d'); 97 outputCtx.drawImage(canvas, 0, 0); 98 </script> 99 </span> 100 101 </div>