third_party/WebKit/LayoutTests/svg/text/text-rect-precision.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2 <head>
   3     <script src="../../resources/js-test.js"></script>
   4 </head>
   5 <body>
   6     <svg style="position: absolute; top: 10px; left: 10px; width: 500px; height: 300px;">
   7         <g>
   8             <text id="test" x="0" y="50" font-size="25" fill="#000" text-rendering="geometricPrecision">Sphinx of black quartz, judge my vow.</text>
   9         </g>
  10         <g>
  11             <text id="measure" x="0" y="150" fill="#000" text-rendering="geometricPrecision" xml:space="preserve">&nbsp;</text>
  12         </g>
  13     </svg>
  14 <script>
  15
  16     var hasSubpixelPrecision = false;
  17
  18     function subpixelTolerance(testElement)
  19     {
  20         // Due to fixed-point rounding, each single-character measurement may differ by up to
  21         // one LayoutUnit (i.e., 0.16 pixel) from the same character's measurement in the full
  22         // string.
  23         var str = testElement.firstChild.nodeValue;
  24         return str.length * 0.16;
  25     }
  26
  27     function measureText(testElement)
  28     {
  29         var measureElement = document.getElementById('measure');
  30         measureElement.setAttribute('font-size', testElement.getAttribute('font-size'));
  31         var str = testElement.firstChild.nodeValue;
  32
  33         var characterWidths = {};
  34         var width = 0;
  35         for (var i = 0; i < str.length; i++) {
  36             var c = str[i];
  37             var w = characterWidths[c];
  38             if (!w) {
  39                 measureElement.firstChild.nodeValue = c;
  40                 w = measureElement.getBoundingClientRect().width;
  41                 characterWidths[c] = w;
  42                 hasSubpixelPrecision = hasSubpixelPrecision || w.toFixed(2) != Math.round(w);
  43             }
  44             width += w;
  45         }
  46         return width;
  47     }
  48
  49     var el = document.getElementById('test');
  50     var elementWidth = el.getBoundingClientRect().width;
  51     var textWidth = measureText(el);
  52     var tolerance = hasSubpixelPrecision ? subpixelTolerance(el) : 2; // enclosing may expand up to one pixel in each direction.
  53     if (Math.abs(elementWidth - textWidth) <= tolerance)
  54         testPassed('Width of text element is the sum of the width of all characters.');
  55     else
  56         testFailed('Width of text element is ' + elementWidth + ', expected ' + textWidth);
  57 </script>
  58 </body>
  59 </html>