<use> test struct-use-12-f_hover.svg

Here is the <use> test that I promised from the last telecon; we decided to keep it separate mostly because the other <use> case was running out of room and this will take at least 6 more circles to fully get the point across and this case requires interaction, so it will need separate directions.

Let me know if this is in the right direction. Right now only Firefox passes (we took the path of Opera), but we do think this is the right interoperation of the spec and the right expected developer experience.

I would have posted it but I am still wrestling with the toolset.



<svg 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">
  <!--======================================================================-->
  <!--=  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/.                          =-->
  <!--======================================================================-->
  <d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
    template-version="1.4" reviewer="[reviewer]" author="Microsoft" status="created"
    version="$Revision: 1.4 $" testname="$RCSfile: template11-f.svg,v $">
    <d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/struct.html#UseElement">
      <p>
        <!--[[
        Interactive CSS Selectors and 'use'
        ]]-->
      </p>
    </d:testDescription>
    <d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
      <p>
        <!--[[
        A 'style' block contains all CSS rules. Various CSS selectors are applied to 'circle' elements. A unique 'class' selector is
        used for all cases to ensure that the selectors don't interfere with each other. For each 'circle', there is a corresponding
        'use' instance. For structure-related rules, a 'g' tag is used.
		
        ]]-->
      </p>
    </d:operatorScript>
    <d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
      <p>
        <!--[[
        Test passes if hovering over any circle in the blue box turns that particular circle (and no others) blue and putting focus (click) on the any circle in the orange box turns that particular circle (and no others) orange.
        ]]-->
      </p>
    </d:passCriteria>
  </d:SVGTestCase>
  <title id="test-title">$RCSfile: template11-f.svg,v $</title>
  <defs>
    <font-face
      font-family="SVGFreeSansASCII"
      unicode-range="U+0-7F">
      <font-face-src>
        <font-face-uri xlink:href="../resources/SVGFreeSans.svg#ascii"/>
      </font-face-src>
    </font-face>
  </defs>
  <g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">

    <style type="text/css"><![CDATA[
        circle.test1:hover
        {
			fill: blue;
        }
		
        circle.test2:active
        {
			fill: orange;
        }]]>
    </style>
	
	<rect id="hoverFrame" x="85" y="45" width="330" height="110" stroke="blue" stroke-width="5" fill="none" />
	<circle cx="140" cy="100" r="48" id="testHover" class="test1" />
    <use xlink:href="#testHover" x="110" y="0" id="hoverUse1" />
    <use xlink:href="#hoverUse1" x="110" y="0" id="hoverUse2" />
	
	<rect id="activeFrame" x="85" y="170" width="330" height="110" stroke="orange" stroke-width="5" fill="none" />
	<circle cx="140" cy="225" r="48" id="testActive" class="test2" />
    <use xlink:href="#testActive" x="110" y="0" id="activeUse1" />
    <use xlink:href="#activeUse1" x="110" y="0" id="activeUse2" />


  </g>
  <g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
    <text id="revision" x="10" y="340" stroke="none"
      fill="black">$Revision: 1.4 $</text>
  </g>
  <rect 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 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>

Received on Monday, 3 May 2010 18:38:49 UTC