dom/svg/test/test_text_scaled.html

   1 <!DOCTYPE html>
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=655877
   5 -->
   6 <head>
   7   <title>Test for Bug 655877</title>
   8   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   9   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
  10 </head>
  11 <body>
  12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=655877">Mozilla Bug 655877</a>
  13 <p id="display"></p>
  14 <div id="content" style="display: none"></div>
  15
  16 <iframe id="svg" src="text-helper-scaled.svg"></iframe>
  17
  18 <pre id="test">
  19 <script class="testbody" type="application/javascript">
  20 SimpleTest.waitForExplicitFinish();
  21
  22 function runTest() {
  23   var doc = $("svg").contentWindow.document;
  24   var text1 = doc.getElementById("text1");
  25   var text2 = doc.getElementById("text2");
  26
  27   var charWidth = text1.getSubStringLength(0, 1);
  28
  29   if (navigator.userAgent.indexOf("Linux") > -1 && charWidth == 241) {
  30     // Workaround for a slight difference in 'charWidth' (i.e. the width of
  31     // the 'a' char) on Linux build machines after bug 1342951.  The issue
  32     // doesn't reproduce locally on Ubuntu 17.04 so is particularly tricky to
  33     // debug.
  34     charWidth = 240;
  35   }
  36
  37   var epsilon = 0.001;
  38
  39   function isClose(a, b, str) {
  40     ok(Math.abs(a - b) < epsilon, str + " - " + b + " should be close to " + a);
  41   }
  42
  43   function isPointCloseX(pt1, x, y, str) {
  44     isClose(pt1.x, x, str + " x");
  45     is(pt1.y, y, str + " y");
  46   }
  47
  48   function ymost(r) {
  49     return r.y + r.height;
  50   }
  51
  52   var p = text1.getStartPositionOfChar(0);
  53
  54   // Simple horizontal string
  55
  56   is(text1.getNumberOfChars(), 3, "text1 length");
  57   ok(text1.getComputedTextLength() > 0, "text1 measured length");
  58   is(text1.getComputedTextLength(), text1.getSubStringLength(0, 3), "text1 substring length");
  59   isPointCloseX(text1.getStartPositionOfChar(0), 10, 400, "text1 char 0 start offset");
  60   isPointCloseX(text1.getStartPositionOfChar(1), 10 + charWidth, 400, "text1 char 1 start offset");
  61   isPointCloseX(text1.getStartPositionOfChar(2), 10 + 2 * charWidth, 400, "text1 char 2 start offset");
  62   isPointCloseX(text1.getEndPositionOfChar(0), 10 + charWidth, 400, "text1 char 0 end offset");
  63   isPointCloseX(text1.getEndPositionOfChar(1), 10 + 2 * charWidth, 400, "text1 char 1 end offset");
  64   isPointCloseX(text1.getEndPositionOfChar(2), 10 + 3 * charWidth, 400, "text1 char 2 end offset");
  65   is(text1.getExtentOfChar(0).x, 10, "text1 char 0 extent x");
  66   is(text1.getExtentOfChar(0).width, text1.getSubStringLength(0, 1), "text1 char 0 extent width");
  67   ok(text1.getExtentOfChar(0).y < 400, "text1 char 0 extent y");
  68   ok(ymost(text1.getExtentOfChar(0)) > 400, "text1 char 0 extent height");
  69   isClose(text1.getExtentOfChar(1).x, 10 + charWidth, "text1 char 1 extent x");
  70   is(text1.getExtentOfChar(1).width, text1.getSubStringLength(0, 1), "text1 char 1 extent width");
  71   is(text1.getExtentOfChar(1).y, text1.getExtentOfChar(0).y, "text1 char 0/1 extent y");
  72   is(text1.getExtentOfChar(1).height, text1.getExtentOfChar(0).height, "text1 char 0/1 extent height");
  73   is(text1.getExtentOfChar(2).x, 10 + 2 * charWidth, "text1 char 2 extent x");
  74   is(text1.getExtentOfChar(2).width, text1.getSubStringLength(0, 1), "text1 char 2 extent width");
  75   is(text1.getExtentOfChar(2).y, text1.getExtentOfChar(0).y, "text1 char 0/2 extent y");
  76   is(text1.getExtentOfChar(2).height, text1.getExtentOfChar(0).height, "text1 char 0/2 extent height");
  77   is(text1.getRotationOfChar(0), 0, "text1 char 0 rotation");
  78   is(text1.getRotationOfChar(1), 0, "text1 char 0 rotation");
  79   is(text1.getRotationOfChar(2), 0, "text1 char 0 rotation");
  80   p.x = 10 + 0.1;
  81   p.y = 400;
  82   is(text1.getCharNumAtPosition(p), 0, "text1 finding char 0 left edge");
  83   p.x = 10 + charWidth - 0.1;
  84   is(text1.getCharNumAtPosition(p), 0, "text1 finding char 0 on right");
  85   p.x = 10 - 0.1;
  86   is(text1.getCharNumAtPosition(p), -1, "text1 finding no char on left");
  87   p.x = 10 + 0.1;
  88   p.y = text1.getExtentOfChar(0).y - 0.1;
  89   is(text1.getCharNumAtPosition(p), -1, "text1 finding no char on top");
  90   p.y = text1.getExtentOfChar(0).y + 0.1;
  91   is(text1.getCharNumAtPosition(p), 0, "text1 finding char 0 top edge");
  92   p.x = 10 + 3 * charWidth - 0.1;
  93   is(text1.getCharNumAtPosition(p), 2, "text1 finding char 2 top edge");
  94   p.x = 10 + 3 * charWidth + 0.1;
  95   is(text1.getCharNumAtPosition(p), -1, "text1 finding no char on right");
  96
  97   // Text along a thin rectangle path
  98
  99   charWidth = text2.getSubStringLength(0, 1);
 100
 101   is(text2.getNumberOfChars(), 26, "text2 length");
 102   ok(text2.getComputedTextLength() > 0, "text2 measured length");
 103   is(text2.getComputedTextLength(), text2.getSubStringLength(0, 26), "text2 substring length");
 104
 105   // character 12 should be on the bottom side
 106   is(text2.getStartPositionOfChar(12).y, 860, "text2 char 12 start offset");
 107   isfuzzy(text2.getEndPositionOfChar(12).y, 860, 0.001, "text2 char 12 end offset");
 108   ok(text2.getExtentOfChar(12).y < 860, "text2 char 12 extent y");
 109   ok(ymost(text2.getExtentOfChar(12)) > 860, "text2 char 12 extent height");
 110   isfuzzy(text2.getRotationOfChar(12), 180, 0.001, "text2 char 12 rotation");
 111   p.x = text2.getExtentOfChar(12).x + 0.1;
 112   p.y = ymost(text2.getExtentOfChar(12)) - 0.1;
 113   is(text2.getCharNumAtPosition(p), 12, "text2 finding char 12");
 114   // This next test is tricky. The glyph for character 3 may overlap from the above
 115   // but character 12 wins because it's the last to render
 116   p.y = text2.getExtentOfChar(12).y + 0.1;
 117   is(text2.getCharNumAtPosition(p), 12, "text2 finding last rendered char");
 118 }
 119
 120 function runTests() {
 121   runTest();
 122
 123   var doc = $("svg").contentWindow.document;
 124   doc.getElementById("g").setAttribute("transform", "rotate(90 200 200)");
 125
 126   runTest();
 127
 128   SimpleTest.finish();
 129 }
 130
 131 window.addEventListener("load", runTests);
 132 </script>
 133 </pre>
 134 </body>
 135 </html>