2d.text.measure.fillTextCluster-range.tentative.html (2471B)
1 <!DOCTYPE html> 2 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> 3 <meta charset="UTF-8"> 4 <title>OffscreenCanvas test: 2d.text.measure.fillTextCluster-range.tentative</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/html/canvas/resources/canvas-tests.js"></script> 8 9 <h1>2d.text.measure.fillTextCluster-range.tentative</h1> 10 <p class="desc">Test that getTextClusters() and fillTextCluster() correctly render different ranges of the input text.</p> 11 12 13 <script> 14 promise_test(async t => { 15 16 var canvas = new OffscreenCanvas(400, 300); 17 var ctx = canvas.getContext('2d'); 18 19 // Renders all the clusters in the list from position (x, y). 20 function renderClusters(clusters, x, y) { 21 for (const cluster of clusters) { 22 ctx.fillTextCluster(cluster, x, y); 23 } 24 } 25 26 var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')"); 27 f.load(); 28 document.fonts.add(f); 29 await document.fonts.ready; 30 31 ctx.font = '50px CanvasTest'; 32 ctx.textAlign = 'left'; 33 ctx.textBaseline = 'top'; 34 const text = 'EEEEE'; 35 let tm = ctx.measureText(text); 36 37 // Background color. 38 ctx.fillStyle = '#f00'; 39 ctx.fillRect(0, 0, canvas.width, canvas.height); 40 41 ctx.fillStyle = '#0f0'; 42 43 // Without the first character. 44 renderClusters(tm.getTextClusters(1, 5), 0, 0); 45 _assertPixelApprox(canvas, 5,5, 255,0,0,255, 2); 46 _assertPixelApprox(canvas, 55,5, 0,255,0,255, 2); 47 _assertPixelApprox(canvas, 105,5, 0,255,0,255, 2); 48 _assertPixelApprox(canvas, 155,5, 0,255,0,255, 2); 49 _assertPixelApprox(canvas, 205,5, 0,255,0,255, 2); 50 // Without the last character. 51 renderClusters(tm.getTextClusters(0, 4), 0, 100); 52 _assertPixelApprox(canvas, 5,105, 0,255,0,255, 2); 53 _assertPixelApprox(canvas, 55,105, 0,255,0,255, 2); 54 _assertPixelApprox(canvas, 105,105, 0,255,0,255, 2); 55 _assertPixelApprox(canvas, 155,105, 0,255,0,255, 2); 56 _assertPixelApprox(canvas, 205,105, 255,0,0,255, 2); 57 // Only the middle character. 58 renderClusters(tm.getTextClusters(2, 3), 0, 150); 59 _assertPixelApprox(canvas, 5,155, 255,0,0,255, 2); 60 _assertPixelApprox(canvas, 55,155, 255,0,0,255, 2); 61 _assertPixelApprox(canvas, 105,155, 0,255,0,255, 2); 62 _assertPixelApprox(canvas, 155,155, 255,0,0,255, 2); 63 _assertPixelApprox(canvas, 205,155, 255,0,0,255, 2); 64 65 }, "Test that getTextClusters() and fillTextCluster() correctly render different ranges of the input text."); 66 </script>