2d.text.measure.strokeTextCluster-range.tentative.html (2505B)
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.strokeTextCluster-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.strokeTextCluster-range.tentative</h1> 10 <p class="desc">Test that getTextClusters() and strokeTextCluster() 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.strokeTextCluster(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.strokeStyle = '#0f0'; 42 ctx.lineWidth = 12; 43 44 // Without the first character. 45 renderClusters(tm.getTextClusters(1, 5), 0, 0); 46 _assertPixelApprox(canvas, 5,5, 255,0,0,255, 2); 47 _assertPixelApprox(canvas, 55,5, 0,255,0,255, 2); 48 _assertPixelApprox(canvas, 105,5, 0,255,0,255, 2); 49 _assertPixelApprox(canvas, 155,5, 0,255,0,255, 2); 50 _assertPixelApprox(canvas, 205,5, 0,255,0,255, 2); 51 // Without the last character. 52 renderClusters(tm.getTextClusters(0, 4), 0, 100); 53 _assertPixelApprox(canvas, 5,105, 0,255,0,255, 2); 54 _assertPixelApprox(canvas, 55,105, 0,255,0,255, 2); 55 _assertPixelApprox(canvas, 105,105, 0,255,0,255, 2); 56 _assertPixelApprox(canvas, 155,105, 0,255,0,255, 2); 57 _assertPixelApprox(canvas, 245,105, 255,0,0,255, 2); 58 // Only the middle character. 59 renderClusters(tm.getTextClusters(2, 3), 0, 200); 60 _assertPixelApprox(canvas, 5,205, 255,0,0,255, 2); 61 _assertPixelApprox(canvas, 55,205, 255,0,0,255, 2); 62 _assertPixelApprox(canvas, 105,205, 0,255,0,255, 2); 63 _assertPixelApprox(canvas, 195,205, 255,0,0,255, 2); 64 _assertPixelApprox(canvas, 245,205, 255,0,0,255, 2); 65 66 }, "Test that getTextClusters() and strokeTextCluster() correctly render different ranges of the input text."); 67 </script>