styling-pres-02-f-novalid.html (7580B)
1 <!DOCTYPE html> 2 <html lang='en'> 3 <head> 4 <title>styling-pres-02-f-manual.svg</title> 5 <meta charset='utf-8'> 6 </head> 7 <body> 8 <h1>Source SVG: styling-pres-02-f-manual.svg</h1> 9 <svg id="svg-root" width="100%" height="100%" 10 viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" 11 xmlns:xlink="http://www.w3.org/1999/xlink"> 12 <!--======================================================================--> 13 <!--= Copyright 2008 World Wide Web Consortium, (Massachusetts =--> 14 <!--= Institute of Technology, European Research Consortium for =--> 15 <!--= Informatics and Mathematics (ERCIM), Keio University). =--> 16 <!--= All Rights Reserved. =--> 17 <!--= See http://www.w3.org/Consortium/Legal/. =--> 18 <!--======================================================================--> 19 20 <title id="test-title">$RCSfile: styling-pres-02-f.svg,v $</title> 21 <defs> 22 <font-face 23 font-family="SVGFreeSansASCII" 24 unicode-range="U+0-7F"> 25 <font-face-src> 26 <font-face-uri xlink:href="../resources/SVGFreeSans.svg#ascii"/> 27 </font-face-src> 28 </font-face> 29 </defs> 30 <g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18"> 31 <text x='10' y='20'>Testing inapplicable presentation attributes</text> 32 33 <g visibility='hidden'> 34 <path id="path" d="M0,0"/> 35 <image id='image' xlink:href='../images/20x20.png' width='10' height='10' fill='rgb(0, 0, 255)'/> 36 <rect id='rect' width='10' height='10' font-size='123px'/> 37 <circle id='circle' r='10' font-style='italic'/> 38 <ellipse id='ellipse' rx='10' ry='5' font-variant='small-caps'/> 39 <polyline id='polyline' points='0,0 10,10' letter-spacing='20px'/> 40 <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> 41 <linearGradient id='linearGradient' display='block'><stop id='stop' offset='0' fill-rule='evenodd'/></linearGradient> 42 <radialGradient id='radialGradient' visibility='hidden'><stop offset='0'/></radialGradient> 43 <clipPath id='clipPath' lighting-color='rgb(255, 255, 255)'/> 44 </g> 45 46 <g font-size='14'> 47 <rect id='r1' x='10' y='25' width='20' height='20'/> 48 <text x='40' y='40'>fill on image</text> 49 50 <rect id='r2' x='10' y='55' width='20' height='20'/> 51 <text x='40' y='70'>stop-opacity on tspan</text> 52 53 <rect id='r3' x='10' y='85' width='20' height='20'/> 54 <text x='40' y='100'>font-size on rect</text> 55 56 <rect id='r4' x='10' y='115' width='20' height='20'/> 57 <text x='40' y='130'>font-style on circle</text> 58 59 <rect id='r5' x='10' y='145' width='20' height='20'/> 60 <text x='40' y='160'>stop-color on text</text> 61 62 <rect id='r6' x='10' y='175' width='20' height='20'/> 63 <text x='40' y='190'>font-variant on ellipse</text> 64 65 <rect id='r7' x='10' y='205' width='20' height='20'/> 66 <text x='40' y='220'>letter-spacing on polyline</text> 67 68 <rect id='r11' x='250' y='25' width='20' height='20'/> 69 <text x='280' y='40'>flood-color on tref</text> 70 71 <rect id='r12' x='250' y='55' width='20' height='20'/> 72 <text x='280' y='70'>flood-opacity on textPath</text> 73 74 <rect id='r13' x='250' y='85' width='20' height='20'/> 75 <text x='280' y='100'>clr-intp-filters on altGlyph</text> 76 77 <rect id='r14' x='250' y='115' width='20' height='20'/> 78 <text x='280' y='130'>display on linearGradient</text> 79 80 <rect id='r15' x='250' y='145' width='20' height='20'/> 81 <text x='280' y='160'>fill-rule on stop</text> 82 83 <rect id='r16' x='250' y='175' width='20' height='20'/> 84 <text x='280' y='190'>visibility on radialGradient</text> 85 86 <rect id='r17' x='250' y='205' width='20' height='20'/> 87 <text x='280' y='220'>lighting-color on clipPath</text> 88 </g> 89 90 <script><![CDATA[ 91 function $(x) { return document.getElementById(x) } 92 function decimalToHex(d) { 93 var hex = Number(d).toString(16); 94 while (hex.length < 2) { 95 hex = "0" + hex; 96 } 97 return hex; 98 } 99 100 function checkSVGColor(e, p, r, g, b) { 101 var v; 102 try { 103 var cssstyledecl = document.defaultView.getComputedStyle(e,null); 104 var v = cssstyledecl.getPropertyValue(p); 105 var longhex = "#" + decimalToHex(r) + decimalToHex(g) + decimalToHex(b); 106 return v == "rgb(" + r + ", " + g + ", " + b + ")" || 107 v == "rgba(" + r + ", " + g + ", " + b + ", 1)" || 108 v == longhex || 109 v == longhex.toUpperCase(); 110 } catch (ex) { 111 } 112 return false; 113 } 114 115 function checkFloat(e, p, f) { 116 var v; 117 try { 118 var cssstyledecl = document.defaultView.getComputedStyle(e,null); 119 v = cssstyledecl.getPropertyValue(p); 120 return parseFloat(v) == f; 121 } catch (ex) { 122 } 123 return false; 124 } 125 126 function checkPx(e, p, f) { 127 var v; 128 try { 129 var cssstyledecl = document.defaultView.getComputedStyle(e,null); 130 v = cssstyledecl.getPropertyValue(p); 131 return v == f; 132 } catch (ex) { 133 } 134 return false; 135 } 136 137 function checkIdent(e, p, i) { 138 var v; 139 i = i.toLowerCase(); 140 try { 141 var cssstyledecl = document.defaultView.getComputedStyle(e,null); 142 v = cssstyledecl.getPropertyValue(p); 143 return v.toLowerCase() == i; 144 } catch (ex) { 145 } 146 return false; 147 } 148 149 function report(n, b) { 150 $('r' + n).setAttribute('fill', b ? 'green' : 'red'); 151 } 152 153 report(1, checkSVGColor($('image'), 'fill', 0, 0, 255)); 154 report(2, checkFloat($('tspan'), 'stop-opacity', 0.5)); 155 report(3, checkPx($('rect'), 'font-size', '123px')); 156 report(4, checkIdent($('circle'), 'font-style', 'italic')); 157 report(5, checkSVGColor($('text'), 'stop-color', 0, 255, 0)); 158 report(6, checkIdent($('ellipse'), 'font-variant', 'small-caps')); 159 report(7, checkPx($('polyline'), 'letter-spacing', '20px')); 160 161 report(11, checkSVGColor($('tref'), 'flood-color', 255, 0, 0)); 162 report(12, checkFloat($('textPath'), 'flood-opacity', 0.25)); 163 report(13, checkIdent($('altGlyph'), 'color-interpolation-filters', 'auto')); 164 report(14, checkIdent($('linearGradient'), 'display', 'block')); 165 report(15, checkIdent($('stop'), 'fill-rule', 'evenodd')); 166 report(16, checkIdent($('radialGradient'), 'visibility', 'hidden')); 167 report(17, checkSVGColor($('clipPath'), 'lighting-color', 255, 255, 255)); 168 ]]></script> 169 </g> 170 <g font-family="SVGFreeSansASCII,sans-serif" font-size="32"> 171 <text id="revision" x="10" y="340" stroke="none" 172 fill="black">$Revision: 1.9 $</text> 173 </g> 174 <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/> 175 <!-- comment out this watermark once the test is approved --> 176 <!-- 177 <g id="draft-watermark"> 178 <rect x="1" y="1" width="478" height="20" fill="red" stroke="black" stroke-width="1"/> 179 <text font-family="SVGFreeSansASCII,sans-serif" font-weight="bold" font-size="20" x="240" 180 text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text> 181 </g> 182 --> 183 </svg> 184 </body> 185 </html>