SVGViewTests/w3c/1.1F2/svg/styling-pres-02-f.svg

<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.3" reviewer="CL" author="CM" status="accepted"
    version="$Revision: 1.9 $" testname="$RCSfile: styling-pres-02-f.svg,v $">
    <d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/styling.html#UsingPresentationAttributes">
        <p>
          This tests that a presentation attribute that is not relevant
          to a given element which is otherwise stylable is correctly stored
          in the property collection for that element.  In particular,
          it tests the following presentation attributes:
        </p>
        <ul>
          <li>fill on image</li>
          <li>stop-opacity on tspan</li>
          <li>font-size on rect</li>
          <li>font-style on circle</li>
          <li>stop-color on text</li>
          <li>font-variant on ellipse</li>
          <li>letter-spacing on polyline</li>
          <li>flood-color on tref</li>
          <li>flood-opacity on textPath</li>
          <li>color-interpolation-filters on altGlyph</li>
          <li>display on linearGradient</li>
          <li>fill-rule on stop</li>
          <li>visibility on radialGradient</li>
          <li>lighting-color on clipPath</li>
        </ul>
    </d:testDescription>
    <d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
      <p>
        The test comprises 14 sub-tests, each with a rectangle that indicates
        whether a given presentation attribute of the 14 listed in the test
        description affects the style of the element on which it is specified.  A rectangle
        is black if the sub-test did not run, red if the sub-test failed and
        green if the sub-test succeeded.
      </p>
    </d:operatorScript>
    <d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
      <p>
        The test is passed if all 14 rectangles are green.
      </p>
    </d:passCriteria>
  </d:SVGTestCase>
  <title id="test-title">$RCSfile: styling-pres-02-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">
    <text x='10' y='20'>Testing inapplicable presentation attributes</text>

    <g visibility='hidden'>
    	<path id="path" d="M0,0"/>
      <image id='image' xlink:href='../images/20x20.png' width='10' height='10' fill='rgb(0, 0, 255)'/>
      <rect id='rect' width='10' height='10' font-size='123px'/>
      <circle id='circle' r='10' font-style='italic'/>
      <ellipse id='ellipse' rx='10' ry='5' font-variant='small-caps'/>
      <polyline id='polyline' points='0,0 10,10' letter-spacing='20px'/>
      <text id='text' stop-color='rgb(0, 255, 0)'>a<tspan id='tspan' stop-opacity='0.5'>b</tspan><tref id='tref' xlink:href='#tspan' flood-color='rgb(255, 0, 0)'/><textPath id='textPath' xlink:href='#path' flood-opacity='0.25'/><altGlyph id='altGlyph' glyphRef='blah' color-interpolation-filters='auto'>c</altGlyph></text>
      <linearGradient id='linearGradient' display='block'><stop id='stop' offset='0' fill-rule='evenodd'/></linearGradient>
      <radialGradient id='radialGradient' visibility='hidden'><stop offset='0'/></radialGradient>
      <clipPath id='clipPath' lighting-color='rgb(255, 255, 255)'/>
    </g>

    <g font-size='14'>
      <rect id='r1' x='10' y='25' width='20' height='20'/>
      <text x='40' y='40'>fill on image</text>

      <rect id='r2' x='10' y='55' width='20' height='20'/>
      <text x='40' y='70'>stop-opacity on tspan</text>

      <rect id='r3' x='10' y='85' width='20' height='20'/>
      <text x='40' y='100'>font-size on rect</text>

      <rect id='r4' x='10' y='115' width='20' height='20'/>
      <text x='40' y='130'>font-style on circle</text>

      <rect id='r5' x='10' y='145' width='20' height='20'/>
      <text x='40' y='160'>stop-color on text</text>

      <rect id='r6' x='10' y='175' width='20' height='20'/>
      <text x='40' y='190'>font-variant on ellipse</text>

      <rect id='r7' x='10' y='205' width='20' height='20'/>
      <text x='40' y='220'>letter-spacing on polyline</text>

      <rect id='r11' x='250' y='25' width='20' height='20'/>
      <text x='280' y='40'>flood-color on tref</text>

      <rect id='r12' x='250' y='55' width='20' height='20'/>
      <text x='280' y='70'>flood-opacity on textPath</text>

      <rect id='r13' x='250' y='85' width='20' height='20'/>
      <text x='280' y='100'>clr-intp-filters on altGlyph</text>

      <rect id='r14' x='250' y='115' width='20' height='20'/>
      <text x='280' y='130'>display on linearGradient</text>

      <rect id='r15' x='250' y='145' width='20' height='20'/>
      <text x='280' y='160'>fill-rule on stop</text>

      <rect id='r16' x='250' y='175' width='20' height='20'/>
      <text x='280' y='190'>visibility on radialGradient</text>

      <rect id='r17' x='250' y='205' width='20' height='20'/>
      <text x='280' y='220'>lighting-color on clipPath</text>
    </g>

    <script><![CDATA[
      function $(x) { return document.getElementById(x) }
      function decimalToHex(d) {
        var hex = Number(d).toString(16);
        while (hex.length < 2) {
            hex = "0" + hex;
        }
        return hex;
      }
  
      function checkSVGColor(e, p, r, g, b) {
        var v;
        try {
          var cssstyledecl = document.defaultView.getComputedStyle(e,null);
          var v = cssstyledecl.getPropertyValue(p);
          var longhex = "#" + decimalToHex(r) + decimalToHex(g) + decimalToHex(b);
          return v == "rgb(" + r + ", " + g + ", " + b + ")" ||
                 v == "rgba(" + r + ", " + g + ", " + b + ", 1)" ||
                 v == longhex ||
                 v == longhex.toUpperCase();
        } catch (ex) {
        }
        return false;
      }

      function checkFloat(e, p, f) {
        var v;
        try {
          var cssstyledecl = document.defaultView.getComputedStyle(e,null);
          v = cssstyledecl.getPropertyValue(p);
          return parseFloat(v) == f;
        } catch (ex) {
        }
        return false;
      }

      function checkPx(e, p, f) {
        var v;
        try {
          var cssstyledecl = document.defaultView.getComputedStyle(e,null);
          v = cssstyledecl.getPropertyValue(p);
          return v == f;
        } catch (ex) {
        }
        return false;
      }

      function checkIdent(e, p, i) {
        var v;
        i = i.toLowerCase();
        try {
          var cssstyledecl = document.defaultView.getComputedStyle(e,null);
          v = cssstyledecl.getPropertyValue(p);
          return v.toLowerCase() == i;
        } catch (ex) {
        }
        return false;
      }

      function report(n, b) {
        $('r' + n).setAttribute('fill', b ? 'green' : 'red');
      }

      report(1, checkSVGColor($('image'), 'fill', 0, 0, 255));
      report(2, checkFloat($('tspan'), 'stop-opacity', 0.5));
      report(3, checkPx($('rect'), 'font-size', '123px'));
      report(4, checkIdent($('circle'), 'font-style', 'italic'));
      report(5, checkSVGColor($('text'), 'stop-color', 0, 255, 0));
      report(6, checkIdent($('ellipse'), 'font-variant', 'small-caps'));
      report(7, checkPx($('polyline'), 'letter-spacing', '20px'));
      
      report(11, checkSVGColor($('tref'), 'flood-color', 255, 0, 0));
      report(12, checkFloat($('textPath'), 'flood-opacity', 0.25));
      report(13, checkIdent($('altGlyph'), 'color-interpolation-filters', 'auto'));
      report(14, checkIdent($('linearGradient'), 'display', 'block'));
      report(15, checkIdent($('stop'), 'fill-rule', 'evenodd'));
      report(16, checkIdent($('radialGradient'), 'visibility', 'hidden'));
      report(17, checkSVGColor($('clipPath'), 'lighting-color', 255, 255, 255));
    ]]></script>
  </g>
  <g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
    <text id="revision" x="10" y="340" stroke="none"
      fill="black">$Revision: 1.9 $</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>