2d.text.measure.fillTextCluster-baseline.tentative.w.html (6598B)
1 <!DOCTYPE html> 2 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> 3 <meta charset="UTF-8"> 4 <html class="reftest-wait"> 5 <link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css"> 6 <link rel="match" href="2d.text.measure.fillTextCluster-baseline.tentative-expected.html"> 7 <title>Canvas test: 2d.text.measure.fillTextCluster-baseline.tentative</title> 8 <h1>2d.text.measure.fillTextCluster-baseline.tentative</h1> 9 <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> 10 <script>pending_tests = 4;</script> 11 12 <div class="grid-container" style="--grid-width: 4"> 13 <span> 14 <div>ctx_baseline_top</div> 15 <canvas class="grid-cell-content" id="canvas0" width="180" height="43"> 16 <p class="fallback">FAIL (fallback content)</p> 17 </canvas> 18 <script id="myWorker0" type="text/worker"> 19 self.onmessage = function(e) { 20 const canvas = new OffscreenCanvas(180, 43); 21 const ctx = canvas.getContext('2d'); 22 23 ctx.font = '20px serif'; 24 const text = 'Test ☺️ א'; 25 const x = 20; 26 const y = canvas.height / 2; 27 28 ctx.textBaseline = 'top'; 29 let tm = ctx.measureText(text); 30 const clusters = tm.getTextClusters(); 31 32 // Rendering all clusters with the same (x, y) parameters must be 33 // equivalent to a fillText() call at (x, y). 34 for (const cluster of clusters) { 35 ctx.fillTextCluster(cluster, x, y); 36 } 37 38 const bitmap = canvas.transferToImageBitmap(); 39 self.postMessage(bitmap, bitmap); 40 }; 41 </script> 42 <script type="module"> 43 const blob = new Blob([document.getElementById('myWorker0').textContent]); 44 const worker = new Worker(URL.createObjectURL(blob)); 45 worker.addEventListener('message', msg => { 46 const outputCanvas = document.getElementById('canvas0'); 47 const outputCtx = outputCanvas.getContext('2d'); 48 outputCtx.drawImage(msg.data, 0, 0); 49 if (--pending_tests == 0) { 50 document.documentElement.classList.remove('reftest-wait'); 51 } 52 }); 53 worker.postMessage(null); 54 </script> 55 </span> 56 57 <span> 58 <div>ctx_baseline_middle</div> 59 <canvas class="grid-cell-content" id="canvas1" width="180" height="43"> 60 <p class="fallback">FAIL (fallback content)</p> 61 </canvas> 62 <script id="myWorker1" type="text/worker"> 63 self.onmessage = function(e) { 64 const canvas = new OffscreenCanvas(180, 43); 65 const ctx = canvas.getContext('2d'); 66 67 ctx.font = '20px serif'; 68 const text = 'Test ☺️ א'; 69 const x = 20; 70 const y = canvas.height / 2; 71 72 ctx.textBaseline = 'middle'; 73 let tm = ctx.measureText(text); 74 const clusters = tm.getTextClusters(); 75 76 // Rendering all clusters with the same (x, y) parameters must be 77 // equivalent to a fillText() call at (x, y). 78 for (const cluster of clusters) { 79 ctx.fillTextCluster(cluster, x, y); 80 } 81 82 const bitmap = canvas.transferToImageBitmap(); 83 self.postMessage(bitmap, bitmap); 84 }; 85 </script> 86 <script type="module"> 87 const blob = new Blob([document.getElementById('myWorker1').textContent]); 88 const worker = new Worker(URL.createObjectURL(blob)); 89 worker.addEventListener('message', msg => { 90 const outputCanvas = document.getElementById('canvas1'); 91 const outputCtx = outputCanvas.getContext('2d'); 92 outputCtx.drawImage(msg.data, 0, 0); 93 if (--pending_tests == 0) { 94 document.documentElement.classList.remove('reftest-wait'); 95 } 96 }); 97 worker.postMessage(null); 98 </script> 99 </span> 100 101 <span> 102 <div>ctx_baseline_bottom</div> 103 <canvas class="grid-cell-content" id="canvas2" width="180" height="43"> 104 <p class="fallback">FAIL (fallback content)</p> 105 </canvas> 106 <script id="myWorker2" type="text/worker"> 107 self.onmessage = function(e) { 108 const canvas = new OffscreenCanvas(180, 43); 109 const ctx = canvas.getContext('2d'); 110 111 ctx.font = '20px serif'; 112 const text = 'Test ☺️ א'; 113 const x = 20; 114 const y = canvas.height / 2; 115 116 ctx.textBaseline = 'bottom'; 117 let tm = ctx.measureText(text); 118 const clusters = tm.getTextClusters(); 119 120 // Rendering all clusters with the same (x, y) parameters must be 121 // equivalent to a fillText() call at (x, y). 122 for (const cluster of clusters) { 123 ctx.fillTextCluster(cluster, x, y); 124 } 125 126 const bitmap = canvas.transferToImageBitmap(); 127 self.postMessage(bitmap, bitmap); 128 }; 129 </script> 130 <script type="module"> 131 const blob = new Blob([document.getElementById('myWorker2').textContent]); 132 const worker = new Worker(URL.createObjectURL(blob)); 133 worker.addEventListener('message', msg => { 134 const outputCanvas = document.getElementById('canvas2'); 135 const outputCtx = outputCanvas.getContext('2d'); 136 outputCtx.drawImage(msg.data, 0, 0); 137 if (--pending_tests == 0) { 138 document.documentElement.classList.remove('reftest-wait'); 139 } 140 }); 141 worker.postMessage(null); 142 </script> 143 </span> 144 145 <span> 146 <div>ctx_baseline_alphabetic</div> 147 <canvas class="grid-cell-content" id="canvas3" width="180" height="43"> 148 <p class="fallback">FAIL (fallback content)</p> 149 </canvas> 150 <script id="myWorker3" type="text/worker"> 151 self.onmessage = function(e) { 152 const canvas = new OffscreenCanvas(180, 43); 153 const ctx = canvas.getContext('2d'); 154 155 ctx.font = '20px serif'; 156 const text = 'Test ☺️ א'; 157 const x = 20; 158 const y = canvas.height / 2; 159 160 ctx.textBaseline = 'alphabetic'; 161 let tm = ctx.measureText(text); 162 const clusters = tm.getTextClusters(); 163 164 // Rendering all clusters with the same (x, y) parameters must be 165 // equivalent to a fillText() call at (x, y). 166 for (const cluster of clusters) { 167 ctx.fillTextCluster(cluster, x, y); 168 } 169 170 const bitmap = canvas.transferToImageBitmap(); 171 self.postMessage(bitmap, bitmap); 172 }; 173 </script> 174 <script type="module"> 175 const blob = new Blob([document.getElementById('myWorker3').textContent]); 176 const worker = new Worker(URL.createObjectURL(blob)); 177 worker.addEventListener('message', msg => { 178 const outputCanvas = document.getElementById('canvas3'); 179 const outputCtx = outputCanvas.getContext('2d'); 180 outputCtx.drawImage(msg.data, 0, 0); 181 if (--pending_tests == 0) { 182 document.documentElement.classList.remove('reftest-wait'); 183 } 184 }); 185 worker.postMessage(null); 186 </script> 187 </span> 188 189 </div> 190 </html>