third_party/WebKit/LayoutTests/svg/carto.net/textbox.svg

   1 <?xml version="1.0" encoding="utf-8"?>
   2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
   3 ]>
   4 <svg viewBox="0 0 1024 768" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="initialize(evt)" zoomAndPan="disable" xml:space="preserve">
   5         <script type="text/ecmascript" xlink:href="resources/helper_functions.js"/>
   6         <script type="text/ecmascript" xlink:href="resources/mapApp.js"/>
   7         <script type="text/ecmascript" xlink:href="resources/timer.js"/>
   8         <script type="text/ecmascript" xlink:href="resources/textbox.js"/>
   9         <script type="text/ecmascript">
  10                 <![CDATA[
  11                 var myMapApp = new mapApp(false,undefined);
  12                 var textbox1;
  13                 var textbox2;
  14                 function initialize(evt) {
  15             //styles
  16             var textStyles = {"font-family":"Arial,Helvetica","font-size":15,"fill":"dimgray"};
  17             var boxStyles = {"fill":"white","stroke":"dimgray","stroke-width":1.5};
  18             var cursorStyles = {"stroke":"red","stroke-width":1.5};
  19             var selBoxStyles = {"fill":"blue","opacity":0.5};
  20                         var textYOffset = 22;
  21                         //create new textboxes
  22                         textbox1 = new textbox("textbox1","textbox1","",25,100,100,200,30,textYOffset,textStyles,boxStyles,cursorStyles,selBoxStyles,"[a-zA-Z ]",writeOutTextContent);
  23                         textbox2 = new textbox("textbox2","textbox2","50",5,100,30,60,30,textYOffset,textStyles,boxStyles,cursorStyles,selBoxStyles,"[0-9]",writeOutTextContent);
  24                         textbox3 = new textbox("textbox3","textbox3","This is a transformed textbox with a very, very, very long content",300,0,0,230,30,textYOffset,textStyles,boxStyles,cursorStyles,selBoxStyles,undefined,writeOutTextContent);
  25                 }
  26                 function writeOutTextContent(textboxId,value,changeType) {
  27                         if (changeType == "release") {
  28                                 document.getElementById("resultText").firstChild.nodeValue = "Content of "+textboxId+" is \""+value+"\"";
  29                         }
  30                         if (textboxId == "textbox2" && changeType == "change") {
  31                                 document.getElementById("resultText").firstChild.nodeValue = "Content of "+textboxId+" is \""+value+"\"";
  32                         }
  33                 }
  34                 ]]>
  35         </script>
  36         <rect x="-1000" y="-1000" width="3000" height="3000" fill="white" stroke="none"/>
  37         <g id="textbox1"/>
  38         <g id="textbox2"/>
  39         <g id="textbox3" transform="translate(100,300)"/>
  40         <g font-size="15px">
  41                 <text id="resultText" x="100" y="230" xml:space="preserve">ResultText</text>
  42                 <text x="170" y="50">This textbox (textbox 2) only accepts up to 5 digits.</text>
  43                 <text x="310" y="120">This textbox (textbox 1) accepts up to 25 characters [a-zA-Z ].</text>
  44                 <text x="350" y="315">This textbox (textbox 3) is transformed<tspan x="350" dy="23">and accepts all characters (up to 300)</tspan></text>
  45                 <text x="620" y="315" onclick="textbox3.setValue('bla bla',false)">Click on this text to reset content of textbox nr 3</text>
  46                 <text x="620" y="338" onclick="posX = -30 + Math.random()*40;posY = -25 + Math.random()*50;textbox3.moveTo(posX,posY)">Click on this text to randomly reposition textbox nr 3</text>
  47                 <text x="620" y="361" onclick="newWidth = 100 + Math.random()*130;textbox3.resize(newWidth)">Click on this text to randomly resize textbox nr 3</text>
  48         </g>
  49 </svg>