comp_host_language_label.html (3709B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Name Comp: Host Language Label</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/wai-aria/scripts/aria-utils.js"></script> 11 </head> 12 <body> 13 14 <h1>SVG-AAM: Label Tests</h1> 15 16 <p>Tests SVG-specific host language label rules (title element and xlink:title attr) in <a href="https://w3c.github.io/svg-aam/#mapping_additional_nd">SVG-AAM ยง8.1 Name and Description</a>, but note the open issues in <a href="https://github.com/w3c/svg-aam/issues/31">SVG-AAM #31</a>. 17 18 19 <h2>SVG * > title</h2> 20 <svg viewbox="0 0 300 100"> 21 <circle cx="26" cy="26" r="25" data-expectedlabel="circle label" data-testname="circle > title" class="ex"><title>circle label</title></circle> 22 <rect x="60" y="1" width="50" height="50" data-expectedlabel="rect label" data-testname="rect > title" class="ex"><title>rect label</title></rect> 23 <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" data-expectedlabel="polygon label" data-testname="polygon > title" class="ex"><title>polygon label</title></polygon> 24 </svg><br> 25 <svg viewbox="0 0 200 90"> 26 <g fill="white" stroke="green" stroke-width="5" data-expectedlabel="group label" data-testname="g > title" class="ex"> 27 <title>group label</title> 28 <circle cx="40" cy="40" r="25" /> 29 <circle cx="60" cy="60" r="25" /> 30 </g> 31 </svg> 32 <br> 33 34 35 <h2>SVG a[xlink:title][href]</h2> 36 <svg viewbox="0 0 300 100"> 37 <a href="#" data-expectedlabel="circle link label" xlink:title="circle link label" data-testname="[xlink:title][href] > circle" class="ex"><circle cx="26" cy="26" r="25"></circle></a> 38 <a href="#" data-expectedlabel="rect link label" xlink:title="rect link label" data-testname="[xlink:title][href] > rect" class="ex"><rect x="60" y="1" width="50" height="50"></rect></a> 39 <a href="#" data-expectedlabel="polygon link label" xlink:title="polygon link label" data-testname="[xlink:title][href] > polygon" class="ex"><polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black"></polygon></a> 40 </svg><br> 41 <svg viewbox="0 0 200 90"> 42 <a href="#" data-expectedlabel="group link label" xlink:title="group link label" data-testname="[xlink:title][href] > g" class="ex"> 43 <g fill="white" stroke="green" stroke-width="5"> 44 <circle cx="40" cy="40" r="25" /> 45 <circle cx="60" cy="60" r="25" /> 46 </g> 47 </a> 48 </svg> 49 <br> 50 51 <h2>SVG a[xlink:title][xlink:href]:not([href])</h2> 52 <svg viewbox="0 0 300 100"> 53 <a xlink:href="#" data-expectedlabel="circle link label" xlink:title="circle link label" data-testname="[xlink:title][xlink:href] > circle" class="ex"><circle cx="26" cy="26" r="25"></circle></a> 54 <a xlink:href="#" data-expectedlabel="rect link label" xlink:title="rect link label" data-testname="[xlink:title][xlink:href] > rect" class="ex"><rect x="60" y="1" width="50" height="50"></rect></a> 55 <a xlink:href="#" data-expectedlabel="polygon link label" xlink:title="polygon link label" data-testname="[xlink:title][xlink:href] > polygon" class="ex"><polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black"></polygon></a> 56 </svg><br> 57 <svg viewbox="0 0 200 90"> 58 <a xlink:href="#" data-expectedlabel="group link label" xlink:title="group link label" data-testname="[xlink:title][xlink:href] > g" class="ex"> 59 <g fill="white" stroke="green" stroke-width="5"> 60 <circle cx="40" cy="40" r="25" /> 61 <circle cx="60" cy="60" r="25" /> 62 </g> 63 </a> 64 </svg> 65 <br> 66 67 <script> 68 AriaUtils.verifyLabelsBySelector(".ex"); 69 </script> 70 </body> 71 </html>