SVGViewTests/w3c/1.2T/svg/udom-event-208-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="ED" owner="CM" desc="Test the UIEvent interface and the dispatch order of mouse events" status="accepted" 
    approved="yes"
    version="$Revision: 1.6 $" testname="$RCSfile: udom-event-208-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 tests the <tt>detail</tt> attribute of the <b>UIEvent</b>
        interface and the dispatch order of mouse events when clicking.
      </p>
      <p>
        To perform the test, the user must triple click on the circle.
        The nine rectangles to the right of the circle indicate whether the
        <tt>detail</tt> attribute of the <b>UIEvent</b> object was correct
        for the <tt>mousedown</tt>, <tt>click</tt> and <tt>mouseup</tt>
        events.  The first row of rectangles checks the three events when
        <tt>detail = 1</tt>, the second row for <tt>detail = 2</tt> and
        the third row for <tt>detail = 3</tt>.
      </p>
      <p>
        In addition, the circle should remain black after the nine rectangles
        have become blue.  If the circle becomes red, it indicates that
        the test failed because the <tt>mousedown</tt>, <tt>click</tt> and
        <tt>mouseup</tt> events were fired in an incorrect order.
      </p>
      <p>
        The test has been passed if, after triple clicking the circle, all nine
        rectangles are blue and the circle remains black.
      </p>
    </d:OperatorScript>
  </SVGTestCase>
  <title xml:id="test-title">$RCSfile: udom-event-208-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">
    <text x='10' y='42'>UIEvent interface and mouse event dispatch order test</text>
    <text x='10' y='68' font-size='12'>Triple click the circle.  The nine rectangles below should turn blue and the</text>
    <text x='10' y='81' font-size='12'>circle should remain black to indicate that the test has been passed.</text>
    <circle xml:id='circle1' cx='100' cy='185' r='60'/>
    <g fill='grey'>
      <rect xml:id='rect1_mousedown' x='225' y='90' width='50' height='50'/>
      <rect xml:id='rect1_click' x='295' y='90' width='50' height='50'/>
      <rect xml:id='rect1_mouseup' x='365' y='90' width='50' height='50'/>
      <rect xml:id='rect2_mousedown' x='225' y='160' width='50' height='50'/>
      <rect xml:id='rect2_click' x='295' y='160' width='50' height='50'/>
      <rect xml:id='rect2_mouseup' x='365' y='160' width='50' height='50'/>
      <rect xml:id='rect3_mousedown' x='225' y='230' width='50' height='50'/>
      <rect xml:id='rect3_click' x='295' y='230' width='50' height='50'/>
      <rect xml:id='rect3_mouseup' x='365' y='230' width='50' height='50'/>
    </g>
    <script type='application/ecmascript'>
      <![CDATA[
        var order = 'rect1_mousedown rect1_mouseup rect1_click rect2_mousedown rect2_mouseup rect2_click rect3_mousedown rect3_mouseup rect3_click'.split(' ');

        var circle1 = document.getElementById('circle1');
        for (var i = 1; i <= 3; i++)
        {
          function makeListener(i)
          {
            return function(e)
            {
              if (order.length && e.detail == i)
              {
                var id = 'rect' + i + '_' + e.type;
                if (order.shift() != id)
                {
                  circle1.setAttributeNS(null, 'fill', 'red');
                }
                var elt = document.getElementById(id);
                if (elt)
                {
                  elt.setAttributeNS(null, 'fill', 'blue');
                }
              }
            };
          }
          var listener = makeListener(i);
          circle1.addEventListener('mousedown', listener, false);
          circle1.addEventListener('click', listener, false);
          circle1.addEventListener('mouseup', listener, false);
        }
      ]]>
    </script>
  </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>