SVGViewTests/w3c/1.2T/svg/interact-focus-210-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="ASL" owner="AE" desc="Test Focusability with the 'use' Element" status="accepted"
    approved="yes"
    version="$Revision: 1.6 $" testname="$RCSfile: interact-focus-210-t.svg,v $">
    <d:OperatorScript xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/" xmlns="http://www.w3.org/1999/xhtml">
      <p>Test Focusability with the 'use' Element</p>
      <p>
        The first four occurrences of "focus next" will highlight all four top rects.
        All four bottom rects should be able to receive the focus and be red when they have focus.
      </p>
      <p>Focus navigation is user agent dependant but typically is navigated with the keyboard keys.</p>
      <p>TAB or arrow keys move the focus while the ENTER key activates the focused element.</p>
    </d:OperatorScript>
  </SVGTestCase>
  <title xml:id="test-title">$RCSfile: interact-focus-210-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">
    <rect x="15" y="15" height="270" width="450" fill="none" stroke="black" stroke-width="0.25"/>
    <defs>
      <rect focusable="true" xml:id="rect1" width="20" height="20" fill="inherit">
      </rect>
      <rect xml:id="rect2" width="20" height="20"/>
    </defs>
    <text xml:id="display-title" x="240" y="35" text-anchor="middle" font-size="16" fill="#000">Test Focusability with the 'use' Element</text>
    <text xml:id="comment-1" x="240" y="60" text-anchor="middle" font-size="12" fill="#555">
      Each rectangle should be able to turn red individually upon receiving focus.
    </text>
    <text xml:id="comment-2" x="240" y="75" text-anchor="middle" font-size="12" fill="#555">
      The top four test the multiple use of a focusable element
    </text>
    <text xml:id="comment-3" x="240" y="90" text-anchor="middle" font-size="12" fill="#555">
      The bottom four test 'focusable' property on &lt;use&gt; element
    </text>
    <g transform="translate(77,-30) scale(2.5)" font-size="10">

      <use focusable="false" x="10" y="60" xlink:href="#rect1">
        <set attributeName="fill" to="red" begin="focusin"/>
        <set attributeName="fill" to="black" begin="focusout"/>
      </use>

      <use focusable="false" x="40" y="60" xlink:href="#rect1">
        <set attributeName="fill" to="red" begin="focusin"/>
        <set attributeName="fill" to="black" begin="focusout"/>
      </use>

      <use focusable="false" x="70" y="60" xlink:href="#rect1">
        <set attributeName="fill" to="red" begin="focusin"/>
        <set attributeName="fill" to="black" begin="focusout"/>
      </use>

      <use focusable="false" x="100" y="60" xlink:href="#rect1">
        <set attributeName="fill" to="red" begin="focusin"/>
        <set attributeName="fill" to="black" begin="focusout"/>
      </use>

      <use focusable="true" x="10" y="90" xlink:href="#rect2">
        <set attributeName="fill" to="red" begin="focusin"/>
        <set attributeName="fill" to="black" begin="focusout"/>
      </use>

      <use focusable="true" x="40" y="90" xlink:href="#rect2">
        <set attributeName="fill" to="red" begin="focusin"/>
        <set attributeName="fill" to="black" begin="focusout"/>
      </use>

      <use focusable="true" x="70" y="90" xlink:href="#rect2">
        <set attributeName="fill" to="red" begin="focusin"/>
        <set attributeName="fill" to="black" begin="focusout"/>
      </use>

      <use focusable="true" x="100" y="90" xlink:href="#rect2">
        <set attributeName="fill" to="red" begin="focusin"/>
        <set attributeName="fill" to="black" begin="focusout"/>
      </use>

    </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>