third_party/WebKit/LayoutTests/svg/custom/text-dom-01-f.svg

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Full//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat.dtd">
   3 <svg version="1.1" baseProfile="full" id="svg-root" width="480" height="360" viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="testSVGTextContentElement()">
   4   <!--========================================================================-->
   5   <!--=  Copyright 2006 World Wide Web Consortium, (Massachusetts          =-->
   6   <!--=  Institute of Technology, European Research Consortium for         =-->
   7   <!--=  Informatics and Mathematics (ERCIM), Keio University).            =-->
   8   <!--=  All Rights Reserved.                                              =-->
   9   <!--=  See http://www.w3.org/Consortium/Legal/.                          =-->
  10   <!--========================================================================-->
  11   <!-- NOTE:  CVS will automatically update the                             -->
  12   <!--        "$RCSfile: text-dom-01-f.svg,v $" and "$Revision: 1.1 $"         -->
  13   <!--        fields in the file.                                           -->
  14   <!--        There is no need to update this information.                  -->
  15   <!-- =====================================================================-->
  16         <SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/" reviewer="[reviewer]" owner="AN" desc="Tests the interface SVGTextContentElement" status="created" version="$Revision: 1.1 $" testname="$RCSfile: text-dom-01-f.svg,v $">
  17     <OperatorScript>
  18       <Paragraph>
  19         This tests the methods and properties of the SVGTextContentElement interface on the text element with the id 'testText'
  20         and the content 'This is a test of the interface SVGTextContentElement'. The word 'is' has two glyphs with different
  21         rotation values defined with a &lt;tspan/&gt; element. There are 12 subtests testing the 9 methods and 2 properties.
  22         Note that the numeric results of some methods may vary. The additional instructions state where the result may vary
  23         and where it should have an exact value.
  24       </Paragraph>
  25         <Paragraph>
  26                 The first subtest is testing the method .getCharNumAtPosition(svgPt), where svgPt has an x value of 240 and y value of 25.
  27                 The result of this subtest must be "30".
  28         </Paragraph>
  29         <Paragraph>
  30                 The second subtest is testing the method .getComputedTextLength(). The rounded result may vary in the implementations but should be around 364.
  31                 A red line below the testText is visually indicating the result of the method .getComputedTextLength() and must look like a red underline
  32                 with a length that spans the whole text length from 'T' to '.'.
  33         </Paragraph>
  34         <Paragraph>
  35                 The third subtest is testing the method .getEndPositionOfChar() at the 11th character ('e').
  36                 The rounded result may vary in the implementations but should be around 131 for the 'x' value and must be 30 for the 'y' value.
  37                 Additionally, a red vertical line is indicating the end position of the character 'e'. Its lower 'y' value must be at 30
  38                 and the 'x' values must match the end position of the 11th character 'e'.
  39         </Paragraph>
  40         <Paragraph>
  41                 The fourth subtest is testing the method .getExtentOfChar() at the 11th character ('e').
  42                 The rounded result may vary in the implementations but should be around '123,16,8,17' for the 'x,y,width,height' values.
  43                 A lightblue rectangle below the character 'e' must fully enclose the 11th glyph.
  44         </Paragraph>
  45         <Paragraph>
  46                 The fifth subtest is testing the method .getNumberOfChars(). The result must be 54.
  47         </Paragraph>
  48         <Paragraph>
  49                 The sixth subtest is testing the method .getRotationOfChar() for the fifth character. The result must be 45.
  50                 Additionally, a lightblue rectangle below the text indicates the extent of the fifth glyph 'i'.
  51                 It must fully enclose the diagonally rotated fifth glyph 'i'.
  52         </Paragraph>
  53         <Paragraph>
  54                 The seventh subtest is testing the method .getStartPositionOfChar() at the 11th character ('e').
  55                 The rounded result may vary in the implementations but should be around 123 for the 'x' value and must be 30 for the 'y' value.
  56                 Additionally, a red vertical line is indicating the start position of the character 'e'. Its lower 'y' value must be at 30
  57                 and the 'x' values must match the end position of the 11th character 'e'.
  58         </Paragraph>
  59         <Paragraph>
  60                 The eighth subtest is testing the method .getSubStringLength(), starting at character 22 and including the 9 following characters.
  61                 The result may vary in the implementations but should be around 58. Additionally, a green (lime) line visually indicates
  62                 the result of the method. The word 'interface' must be fully underlined with the green line.
  63         </Paragraph>
  64         <Paragraph>
  65                 The ninth subtest is testing the method .selectSubString(). After loading the file, the word "the" must be selected.
  66         </Paragraph>
  67         <Paragraph>
  68                 The tenth subtest is testing the property .textLength. The rounded result of .textLength.baseVal.value may vary in
  69                 the implementations but should be around 364.
  70                 It must match the value calculated in the second subtest (.getComputedTextLength()).
  71         </Paragraph>
  72         <Paragraph>
  73                 The eleventh subtest is again testing the property .textLength. The rounded result of .textLength.animVal.value may vary in
  74                 the implementations but should be around 364.
  75                 It must match the value calculated in the second subtest (.getComputedTextLength()).
  76         </Paragraph>
  77         <Paragraph>
  78                 The twelfth subtest is again testing the property .lengthAdjust. The results of .lengthAdjust.baseVal and
  79                 .lengthAdjust.animVal must be 1 and 1.
  80         </Paragraph>
  81     </OperatorScript>
  82   </SVGTestCase>
  83   <title id="test-title">$RCSfile: text-dom-01-f.svg,v $</title>
  84   <!--======================================================================-->
  85   <!--Content of Test Case follows...                  =====================-->
  86   <!--======================================================================-->
  87   <g id="test-body-content">
  88         <script type="text/ecmascript"><![CDATA[
  89                 function testSVGTextContentElement() {
  90                 var svgNS = "http://www.w3.org/2000/svg";
  91                         var tContentEl = document.getElementById("testText");
  92                 var textGroup = document.getElementById("textGroup");
  93                 var svgPt = document.documentElement.createSVGPoint();
  94                 svgPt.x = 240;
  95                 svgPt.y = 25;
  96
  97                 //1: testing .getCharNumAtPosition()
  98                 var charNumresult = tContentEl.getCharNumAtPosition(svgPt);
  99                 document.getElementById("text1").firstChild.data = ".getCharNumAtPosition() result: "+charNumresult;
 100
 101                 //2: testing .getCharNumAtPosition()
 102                         var compTextLength = tContentEl.getComputedTextLength();
 103                 document.getElementById("text2").firstChild.data = ".getComputedTextLength() result: "+Math.round(compTextLength);
 104                         var baseLine = document.createElementNS(svgNS,"line");
 105                 baseLine.setAttributeNS(null,"stroke","red");
 106                 baseLine.setAttributeNS(null,"x1",(240 - compTextLength * 0.5));
 107                 baseLine.setAttributeNS(null,"x2",(240 + compTextLength * 0.5));
 108                 baseLine.setAttributeNS(null,"y1",30);
 109                 baseLine.setAttributeNS(null,"y2",30);
 110                 textGroup.insertBefore(baseLine,tContentEl);
 111
 112                 //3: testing .getEndPositionOfChar(), end of character
 113                         var endPosChar = tContentEl.getEndPositionOfChar(11);
 114                 document.getElementById("text3").firstChild.data = ".getEndPositionOfChar(11) result ('e'): "+Math.round(endPosChar.x)+","+Math.round(endPosChar.y);
 115                         var endPosLine = document.createElementNS(svgNS,"line");
 116                 endPosLine.setAttributeNS(null,"stroke","red");
 117                 endPosLine.setAttributeNS(null,"x1",endPosChar.x);
 118                 endPosLine.setAttributeNS(null,"x2",endPosChar.x);
 119                 endPosLine.setAttributeNS(null,"y1",endPosChar.y);
 120                 endPosLine.setAttributeNS(null,"y2",endPosChar.y-15);
 121                 textGroup.insertBefore(endPosLine,tContentEl);
 122
 123                 //4: testing getExtentOfChar
 124                 var charExtent = tContentEl.getExtentOfChar(11);
 125                 document.getElementById("text4").firstChild.data = ".getExtentOfChar(11) result ('e'): "+Math.round(charExtent.x)+","+Math.round(charExtent.y)+","+Math.round(charExtent.width)+","+Math.round(charExtent.height);
 126                         var extentRect = document.createElementNS(svgNS,"rect");
 127                 extentRect.setAttributeNS(null,"fill","lightblue");
 128                 extentRect.setAttributeNS(null,"x",charExtent.x);
 129                 extentRect.setAttributeNS(null,"y",charExtent.y);
 130                 extentRect.setAttributeNS(null,"width",charExtent.width);
 131                 extentRect.setAttributeNS(null,"height",charExtent.height);
 132                 textGroup.insertBefore(extentRect,baseLine);
 133
 134                 //5: testing getNumberOfChars
 135                 var numChars = tContentEl.getNumberOfChars();
 136                 document.getElementById("text5").firstChild.data = ".getNumberOfChars() result: "+numChars;
 137
 138                 //6: testing getRotationOfChar
 139                 var charRot = tContentEl.getRotationOfChar(5);
 140                 document.getElementById("text6").firstChild.data = ".getRotationOfChar(5) result: "+charRot;
 141                 var rotCharExtent = tContentEl.getExtentOfChar(5);
 142                         var rotExtentRect = document.createElementNS(svgNS,"rect");
 143                 rotExtentRect.setAttributeNS(null,"fill","lightblue");
 144                 rotExtentRect.setAttributeNS(null,"x",rotCharExtent.x);
 145                 rotExtentRect.setAttributeNS(null,"y",rotCharExtent.y);
 146                 rotExtentRect.setAttributeNS(null,"width",rotCharExtent.width);
 147                 rotExtentRect.setAttributeNS(null,"height",rotCharExtent.height);
 148                 textGroup.insertBefore(rotExtentRect,baseLine);
 149
 150                 //7: testing .getStartPositionOfChar(), end of character
 151                         var startPosChar = tContentEl.getStartPositionOfChar(11);
 152                 document.getElementById("text7").firstChild.data = ".getStartPositionOfChar(11) result ('e'): "+Math.round(startPosChar.x)+","+Math.round(startPosChar.y);
 153                         var startPosLine = document.createElementNS(svgNS,"line");
 154                 startPosLine.setAttributeNS(null,"stroke","red");
 155                 startPosLine.setAttributeNS(null,"x1",startPosChar.x);
 156                 startPosLine.setAttributeNS(null,"x2",startPosChar.x);
 157                 startPosLine.setAttributeNS(null,"y1",startPosChar.y);
 158                 startPosLine.setAttributeNS(null,"y2",startPosChar.y-15);
 159                 textGroup.insertBefore(startPosLine,tContentEl);
 160
 161                 //8: testing .getSubStringLength()
 162                 var startPosInterface = tContentEl.getStartPositionOfChar(22);
 163                 var subStrLength = tContentEl.getSubStringLength(22,9);
 164                 document.getElementById("text8").firstChild.data = ".getSubStringLength(22,9) result ('interface'): "+Math.round(subStrLength);
 165                         var subStrLine = document.createElementNS(svgNS,"line");
 166                 subStrLine.setAttributeNS(null,"stroke","lime");
 167                 subStrLine.setAttributeNS(null,"x1",startPosInterface.x);
 168                 subStrLine.setAttributeNS(null,"x2",(startPosInterface.x+subStrLength));
 169                 subStrLine.setAttributeNS(null,"y1",startPosInterface.y);
 170                 subStrLine.setAttributeNS(null,"y2",startPosInterface.y);
 171                 textGroup.insertBefore(subStrLine,tContentEl);
 172
 173                 //9: testing .selectSubString()
 174                 tContentEl.selectSubString(18,3);
 175
 176                 //10: testing textLength.baseVal.value
 177                 var tlbaseval = tContentEl.textLength.baseVal.value;
 178                 document.getElementById("text10").firstChild.data = ".textLength.baseVal.value result: "+Math.round(tlbaseval);
 179
 180                 //11: testing textLength.baseVal.value
 181                 var tlanimval = tContentEl.textLength.animVal.value;
 182                 document.getElementById("text11").firstChild.data = ".textLength.animVal.value result: "+Math.round(tlanimval);
 183
 184                 //12: testing lengthAdjust baseVal and animVal
 185                 document.getElementById("text12").firstChild.data = ".lengthAdjust.baseVal and .lengthAdjust.animVal result: "+tContentEl.lengthAdjust.baseVal+","+tContentEl.lengthAdjust.animVal;;
 186         }
 187         ]]></script>
 188         <g id="textGroup" font-family="Arial" font-size="15">
 189                 <text x="240" y="30" text-anchor="middle" id="testText">This <tspan rotate="45,90">is</tspan> a test of the interface SVGTextContentElement.</text>
 190                 <text id="text1" x="30" y="60">.getCharNumAtPosition() result: </text>
 191                 <text id="text2" x="30" y="80">.getComputedTextLength() result: </text>
 192                 <text id="text3" x="30" y="100">.getEndPositionOfChar(11) result ('e'): </text>
 193                 <text id="text4" x="30" y="120">.getExtentOfChar(11) result ('e'): </text>
 194                 <text id="text5" x="30" y="140">.getNumberOfChars() result: </text>
 195                 <text id="text6" x="30" y="160">.getRotationOfChar(5) result: </text>
 196                 <text id="text7" x="30" y="180">.getStartPositionOfChar(11) result: </text>
 197                 <text id="text8" x="30" y="200">.getSubStringLength(22,9) result ('interface'): </text>
 198                 <text id="text9" x="30" y="220">.selectSubString(18,3) result: the word 'the' should be selected</text>
 199                 <text id="text10" x="30" y="240">.textLength.baseVal.value result:</text>
 200                 <text id="text11" x="30" y="260">.textLength.animVal.value result:</text>
 201                 <text id="text12" x="30" y="280">.lengthAdjust.baseVal and .lengthAdjust.animVal result:</text>
 202         </g>
 203   </g>
 204   <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.1 $</text>
 205   <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
 206 </svg>