SVGViewTests/w3c/1.2T/svg/text-edit-201-t.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.2" baseProfile="tiny" xml:id="svg-root" width="100%" height="100%"
  viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xe="http://www.w3.org/2001/xml-events">
  <!--======================================================================-->
  <!--=  Copyright 2008 World Wide Web Consortium, (Massachusetts          =-->
  <!--=  Institute of Technology, European Research Consortium for         =-->
  <!--=  Informatics and Mathematics (ERCIM), Keio University).            =-->
  <!--=  All Rights Reserved.                                              =-->
  <!--=  See http://www.w3.org/Consortium/Legal/.                          =-->
  <!--======================================================================-->
  <SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/"
    reviewer="AE,AN" owner="ED" desc="Test editable in textArea" status="accepted"
    approved="yes"
    version="$Revision: 1.6 $" testname="$RCSfile: text-edit-201-t.svg,v $">
    <d:OperatorScript xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/" xmlns="http://www.w3.org/1999/xhtml">
      <p>
        This test checks basic text-editing capabilities.
      </p>
      <p>
        Start editing by activating the textArea that has a green dashed outline.
        This textArea has no child text content, but has a defined width and height.
        Input the string "123  456" (one two three, space, space, four five six).

        After input is complete, click the button labeled "Check #1". If the frame around
        the textArea goes from being dashed to being solid then that part of the test has passed.
        Another condition is that the text string "123  456" should look like it only has one space
        and not two due to the whitespace handling rules.
      </p>
      <p>
        Next activate the middle textArea that has a red dashed outline.
        Input two spaces between 3 and 4. Now since this textArea has xml:space="preserve" those
        two spaces should be rendered as two spaces, meaning it must look different from the first
        textArea on the left. The textContent must be the same in both cases though, and this is
        verified by clicking the button labeled "Check #2". If the test is successful the frame
        will turn from dashed red to solid red.
      </p>
      <p>
        Finally activate the rightmost textArea that has a blue dashed outline.
        Then exit the editing mode without changing the text. The text must not change and the 'tbreak' element
        must be kept in the position it's in. Now activate the textArea again and input an additional linebreak between 3 and 4.
        The line "345" must now be on the third line, the second line being blank.
        Click the button labeled "Check #3" to verify the result, the frame will turn from dashed
        blue to solid blue if successful.
      </p>
      <p>
        The test has passed if after inputting text according to the instructions above and clicking the three
        buttons the rendered image matches the reference image exactly.
      </p>
    </d:OperatorScript>
  </SVGTestCase>
  <title xml:id="test-title">$RCSfile: text-edit-201-t.svg,v $</title>
  <defs>
    <font-face
      font-family="SVGFreeSansASCII"
      unicode-range="U+0-7F">
      <font-face-src>
        <font-face-uri xlink:href="../images/SVGFreeSans.svg#ascii"/>
      </font-face-src>
    </font-face>
  </defs>
  <g xml:id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18" stroke-width="2">

    <text y="50" x="240" text-anchor="middle">Test editable text in textArea</text>

    <g transform="translate(50,100)">
      <text x="50" y="-10" text-anchor="middle" font-size="9" xml:space="preserve">Input the string "123  456" (two spaces).</text>

      <textArea xml:id="ta1" width="100" height="100" pointer-events="boundingBox" editable="simple"></textArea>
      <rect xml:id="r1" width="100" height="100" stroke="green" fill="none" stroke-dasharray="5,5"/>

      <rect y="110" width="100" height="20" rx="5" fill="none" stroke="green" pointer-events="fill">
        <handler xe:event="click">
          if(document.getElementById("ta1").textContent == "123  456")
          document.getElementById("r1").setAttributeNS(null, "stroke-dasharray", "none");
        </handler>
      </rect>
      <text x="50" y="126" text-anchor="middle" pointer-events="none">Check #1</text>
    </g>
    <g transform="translate(190,140)">
      <text x="50" y="-10" text-anchor="middle" font-size="9">Insert two spaces between 3 and 4.</text>

      <textArea xml:id="ta2" width="100" height="100" xml:space="preserve" pointer-events="boundingBox" editable="simple">123456</textArea>
      <rect xml:id="r2" width="100" height="100" stroke="red" fill="none" stroke-dasharray="5,5"/>

      <rect y="110" width="100" height="20" rx="5" fill="none" stroke="red" pointer-events="fill">
        <handler xe:event="click">
          if(document.getElementById("ta2").textContent == "123  456")
          document.getElementById("r2").setAttributeNS(null, "stroke-dasharray", "none");
        </handler>
      </rect>
      <text x="50" y="126" text-anchor="middle" pointer-events="none">Check #2</text>
    </g>
    <g transform="translate(330,100)">
      <text x="50" y="-10" text-anchor="middle" font-size="9">Insert an additional linefeed between 3 and 4.</text>

      <textArea xml:id="ta3" width="100" height="100" pointer-events="boundingBox" editable="simple">123<tbreak/>456</textArea>
      <rect xml:id="r3" width="100" height="100" stroke="blue" fill="none" stroke-dasharray="5,5"/>

      <rect y="110" width="100" height="20" rx="5" fill="none" stroke="blue" pointer-events="fill">
        <handler xe:event="click">
          <![CDATA[
            var ta = document.getElementById("ta3");
            if (ta.textContent == "123456" &&
              ta.firstElementChild.localName == 'tbreak' &&
              ta.lastElementChild.localName == 'tbreak' &&
              ta.firstElementChild != ta.lastElementChild &&
              ta.firstElementChild.nextElementSibling == ta.lastElementChild)
              document.getElementById("r3").setAttributeNS(null, "stroke-dasharray", "none");
            ]]>
        </handler>
      </rect>
      <text x="50" y="126" text-anchor="middle" pointer-events="none">Check #3</text>
    </g>
  </g>
  <g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
    <text xml:id="revision" x="10" y="340" stroke="none"
      fill="black">$Revision: 1.6 $</text>
  </g>
  <rect xml:id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
  <!-- comment out this watermark once the test is approved -->
  <!-- <g xml:id="draft-watermark">
    <rect x="1" y="1" width="478" height="20" fill="red" stroke="black" stroke-width="1"/>
    <text font-family="SVGFreeSansASCII,sans-serif" font-weight="bold" font-size="20" x="240" 
      text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text>
  </g>
  -->
</svg>