OLD | NEW |
---|---|
1 <html xmlns="http://www.w3.org/1999/xhtml"> | 1 <!DOCTYPE html> |
2 <head> | 2 <title>Test the width of text element is similar to the sum of the width of all characters.</title> |
3 <script src="../../resources/js-test.js"></script> | 3 <script src="../../resources/testharness.js"></script> |
4 </head> | 4 <script src="../../resources/testharnessreport.js"></script> |
5 <body> | 5 <svg style="position: absolute; top: 10px; left: 10px; width: 500px; height: 300 px;"> |
6 <svg style="position: absolute; top: 10px; left: 10px; width: 500px; height: 300px;"> | 6 <g> |
7 <g> | 7 <text id="test" x="0" y="50" font-size="25" fill="#000" text-rendering=" geometricPrecision">Sphinx of black quartz, judge my vow.</text> |
8 <text id="test" x="0" y="50" font-size="25" fill="#000" text-renderi ng="geometricPrecision">Sphinx of black quartz, judge my vow.</text> | 8 </g> |
9 </g> | 9 <g> |
10 <g> | 10 <text id="measure" x="0" y="150" fill="#000" text-rendering="geometricPr ecision" xml:space="preserve"> </text> |
11 <text id="measure" x="0" y="150" fill="#000" text-rendering="geometr icPrecision" xml:space="preserve"> </text> | 11 </g> |
12 </g> | 12 </svg> |
13 </svg> | |
14 <script> | 13 <script> |
15 | 14 test(function() { |
16 function measureText(testElement) | 15 var element = document.getElementById('test'); |
17 { | 16 var elementWidth = element.getBoundingClientRect().width; |
17 var textWidth = measureText(element); | |
18 // This tolerance value is made up but our goal is to ensure that the | |
19 // sum of individual glyph widths is roughly similar to the total element | |
20 // width. | |
21 var glyphOverflowTolerance = Math.min(elementWidth, textWidth) / 2; | |
22 // The sum of individual character widths will include the glyph | |
23 // overflow of each character separately and therefore the total element | |
24 // width should be smaller. | |
25 assert_less_than(elementWidth, textWidth); | |
Srirama
2016/08/19 11:42:14
i think these two stmts should be assert_less_than
Shanmuga Pandi
2016/08/22 06:40:34
Done.
| |
26 assert_less_than(Math.abs(elementWidth - textWidth), glyphOverflowTolerance) ; | |
27 function measureText(testElement) { | |
18 var measureElement = document.getElementById('measure'); | 28 var measureElement = document.getElementById('measure'); |
19 measureElement.setAttribute('font-size', testElement.getAttribute('font- size')); | 29 measureElement.setAttribute('font-size', testElement.getAttribute('font- size')); |
20 var str = testElement.firstChild.nodeValue; | 30 var str = testElement.firstChild.nodeValue; |
21 | 31 |
22 var characterWidths = {}; | 32 var characterWidths = {}; |
23 var width = 0; | 33 var width = 0; |
24 for (var i = 0; i < str.length; i++) { | 34 for (var i = 0; i < str.length; i++) { |
25 var c = str[i]; | 35 var c = str[i]; |
26 var w = characterWidths[c]; | 36 var w = characterWidths[c]; |
27 if (!w) { | 37 if (!w) { |
28 measureElement.firstChild.nodeValue = c; | 38 measureElement.firstChild.nodeValue = c; |
29 w = measureElement.getBoundingClientRect().width; | 39 w = measureElement.getBoundingClientRect().width; |
30 characterWidths[c] = w; | 40 characterWidths[c] = w; |
31 } | 41 } |
32 width += w; | 42 width += w; |
33 } | 43 } |
34 return width; | 44 return width; |
35 } | 45 } |
36 | 46 }); |
37 var el = document.getElementById('test'); | 47 </script> |
38 var elementWidth = el.getBoundingClientRect().width; | |
39 var textWidth = measureText(el); | |
40 // This tolerance value is made up but our goal is to ensure that the | |
41 // sum of individual glyph widths is roughly similar to the total element | |
42 // width. | |
43 var glyphOverflowTolerance = Math.min(elementWidth, textWidth) / 2; | |
44 if (elementWidth > textWidth) { | |
45 // The sum of individual character widths will include the glyph | |
46 // overflow of each character separately and therefore the total element | |
47 // width should be smaller. | |
48 testFailed('Width of text element is ' + elementWidth + ', expected the sum of individual character widths, ' + textWidth + ', to be larger.'); | |
49 } else if (Math.abs(elementWidth - textWidth) > glyphOverflowTolerance) { | |
50 testFailed('Width of text element is ' + elementWidth + ', expected the sum of individal character widths, ' + textWidth + ', to be similar.'); | |
51 } else { | |
52 testPassed('Width of text element is similar to the sum of the width of all characters.'); | |
53 } | |
54 </script> | |
55 </body> | |
56 </html> | |
OLD | NEW |