2d.text.measure.fillTextCluster-baseline.tentative.html (3694B)
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.fillTextCluster-baseline.tentative-expected.html"> 6 <title>Canvas test: 2d.text.measure.fillTextCluster-baseline.tentative</title> 7 <h1>2d.text.measure.fillTextCluster-baseline.tentative</h1> 8 <p class="desc">Test that fillTextCluster() correctly positions the text, taking into account the textBaseline from the context at the time the text was measured.</p> 9 10 <div class="grid-container" style="--grid-width: 4"> 11 <span> 12 <div>ctx_baseline_top</div> 13 <canvas class="grid-cell-content" id="canvas0" width="180" height="43"> 14 <p class="fallback">FAIL (fallback content)</p> 15 </canvas> 16 <script type="module"> 17 const canvas = document.getElementById("canvas0"); 18 const ctx = canvas.getContext('2d'); 19 20 ctx.font = '20px serif'; 21 const text = 'Test ☺️ א'; 22 const x = 20; 23 const y = canvas.height / 2; 24 25 ctx.textBaseline = 'top'; 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 fillText() call at (x, y). 31 for (const cluster of clusters) { 32 ctx.fillTextCluster(cluster, x, y); 33 } 34 </script> 35 </span> 36 37 <span> 38 <div>ctx_baseline_middle</div> 39 <canvas class="grid-cell-content" id="canvas1" width="180" height="43"> 40 <p class="fallback">FAIL (fallback content)</p> 41 </canvas> 42 <script type="module"> 43 const canvas = document.getElementById("canvas1"); 44 const ctx = canvas.getContext('2d'); 45 46 ctx.font = '20px serif'; 47 const text = 'Test ☺️ א'; 48 const x = 20; 49 const y = canvas.height / 2; 50 51 ctx.textBaseline = 'middle'; 52 let tm = ctx.measureText(text); 53 const clusters = tm.getTextClusters(); 54 55 // Rendering all clusters with the same (x, y) parameters must be 56 // equivalent to a fillText() call at (x, y). 57 for (const cluster of clusters) { 58 ctx.fillTextCluster(cluster, x, y); 59 } 60 </script> 61 </span> 62 63 <span> 64 <div>ctx_baseline_bottom</div> 65 <canvas class="grid-cell-content" id="canvas2" width="180" height="43"> 66 <p class="fallback">FAIL (fallback content)</p> 67 </canvas> 68 <script type="module"> 69 const canvas = document.getElementById("canvas2"); 70 const ctx = canvas.getContext('2d'); 71 72 ctx.font = '20px serif'; 73 const text = 'Test ☺️ א'; 74 const x = 20; 75 const y = canvas.height / 2; 76 77 ctx.textBaseline = 'bottom'; 78 let tm = ctx.measureText(text); 79 const clusters = tm.getTextClusters(); 80 81 // Rendering all clusters with the same (x, y) parameters must be 82 // equivalent to a fillText() call at (x, y). 83 for (const cluster of clusters) { 84 ctx.fillTextCluster(cluster, x, y); 85 } 86 </script> 87 </span> 88 89 <span> 90 <div>ctx_baseline_alphabetic</div> 91 <canvas class="grid-cell-content" id="canvas3" width="180" height="43"> 92 <p class="fallback">FAIL (fallback content)</p> 93 </canvas> 94 <script type="module"> 95 const canvas = document.getElementById("canvas3"); 96 const ctx = canvas.getContext('2d'); 97 98 ctx.font = '20px serif'; 99 const text = 'Test ☺️ א'; 100 const x = 20; 101 const y = canvas.height / 2; 102 103 ctx.textBaseline = 'alphabetic'; 104 let tm = ctx.measureText(text); 105 const clusters = tm.getTextClusters(); 106 107 // Rendering all clusters with the same (x, y) parameters must be 108 // equivalent to a fillText() call at (x, y). 109 for (const cluster of clusters) { 110 ctx.fillTextCluster(cluster, x, y); 111 } 112 </script> 113 </span> 114 115 </div>