2d.text.measure.fillTextCluster-options.tentative.html (2758B)
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-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.fillTextCluster-options.tentative</h1> 10 <p class="desc">Test that fillTextCluster() 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.fillStyle = '#0f0'; 36 37 // Override the align and baseline of the cluster. 38 ctx.fillTextCluster(cluster, 50, 50, {align: 'right', baseline: 'bottom'}); 39 _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2); 40 _assertPixelApprox(canvas, 45,5, 0,255,0,255, 2); 41 _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2); 42 _assertPixelApprox(canvas, 45,45, 0,255,0,255, 2); 43 _assertPixelApprox(canvas, 55,5, 255,0,0,255, 2); 44 _assertPixelApprox(canvas, 5,55, 255,0,0,255, 2); 45 _assertPixelApprox(canvas, 55,55, 255,0,0,255, 2); 46 47 // Override the x and y values of the cluster. 48 ctx.fillTextCluster(cluster, 0, 100, {x: 10, y: 10}); 49 _assertPixelApprox(canvas, 15,115, 0,255,0,255, 2); 50 _assertPixelApprox(canvas, 55,115, 0,255,0,255, 2); 51 _assertPixelApprox(canvas, 15,155, 0,255,0,255, 2); 52 _assertPixelApprox(canvas, 55,155, 0,255,0,255, 2); 53 _assertPixelApprox(canvas, 65,115, 255,0,0,255, 2); 54 _assertPixelApprox(canvas, 15,165, 255,0,0,255, 2); 55 _assertPixelApprox(canvas, 65,165, 255,0,0,255, 2); 56 57 // Override the align, baseline, x, and y values of the cluster. 58 ctx.fillTextCluster(cluster, 50, 250, 59 {align: 'right', baseline: 'bottom', x: 10, y: 10}); 60 _assertPixelApprox(canvas, 15,215, 0,255,0,255, 2); 61 _assertPixelApprox(canvas, 55,215, 0,255,0,255, 2); 62 _assertPixelApprox(canvas, 15,255, 0,255,0,255, 2); 63 _assertPixelApprox(canvas, 55,255, 0,255,0,255, 2); 64 _assertPixelApprox(canvas, 65,215, 255,0,0,255, 2); 65 _assertPixelApprox(canvas, 15,265, 255,0,0,255, 2); 66 _assertPixelApprox(canvas, 65,265, 255,0,0,255, 2); 67 68 }, "Test that fillTextCluster() correctly applies the options passed as a dictionary."); 69 </script>