third_party/WebKit/LayoutTests/svg/text/text-rect-precision.html - Issue 1505713002: Include glyph overflow in SVG text bounding boxes

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

Issue 1505713002: Include glyph overflow in SVG text bounding boxes (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: More expectations Created 5 years 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/bbox-with-glyph-overflow-zoomed.html ('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 <html xmlns="http://www.w3.org/1999/xhtml">

2 <head>	2 <head>

3 <script src="../../resources/js-test.js"></script>	3 <script src="../../resources/js-test.js"></script>

4 </head>	4 </head>

5 <body>	5 <body>

6 <svg style="position: absolute; top: 10px; left: 10px; width: 500px; height: 300px;">	6 <svg style="position: absolute; top: 10px; left: 10px; width: 500px; height: 300px;">

7 <g>	7 <g>

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 <text id="test" x="0" y="50" font-size="25" fill="#000" text-renderi ng="geometricPrecision">Sphinx of black quartz, judge my vow.</text>

9 </g>	9 </g>

10 <g>	10 <g>

11 <text id="measure" x="0" y="150" fill="#000" text-rendering="geometr icPrecision" xml:space="preserve"> </text>	11 <text id="measure" x="0" y="150" fill="#000" text-rendering="geometr icPrecision" xml:space="preserve"> </text>

12 </g>	12 </g>

13 </svg>	13 </svg>

14 <script>	14 <script>

15

16 var hasSubpixelPrecision = false;

17

18 function subpixelTolerance(testElement)

19 {

20 // Due to fixed-point rounding, each single-character measurement may di ffer by up to

21 // one LayoutUnit (i.e., 0.16 pixel) from the same character's measureme nt in the full

22 // string.

23 var str = testElement.firstChild.nodeValue;

24 return str.length * 0.16;

25 }

26	15

27 function measureText(testElement)	16 function measureText(testElement)

28 {	17 {

29 var measureElement = document.getElementById('measure');	18 var measureElement = document.getElementById('measure');

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

31 var str = testElement.firstChild.nodeValue;	20 var str = testElement.firstChild.nodeValue;

32	21

33 var characterWidths = {};	22 var characterWidths = {};

34 var width = 0;	23 var width = 0;

35 for (var i = 0; i < str.length; i++) {	24 for (var i = 0; i < str.length; i++) {

36 var c = str[i];	25 var c = str[i];

37 var w = characterWidths[c];	26 var w = characterWidths[c];

38 if (!w) {	27 if (!w) {

39 measureElement.firstChild.nodeValue = c;	28 measureElement.firstChild.nodeValue = c;

40 w = measureElement.getBoundingClientRect().width;	29 w = measureElement.getBoundingClientRect().width;

41 characterWidths[c] = w;	30 characterWidths[c] = w;

42 hasSubpixelPrecision = hasSubpixelPrecision \|\| w.toFixed(2) != M ath.round(w);

43 }	31 }

44 width += w;	32 width += w;

45 }	33 }

46 return width;	34 return width;

47 }	35 }

48	36

49 var el = document.getElementById('test');	37 var el = document.getElementById('test');

50 var elementWidth = el.getBoundingClientRect().width;	38 var elementWidth = el.getBoundingClientRect().width;

51 var textWidth = measureText(el);	39 var textWidth = measureText(el);

52 var tolerance = hasSubpixelPrecision ? subpixelTolerance(el) : 2; // enclosi ng may expand up to one pixel in each direction.	40 // This tolerance value is made up but our goal is to ensure that the

53 if (Math.abs(elementWidth - textWidth) <= tolerance)	41 // sum of individual glyph widths is roughly similar to the total element

54 testPassed('Width of text element is the sum of the width of all charact ers.');	42 // width.

55 else	43 var glyphOverflowTolerance = Math.min(elementWidth, textWidth) / 2;

56 testFailed('Width of text element is ' + elementWidth + ', expected ' + textWidth);	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 }

57 </script>	54 </script>

58 </body>	55 </body>

59 </html>	56 </html>

OLD	NEW