2d.text.measure.strokeTextCluster-options.tentative.html (2899B)
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-options.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-options.tentative</h1> 10 <p class="desc">Test that strokeTextCluster() correctly applies the options passed as a dictionary.</p> 11 12 13 <script> 14 promise_test(async t => { 15 16 var canvas = new OffscreenCanvas(100, 300); 17 var ctx = canvas.getContext('2d'); 18 19 var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')"); 20 f.load(); 21 document.fonts.add(f); 22 await document.fonts.ready; 23 24 ctx.font = '50px CanvasTest'; 25 ctx.textAlign = 'left'; 26 ctx.textBaseline = 'top'; 27 const text = 'E'; 28 const tm = ctx.measureText(text); 29 const cluster = tm.getTextClusters()[0]; 30 31 // Background color. 32 ctx.fillStyle = '#f00'; 33 ctx.fillRect(0, 0, canvas.width, canvas.height); 34 35 ctx.strokeStyle = '#0f0'; 36 ctx.lineWidth = 12; 37 38 // Override the align and baseline of the cluster. 39 ctx.strokeTextCluster(cluster, 50, 50, {align: 'right', baseline: 'bottom'}); 40 _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2); 41 _assertPixelApprox(canvas, 45,5, 0,255,0,255, 2); 42 _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2); 43 _assertPixelApprox(canvas, 45,45, 0,255,0,255, 2); 44 _assertPixelApprox(canvas, 5,95, 255,0,0,255, 2); 45 _assertPixelApprox(canvas, 50,95, 255,0,0,255, 2); 46 _assertPixelApprox(canvas, 95,50, 255,0,0,255, 2); 47 _assertPixelApprox(canvas, 95,5, 255,0,0,255, 2); 48 49 // Override the x and y values of the cluster. 50 ctx.strokeTextCluster(cluster, 0, 100, {x: 10, y: 10}); 51 _assertPixelApprox(canvas, 15,115, 0,255,0,255, 2); 52 _assertPixelApprox(canvas, 55,115, 0,255,0,255, 2); 53 _assertPixelApprox(canvas, 15,155, 0,255,0,255, 2); 54 _assertPixelApprox(canvas, 55,155, 0,255,0,255, 2); 55 _assertPixelApprox(canvas, 1,101, 255,0,0,255, 2); 56 _assertPixelApprox(canvas, 1,151, 255,0,0,255, 2); 57 _assertPixelApprox(canvas, 51,101, 255,0,0,255, 2); 58 59 // Override the align, baseline, x, and y values of the cluster. 60 ctx.strokeTextCluster(cluster, 50, 250, 61 {align: 'right', baseline: 'bottom', x: 10, y: 10}); 62 _assertPixelApprox(canvas, 15,215, 0,255,0,255, 2); 63 _assertPixelApprox(canvas, 55,215, 0,255,0,255, 2); 64 _assertPixelApprox(canvas, 15,255, 0,255,0,255, 2); 65 _assertPixelApprox(canvas, 55,255, 0,255,0,255, 2); 66 _assertPixelApprox(canvas, 5,295, 255,0,0,255, 2); 67 _assertPixelApprox(canvas, 50,295, 255,0,0,255, 2); 68 _assertPixelApprox(canvas, 95,250, 255,0,0,255, 2); 69 _assertPixelApprox(canvas, 95,25, 255,0,0,255, 2); 70 71 }, "Test that strokeTextCluster() correctly applies the options passed as a dictionary."); 72 </script>