test_svg.html (2970B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>SVG elements accessible roles</title> 5 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 6 7 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 8 9 <script type="application/javascript" 10 src="../common.js"></script> 11 <script type="application/javascript" 12 src="../role.js"></script> 13 <script type="application/javascript" 14 src="../attributes.js"></script> 15 16 <script type="application/javascript"> 17 function doTests() { 18 testRole("svg", ROLE_DIAGRAM); 19 testRole("g", ROLE_GROUPING); 20 testRole("rect", ROLE_GRAPHIC); 21 testRole("circle", ROLE_GRAPHIC); 22 testRole("ellipse", ROLE_GRAPHIC); 23 testRole("line", ROLE_GRAPHIC); 24 testRole("polygon", ROLE_GRAPHIC); 25 testRole("polyline", ROLE_GRAPHIC); 26 testRole("path", ROLE_GRAPHIC); 27 testRole("image", ROLE_GRAPHIC); 28 testRole("image2", ROLE_GRAPHIC); 29 testRole("a", ROLE_LINK); 30 31 SimpleTest.finish(); 32 } 33 34 SimpleTest.waitForExplicitFinish(); 35 addA11yLoadEvent(doTests); 36 </script> 37 </head> 38 <body> 39 40 <a target="_blank" 41 href="https://bugzilla.mozilla.org/show_bug.cgi?id=822983" 42 title="Map SVG graphic elements to accessibility API"> 43 Bug 822983 44 </a> 45 46 <p id="display"></p> 47 <div id="content" style="display: none"></div> 48 <pre id="test"> 49 </pre> 50 51 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg" 52 xmlns:xlink="http://www.w3.org/1999/xlink"> 53 <g id="g"> 54 <title>g</title> 55 </g> 56 <rect width="300" height="100" id="rect" 57 style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"> 58 <title>rect</title> 59 </rect> 60 <circle cx="100" cy="50" r="40" stroke="black" id="circle" 61 stroke-width="2" fill="red"> 62 <title>circle</title> 63 </circle> 64 <ellipse cx="300" cy="80" rx="100" ry="50" id="ellipse" 65 style="fill:yellow;stroke:purple;stroke-width:2"> 66 <title>ellipse</title> 67 </ellipse> 68 <line x1="0" y1="0" x2="200" y2="200" id="line" 69 style="stroke:rgb(255,0,0);stroke-width:2"> 70 <title>line</title> 71 </line> 72 <polygon points="200,10 250,190 160,210" id="polygon" 73 style="fill:lime;stroke:purple;stroke-width:1"> 74 <title>polygon</title> 75 </polygon> 76 <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" id="polyline" 77 style="fill:none;stroke:black;stroke-width:3" > 78 <title>polyline</title> 79 </polyline> 80 <path d="M150 0 L75 200 L225 200 Z" id="path"> 81 <title>path</title> 82 </path> 83 <image x1="25" y1="80" width="50" height="20" id="image" 84 xlink:href="../moz.png"> 85 <title>image</title> 86 </image> 87 <image x1="25" y1="110" width="50" height="20" id="image2" 88 xlink:href="../moz.png" aria-label="hello"/> 89 <a href="#" id="a"><text>a</text></a> 90 </svg> 91 92 </body> 93 </html>