Chromium Code Reviews| Index: third_party/WebKit/LayoutTests/svg/text/text-rect-precision.html |
| diff --git a/third_party/WebKit/LayoutTests/svg/text/text-rect-precision.html b/third_party/WebKit/LayoutTests/svg/text/text-rect-precision.html |
| index ea8a29ba2f892c0b3ccdbf95eb7034fea69c0739..1b48d305d012566b79f006e92a20bff5455b75d7 100644 |
| --- a/third_party/WebKit/LayoutTests/svg/text/text-rect-precision.html |
| +++ b/third_party/WebKit/LayoutTests/svg/text/text-rect-precision.html |
| @@ -1,20 +1,30 @@ |
| -<html xmlns="http://www.w3.org/1999/xhtml"> |
| -<head> |
| - <script src="../../resources/js-test.js"></script> |
| -</head> |
| -<body> |
| - <svg style="position: absolute; top: 10px; left: 10px; width: 500px; height: 300px;"> |
| - <g> |
| - <text id="test" x="0" y="50" font-size="25" fill="#000" text-rendering="geometricPrecision">Sphinx of black quartz, judge my vow.</text> |
| - </g> |
| - <g> |
| - <text id="measure" x="0" y="150" fill="#000" text-rendering="geometricPrecision" xml:space="preserve"> </text> |
| - </g> |
| - </svg> |
| +<!DOCTYPE html> |
| +<title>Test the width of text element is similar to the sum of the width of all characters.</title> |
| +<script src="../../resources/testharness.js"></script> |
| +<script src="../../resources/testharnessreport.js"></script> |
| +<svg style="position: absolute; top: 10px; left: 10px; width: 500px; height: 300px;"> |
| + <g> |
| + <text id="test" x="0" y="50" font-size="25" fill="#000" text-rendering="geometricPrecision">Sphinx of black quartz, judge my vow.</text> |
| + </g> |
| + <g> |
| + <text id="measure" x="0" y="150" fill="#000" text-rendering="geometricPrecision" xml:space="preserve"> </text> |
| + </g> |
| +</svg> |
| <script> |
| - |
| - function measureText(testElement) |
| - { |
| +test(function() { |
| + var element = document.getElementById('test'); |
| + var elementWidth = element.getBoundingClientRect().width; |
| + var textWidth = measureText(element); |
| + // This tolerance value is made up but our goal is to ensure that the |
| + // sum of individual glyph widths is roughly similar to the total element |
| + // width. |
| + var glyphOverflowTolerance = Math.min(elementWidth, textWidth) / 2; |
| + // The sum of individual character widths will include the glyph |
| + // overflow of each character separately and therefore the total element |
| + // width should be smaller. |
| + 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.
|
| + assert_less_than(Math.abs(elementWidth - textWidth), glyphOverflowTolerance); |
| + function measureText(testElement) { |
| var measureElement = document.getElementById('measure'); |
| measureElement.setAttribute('font-size', testElement.getAttribute('font-size')); |
| var str = testElement.firstChild.nodeValue; |
| @@ -33,24 +43,5 @@ |
| } |
| return width; |
| } |
| - |
| - var el = document.getElementById('test'); |
| - var elementWidth = el.getBoundingClientRect().width; |
| - var textWidth = measureText(el); |
| - // This tolerance value is made up but our goal is to ensure that the |
| - // sum of individual glyph widths is roughly similar to the total element |
| - // width. |
| - var glyphOverflowTolerance = Math.min(elementWidth, textWidth) / 2; |
| - if (elementWidth > textWidth) { |
| - // The sum of individual character widths will include the glyph |
| - // overflow of each character separately and therefore the total element |
| - // width should be smaller. |
| - testFailed('Width of text element is ' + elementWidth + ', expected the sum of individual character widths, ' + textWidth + ', to be larger.'); |
| - } else if (Math.abs(elementWidth - textWidth) > glyphOverflowTolerance) { |
| - testFailed('Width of text element is ' + elementWidth + ', expected the sum of individal character widths, ' + textWidth + ', to be similar.'); |
| - } else { |
| - testPassed('Width of text element is similar to the sum of the width of all characters.'); |
| - } |
| -</script> |
| -</body> |
| -</html> |
| +}); |
| +</script> |