Chromium Code Reviews Chromium Code Reviews
Issue 2260763002:
Convert LayoutTests/svg/text/* js-tests.js tests to testharness.js based tests. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| 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> |
|
fs
2016/08/22 14:10:05
Drop 'Test '. (I.e "The width...")
| |
| 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> |
| 14 test(function() { | |
| 15 var element = document.getElementById('test'); | |
| 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_equal(elementWidth, textWidth); | |
| 26 assert_less_than_equal(Math.abs(elementWidth - textWidth), glyphOverflowTolera nce); | |
| 27 function measureText(testElement) { | |
|
fs
2016/08/22 14:10:05
Suggest you move this out of the test() scope.
Shanmuga Pandi
2016/08/23 07:11:38
Done.
| |
| 28 var measureElement = document.getElementById('measure'); | |
| 29 measureElement.setAttribute('font-size', testElement.getAttribute('font-size ')); | |
| 30 var str = testElement.firstChild.nodeValue; | |
| 15 | 31 |
| 16 function measureText(testElement) | 32 var characterWidths = {}; |
| 17 { | 33 var width = 0; |
| 18 var measureElement = document.getElementById('measure'); | 34 for (var i = 0; i < str.length; i++) { |
| 19 measureElement.setAttribute('font-size', testElement.getAttribute('font- size')); | 35 var c = str[i]; |
| 20 var str = testElement.firstChild.nodeValue; | 36 var w = characterWidths[c]; |
| 21 | 37 if (!w) { |
| 22 var characterWidths = {}; | 38 measureElement.firstChild.nodeValue = c; |
| 23 var width = 0; | 39 w = measureElement.getBoundingClientRect().width; |
| 24 for (var i = 0; i < str.length; i++) { | 40 characterWidths[c] = w; |
| 25 var c = str[i]; | |
| 26 var w = characterWidths[c]; | |
| 27 if (!w) { | |
| 28 measureElement.firstChild.nodeValue = c; | |
| 29 w = measureElement.getBoundingClientRect().width; | |
| 30 characterWidths[c] = w; | |
| 31 } | |
| 32 width += w; | |
| 33 } | 41 } |
| 34 return width; | 42 width += w; |
| 35 } | 43 } |
| 36 | 44 return width; |
| 37 var el = document.getElementById('test'); | 45 } |
| 38 var elementWidth = el.getBoundingClientRect().width; | 46 }); |
| 39 var textWidth = measureText(el); | 47 </script> |
| 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 |
