2d.text.measure.fillTextCluster-align.tentative-expected.html (2441B)
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-align.tentative</title> 6 <h1>2d.text.measure.fillTextCluster-align.tentative</h1> 7 <p class="desc">Test that fillTextCluster() correctly positions the text, taking into account the textAlign from the context at the time the text was measured.</p> 8 9 <div class="grid-container" style="--grid-width: 3"> 10 <span> 11 <div>ctx_align_left</div> 12 <canvas class="grid-cell-content" id="canvas0" width="250" height="43"> 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 ☺️ א'; 21 const x = canvas.width / 2; 22 const y = canvas.height / 2; 23 24 ctx.textAlign = 'left'; 25 26 // Rendering all clusters with the same (x, y) parameters must be 27 // equivalent to a fillText() call at (x, y). 28 ctx.fillText(text, x, y); 29 </script> 30 </span> 31 32 <span> 33 <div>ctx_align_center</div> 34 <canvas class="grid-cell-content" id="canvas1" width="250" height="43"> 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 ☺️ א'; 43 const x = canvas.width / 2; 44 const y = canvas.height / 2; 45 46 ctx.textAlign = 'center'; 47 48 // Rendering all clusters with the same (x, y) parameters must be 49 // equivalent to a fillText() call at (x, y). 50 ctx.fillText(text, x, y); 51 </script> 52 </span> 53 54 <span> 55 <div>ctx_align_right</div> 56 <canvas class="grid-cell-content" id="canvas2" width="250" height="43"> 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 ☺️ א'; 65 const x = canvas.width / 2; 66 const y = canvas.height / 2; 67 68 ctx.textAlign = 'right'; 69 70 // Rendering all clusters with the same (x, y) parameters must be 71 // equivalent to a fillText() call at (x, y). 72 ctx.fillText(text, x, y); 73 </script> 74 </span> 75 76 </div>