SVGViewTests/w3c/1.2T/svg/udom-event-205-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" owner="CM" desc="Test the attributes of the MouseEvent interface" status="accepted"
    approved="yes"
    version="$Revision: 1.7 $" testname="$RCSfile: udom-event-205-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>clientX</tt>, <tt>clientY</tt> and <tt>button</tt>
        attributes of the <b>MouseEvent</b> interface.
      </p>
      <p>
        The test consists of three rectangles, one for each of the three
        common mouse buttons.  To perform the test, the user must move the
        mouse cursor over a rectangle, press the mouse button down, then
        move the mouse cursor out of the rectangle.  If after this the
        rectangle becomes blue, then that sub-test has been passed, indicating
        that the <tt>clientX</tt>, <tt>clientY</tt> and <tt>button</tt>
        attributes of the <b>MouseEvent</b> object had expected values for
        the <tt>mouseover</tt>, <tt>mousedown</tt> and <tt>mouseout</tt>
        events.
      </p>
      <p>
        The test as a whole has been passed if, for each rectangle that
        corresponds to a button on the pointing device that the user
        agent supports (and has not bound to a user interface function, 
	such as a context menu), it becomes blue after performing the interaction.
        If the user agent does not support a pointing device at all,
        then the test is passed automatically without needing to
        perform any interaction.
      </p>
    </d:OperatorScript>
  </SVGTestCase>
  <title xml:id="test-title">$RCSfile: udom-event-205-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'>MouseEvent interface test</text>
    <g font-size='12'>
      <text x='10' y='70' >For each rectangle below, move the mouse over the</text>
      <text x='10' y='83'>rectangle, click, then move the mouse out of the rectangle.</text>
      <text x='10' y='105'>The text underneath the rectangle indicates which mouse</text>
      <text x='10' y='118'>button to use.</text>
      <text x='10' y='140'>If each rectangle (for which there exists the corresponding</text>
      <text x='10' y='153'>button that the user agent supports) turns blue, the test has been passed.</text>
    </g>
    <rect xml:id='rect0' x='95' y='190' width='50' height='50' fill='black'/>
    <rect xml:id='rect1' x='205' y='190' width='50' height='50' fill='black'/>
    <rect xml:id='rect2' x='315' y='190' width='50' height='50' fill='black'/>
    <g text-anchor='middle' font-size='12'>
      <text x='120' y='258'>primary</text>
      <text x='120' y='270'>(usually left)</text>
      <text x='230' y='258'>extra</text>
      <text x='230' y='270'>(usually middle)</text>
      <text x='340' y='258'>secondary</text>
      <text x='340' y='270'>(usually right)</text>
    </g>
    <script type='application/ecmascript'>
      <![CDATA[
      over = [];
      down = [];

      function checkBounds(r, x, y) {
        var x1 = Number(r.getAttributeNS(null, 'x'));
        var y1 = Number(r.getAttributeNS(null, 'y'));
        var x2 = x1 + Number(r.getAttributeNS(null, 'width'));
        var y2 = y1 + Number(r.getAttributeNS(null, 'height'));
        var m = r.getScreenCTM().inverse();
        x = m.getComponent(0) * x + m.getComponent(2) * y + m.getComponent(4);
        y = m.getComponent(1) * x + m.getComponent(3) * y + m.getComponent(5);
        return x >= x1 && x <= x2 && y >= y1 && y <= y2;
      }

      function makeListener1(r, i)
      {
        return function(e)
        {
          e.preventDefault();
          if (checkBounds(r, e.clientX, e.clientY))
          {
            if (!(i in over))
            {
              over[i] = true;
            }
          }
          else
          {
            over[i] = false;
          }
        };
      }

      function makeListener2(r, i)
      {
        return function(e)
        {
          e.preventDefault();
          if (e.button == i && checkBounds(r, e.clientX, e.clientY))
          {
            if (!(i in down))
            {
              down[i] = true;
            }
          }
          else
          {
            down[i] = false;
          }
        };
      }

      function makeListener3(r, i)
      {
        return function(e)
        {
          e.preventDefault();
          if (over[i] && down[i] && !checkBounds(r, e.clientX, e.clientY))
          {
            r.setAttributeNS(null, 'fill', 'blue');
          }
          delete over[i];
          delete down[i];
        };
      }

      for (var i = 0; i <= 2; i++)
      {
        var r = this['rect' + i] = document.getElementById('rect' + i);
        r.addEventListener('mouseover', makeListener1(r, i), false);
        r.addEventListener('mousedown', makeListener2(r, i), false);
        r.addEventListener('mouseout', makeListener3(r, i), 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.7 $</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>