test_text_lengthAdjust.html (3455B)
1 <!DOCTYPE html> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=569722 5 --> 6 <head> 7 <meta charset=UTF-8> 8 <title>Test for Bug 569722</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 11 </head> 12 <body> 13 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=569722">Mozilla Bug 569722</a> 14 <p id="display"></p> 15 <div id="content"> 16 <svg width="400" height="200"> 17 <text x="0" y="100" style="font: 16px sans-serif">aaa</text> 18 </svg> 19 </div> 20 21 <pre id="test"> 22 <script class="testbody" type="application/javascript"> 23 SimpleTest.waitForExplicitFinish(); 24 25 function close(x, y, message) { 26 ok(Math.abs(x - y) < 1e-4, message); 27 } 28 29 function runTest() { 30 var text = document.querySelector("text"); 31 32 // get the original length 33 var length = text.getComputedTextLength(); 34 35 // get the original glyph positions 36 var startPositions = [], 37 endPositions = [], 38 extents = []; 39 for (let i = 0; i < 3; i++) { 40 startPositions.push(text.getStartPositionOfChar(i)); 41 endPositions.push(text.getEndPositionOfChar(i)); 42 extents.push(text.getExtentOfChar(i)); 43 } 44 45 // widths should all be the same 46 is(extents[0].width, extents[1].width); 47 is(extents[0].width, extents[2].width); 48 49 var checkCharNumAtPosition = function(x, y, i) { 50 var p = document.querySelector("svg").createSVGPoint(); 51 p.x = x; 52 p.y = y; 53 is(text.getCharNumAtPosition(p), i, "getCharNumAtPosition(" + i + ")"); 54 }; 55 56 var checkPositions = function(start, end, width) { 57 for (let i = 0; i < 3; i++) { 58 // check their positions 59 close(text.getStartPositionOfChar(i).x, start[i], "start position of glyph " + i); 60 close(text.getEndPositionOfChar(i).x, end[i], "end position of glyph " + i); 61 close(text.getExtentOfChar(i).x, start[i], "left edge of extent of glyph " + i); 62 close(text.getExtentOfChar(i).width, width, "width of glyph " + i); 63 checkCharNumAtPosition((start[i] + end[i]) / 2, 100, i); 64 } 65 }; 66 67 var w = extents[0].width; 68 69 var doLengthAdjustSpacingTest = function() { 70 // getComputedTextLength should return the sum of the advances, and since 71 // we are just changing the positions of the glyphs, it should be the same 72 // as without a textLength="" attribute 73 close(text.getComputedTextLength(), length, "getComputedTextLength when lengthAdjust=\"spacing\""); 74 75 // expected start and end positions of the glyphs 76 var start = [0, 50 - w / 2, 100 - w]; 77 var end = [w, 50 + w / 2, 100]; 78 checkPositions(start, end, w); 79 }; 80 81 // switch to adjust glyph positions, using the default value of lengthAdjust="" 82 text.setAttribute("textLength", "100"); 83 doLengthAdjustSpacingTest(); 84 // then with an explicit lengthAdjust="spacing" 85 text.setAttribute("lengthAdjust", "spacing"); 86 doLengthAdjustSpacingTest(); 87 88 // now test with lengthAdjust="spacingAndGlyphs" 89 text.setAttribute("lengthAdjust", "spacingAndGlyphs"); 90 91 // now that each glyph is stretched, the total advance should be the textLength 92 close(text.getComputedTextLength(), 100, "getComputedTextLength when lengthAdjust=\"spacingAndGlyphs\""); 93 94 // expected start and end positions of the glyphs 95 var start = [0, 33.3333, 66.6666]; 96 var end = [33.3333, 66.6666, 100]; 97 checkPositions(start, end, 33.3333); 98 99 SimpleTest.finish(); 100 } 101 102 window.addEventListener("load", runTest); 103 </script> 104 </pre> 105 </body> 106 </html>