2d.text.drawing.style.letterSpacing.measure.html (2315B)
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>Canvas test: 2d.text.drawing.style.letterSpacing.measure</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 <link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> 9 <body class="show_output"> 10 11 <h1>2d.text.drawing.style.letterSpacing.measure</h1> 12 <p class="desc">Testing letter spacing with different length units</p> 13 14 15 <p class="output">Actual output:</p> 16 <canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17 18 <ul id="d"></ul> 19 <script> 20 var t = async_test("Testing letter spacing with different length units"); 21 _addTest(function(canvas, ctx) { 22 23 _assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'"); 24 _assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'"); 25 var width_normal = ctx.measureText('Hello World').width; 26 27 function test_letter_spacing(value, difference_spacing, epsilon) { 28 ctx.letterSpacing = value; 29 _assertSame(ctx.letterSpacing, value, "ctx.letterSpacing", "value"); 30 _assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'"); 31 width_with_letter_spacing = ctx.measureText('Hello World').width; 32 assert_approx_equals(width_with_letter_spacing, width_normal + difference_spacing, epsilon, "letter spacing doesn't work."); 33 } 34 35 // The first value is the letter Spacing to be set, the second value the 36 // change in length of string 'Hello World', note that there are 11 letters 37 // in 'hello world', so the length difference is always letterSpacing * 11. 38 // and the third value is the acceptable differencee for the length change, 39 // note that unit such as 1cm/1mm doesn't map to an exact pixel value. 40 test_cases = [['3px', 33, 0.1], 41 ['5px', 55, 0.1], 42 ['-2px', -22, 0.1], 43 ['1em', 110, 0.1], 44 ['-0.1em', -11, 0.1], 45 ['1in', 1056, 0.1], 46 ['-0.1cm', -41.65, 0.2], 47 ['-0.6mm', -24.95, 0.2]] 48 49 for (const test_case of test_cases) { 50 test_letter_spacing(test_case[0], test_case[1], test_case[2]); 51 } 52 53 }); 54 </script>