third_party/WebKit/LayoutTests/svg/text/text-rect-precision.html - Issue 2260763002: Convert LayoutTests/svg/text/* js-tests.js tests to testharness.js based tests.

Side by Side Diff: third_party/WebKit/LayoutTests/svg/text/text-rect-precision.html

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

Patch Set: Align with review comments Created 4 years, 4 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/svg/text/svgtextcontentelement-methods-parameters-expected.txt ('k') | third_party/WebKit/LayoutTests/svg/text/text-rect-precision-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <html xmlns="http://www.w3.org/1999/xhtml">	1 <!DOCTYPE html>

2 <head>	2 <title>The width of text element is similar to the sum of the width of all chara cters.</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>

	14 function measureText(testElement) {

	15 var measureElement = document.getElementById('measure');

	16 measureElement.setAttribute('font-size', testElement.getAttribute('font-size') );

	17 var str = testElement.firstChild.nodeValue;

15	18

16 function measureText(testElement)	19 var characterWidths = {};

17 {	20 var width = 0;

18 var measureElement = document.getElementById('measure');	21 for (var i = 0; i < str.length; i++) {

19 measureElement.setAttribute('font-size', testElement.getAttribute('font- size'));	22 var c = str[i];

20 var str = testElement.firstChild.nodeValue;	23 var w = characterWidths[c];

21	24 if (!w) {

22 var characterWidths = {};	25 measureElement.firstChild.nodeValue = c;

23 var width = 0;	26 w = measureElement.getBoundingClientRect().width;

24 for (var i = 0; i < str.length; i++) {	27 characterWidths[c] = w;

25 var c = str[i];	28 }

26 var w = characterWidths[c];	29 width += w;

27 if (!w) {	30 }

28 measureElement.firstChild.nodeValue = c;	31 return width;

29 w = measureElement.getBoundingClientRect().width;	32 }

30 characterWidths[c] = w;

31 }

32 width += w;

33 }

34 return width;

35 }

36	33

37 var el = document.getElementById('test');	34 test(function() {

38 var elementWidth = el.getBoundingClientRect().width;	35 var element = document.getElementById('test');

39 var textWidth = measureText(el);	36 var elementWidth = element.getBoundingClientRect().width;

40 // This tolerance value is made up but our goal is to ensure that the	37 var textWidth = measureText(element);

41 // sum of individual glyph widths is roughly similar to the total element	38 // This tolerance value is made up but our goal is to ensure that the

42 // width.	39 // sum of individual glyph widths is roughly similar to the total element

43 var glyphOverflowTolerance = Math.min(elementWidth, textWidth) / 2;	40 // width.

44 if (elementWidth > textWidth) {	41 var glyphOverflowTolerance = Math.min(elementWidth, textWidth) / 2;

45 // The sum of individual character widths will include the glyph	42 // The sum of individual character widths will include the glyph

46 // overflow of each character separately and therefore the total element	43 // overflow of each character separately and therefore the total element

47 // width should be smaller.	44 // width should be smaller.

48 testFailed('Width of text element is ' + elementWidth + ', expected the sum of individual character widths, ' + textWidth + ', to be larger.');	45 assert_less_than_equal(elementWidth, textWidth);

49 } else if (Math.abs(elementWidth - textWidth) > glyphOverflowTolerance) {	46 assert_less_than_equal(Math.abs(elementWidth - textWidth), glyphOverflowTolera nce);

50 testFailed('Width of text element is ' + elementWidth + ', expected the sum of individal character widths, ' + textWidth + ', to be similar.');	47 });

51 } else {	48 </script>

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