2d.text.measure.fillTextCluster-baseline.tentative-expected.html (2571B)
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-baseline.tentative</title> 6 <h1>2d.text.measure.fillTextCluster-baseline.tentative</h1> 7 <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> 8 9 <div class="grid-container" style="--grid-width: 4"> 10 <span> 11 <div>ctx_baseline_top</div> 12 <canvas class="grid-cell-content" id="canvas0" width="180" 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 = 20; 22 const y = canvas.height / 2; 23 24 ctx.textBaseline = 'top'; 25 ctx.fillText(text, x, y); 26 </script> 27 </span> 28 29 <span> 30 <div>ctx_baseline_middle</div> 31 <canvas class="grid-cell-content" id="canvas1" width="180" height="43"> 32 <p class="fallback">FAIL (fallback content)</p> 33 </canvas> 34 <script type="module"> 35 const canvas = document.getElementById("canvas1"); 36 const ctx = canvas.getContext('2d'); 37 38 ctx.font = '20px serif'; 39 const text = 'Test ☺️ א'; 40 const x = 20; 41 const y = canvas.height / 2; 42 43 ctx.textBaseline = 'middle'; 44 ctx.fillText(text, x, y); 45 </script> 46 </span> 47 48 <span> 49 <div>ctx_baseline_bottom</div> 50 <canvas class="grid-cell-content" id="canvas2" width="180" height="43"> 51 <p class="fallback">FAIL (fallback content)</p> 52 </canvas> 53 <script type="module"> 54 const canvas = document.getElementById("canvas2"); 55 const ctx = canvas.getContext('2d'); 56 57 ctx.font = '20px serif'; 58 const text = 'Test ☺️ א'; 59 const x = 20; 60 const y = canvas.height / 2; 61 62 ctx.textBaseline = 'bottom'; 63 ctx.fillText(text, x, y); 64 </script> 65 </span> 66 67 <span> 68 <div>ctx_baseline_alphabetic</div> 69 <canvas class="grid-cell-content" id="canvas3" width="180" height="43"> 70 <p class="fallback">FAIL (fallback content)</p> 71 </canvas> 72 <script type="module"> 73 const canvas = document.getElementById("canvas3"); 74 const ctx = canvas.getContext('2d'); 75 76 ctx.font = '20px serif'; 77 const text = 'Test ☺️ א'; 78 const x = 20; 79 const y = canvas.height / 2; 80 81 ctx.textBaseline = 'alphabetic'; 82 ctx.fillText(text, x, y); 83 </script> 84 </span> 85 86 </div>