diff options
Diffstat (limited to 'testing/web-platform/tests/svg-aam')
4 files changed, 228 insertions, 0 deletions
diff --git a/testing/web-platform/tests/svg-aam/META.yml b/testing/web-platform/tests/svg-aam/META.yml new file mode 100644 index 0000000000..b0a59c1803 --- /dev/null +++ b/testing/web-platform/tests/svg-aam/META.yml @@ -0,0 +1,3 @@ +spec: https://w3c.github.io/svg-aam/ +suggested_reviewers: + - cookiecrook diff --git a/testing/web-platform/tests/svg-aam/name/comp_host_language_label.html b/testing/web-platform/tests/svg-aam/name/comp_host_language_label.html new file mode 100644 index 0000000000..81f9dab2e6 --- /dev/null +++ b/testing/web-platform/tests/svg-aam/name/comp_host_language_label.html @@ -0,0 +1,71 @@ +<!doctype html> +<html> +<head> + <title>Name Comp: Host Language Label</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> + <script src="/wai-aria/scripts/aria-utils.js"></script> +</head> +<body> + +<h1>SVG-AAM: Label Tests</h1> + +<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>. + + +<h2>SVG * > title</h2> +<svg viewbox="0 0 300 100"> + <circle cx="26" cy="26" r="25" data-expectedlabel="circle label" data-testname="circle > title" class="ex"><title>circle label</title></circle> + <rect x="60" y="1" width="50" height="50" data-expectedlabel="rect label" data-testname="rect > title" class="ex"><title>rect label</title></rect> + <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> +</svg><br> +<svg viewbox="0 0 200 90"> + <g fill="white" stroke="green" stroke-width="5" data-expectedlabel="group label" data-testname="g > title" class="ex"> + <title>group label</title> + <circle cx="40" cy="40" r="25" /> + <circle cx="60" cy="60" r="25" /> + </g> +</svg> +<br> + + +<h2>SVG a[xlink:title][href]</h2> +<svg viewbox="0 0 300 100"> + <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> + <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> + <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> +</svg><br> +<svg viewbox="0 0 200 90"> + <a href="#" data-expectedlabel="group link label" xlink:title="group link label" data-testname="[xlink:title][href] > g" class="ex"> + <g fill="white" stroke="green" stroke-width="5"> + <circle cx="40" cy="40" r="25" /> + <circle cx="60" cy="60" r="25" /> + </g> + </a> +</svg> +<br> + +<h2>SVG a[xlink:title][xlink:href]:not([href])</h2> +<svg viewbox="0 0 300 100"> + <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> + <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> + <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> +</svg><br> +<svg viewbox="0 0 200 90"> + <a xlink:href="#" data-expectedlabel="group link label" xlink:title="group link label" data-testname="[xlink:title][xlink:href] > g" class="ex"> + <g fill="white" stroke="green" stroke-width="5"> + <circle cx="40" cy="40" r="25" /> + <circle cx="60" cy="60" r="25" /> + </g> + </a> +</svg> +<br> + +<script> +AriaUtils.verifyLabelsBySelector(".ex"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/svg-aam/role/roles-generic.html b/testing/web-platform/tests/svg-aam/role/roles-generic.html new file mode 100644 index 0000000000..e7fe9f33de --- /dev/null +++ b/testing/web-platform/tests/svg-aam/role/roles-generic.html @@ -0,0 +1,47 @@ +<!doctype html> +<html> +<head> + <title>SVG-AAM Generic Role Verification Tests</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> + <script src="/wai-aria/scripts/aria-utils.js"></script> +</head> +<body> + + +<p>Tests ONLY the default <code>generic</code> mappings defined in <a href="https://w3c.github.io/svg-aam/#include_elements">SVG-AAM: 5.1.2 Including Elements in the Accessibility Tree</a>.</p> + +<h2>Simple Elements</h2> +<!-- Note: adding an inoccuous label, tabindex, or some other accessible marker may cause the computedrole result to change. --> +<svg> + <!-- Some elements skipped: never-rendered elements can return unpredicable/undefined/unspecified values for computedrole. --> + <circle data-testname="el-circle" class="ex-generic"></circle> + <ellipse data-testname="el-ellipse" class="ex-generic"></ellipse> + <foreignObject data-testname="el-foreignObject" class="ex-generic"></foreignObject> + <g data-testname="el-g" class="ex-generic"></g> + + <!-- [sic] included here b/c the spec says unlabeled, unrendered images are generic, but the spec is wrong. --> + <!-- Once https://github.com/w3c/svg-aam/issues/32 is resolved, this test can be moved to another file. --> + <image data-testname="el-image" data-expectedrole="image" class="ex"></image> + + <line data-testname="el-line" class="ex-generic"></line> + <!-- skipped: mesh --> + <path data-testname="el-path" class="ex-generic"></path> + <polygon data-testname="el-polygon" class="ex-generic"></polygon> + <polyline data-testname="el-polyline" class="ex-generic"></polyline> + <rect data-testname="el-rect" class="ex-generic"></rect> + <!-- blocked: textPath -> https://w3c.github.io/svg-aam/#textpath-tspan-mappings-issue--> + <!-- blocked: tspan -> https://w3c.github.io/svg-aam/#textpath-tspan-mappings-issue --> + <!-- skipped: use --> +</svg> + +<script> +AriaUtils.verifyGenericRolesBySelector(".ex-generic"); +AriaUtils.verifyRolesBySelector(".ex"); +</script> + +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/svg-aam/role/roles.html b/testing/web-platform/tests/svg-aam/role/roles.html new file mode 100644 index 0000000000..cc104662bd --- /dev/null +++ b/testing/web-platform/tests/svg-aam/role/roles.html @@ -0,0 +1,107 @@ +<!doctype html> +<html> +<head> + <title>SVG-AAM Role Verification Tests</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/resources/testdriver-actions.js"></script> + <script src="/wai-aria/scripts/aria-utils.js"></script> +</head> +<body> + + +<p>Tests the mappings defined in <a href="https://w3c.github.io/svg-aam/#mapping_role_table">SVG-AAM: 6.2 Element Mapping</a>.<p> + +<h2>Simple Elements With aria-label to Ensure Tree Inclusion</h2> +<svg> + <!-- Some elements skipped: never-rendered elements can return unpredicable/undefined/unspecified values for computedrole. --> + <a href="#" data-testname="el-a[href]" data-expectedrole="link" aria-label="label" class="ex">x</a> + <a xlink:href="#" data-testname="el-a[xlink:href]" data-expectedrole="link" aria-label="label" class="ex">x</a> + <!-- skipped: animate --> + <!-- skipped: animateMotion --> + <!-- skipped: animateTransform --> + <!-- blocked: audio -> https://github.com/w3c/html-aam/issues/511 --> + <!-- todo: canvas -> follow HTML --> + <!-- blocked: circle -> https://github.com/w3c/svg-aam/issues/24 --> + <!-- n/a: clipPath --> + <!-- n/a: cursor --> + <!-- n/a: defs --> + <!-- n/a: desc --> + <!-- n/a: discard --> + <!-- blocked: ellipse -> https://github.com/w3c/svg-aam/issues/24 --> + <!-- n/a: feBlend --> + <!-- n/a: feColorMatrix --> + <!-- n/a: feComponentTransfer --> + <!-- n/a: feComposite --> + <!-- n/a: feConvolveMatrix --> + <!-- n/a: feDiffuseLighting --> + <!-- n/a: feDisplacementMap --> + <!-- n/a: feDistantLight --> + <!-- n/a: feDropShadow --> + <!-- n/a: feFlood --> + <!-- n/a: feFuncA --> + <!-- n/a: feFuncB --> + <!-- n/a: feFuncG --> + <!-- n/a: feFuncR --> + <!-- n/a: feGaussianBlur --> + <!-- n/a: feImage --> + <!-- n/a: feMerge --> + <!-- n/a: feMergeNode --> + <!-- n/a: feMorphology --> + <!-- n/a: feOffset --> + <!-- n/a: fePointLight --> + <!-- n/a: feSpecularLighting --> + <!-- n/a: feSpotLight --> + <!-- n/a: feTile --> + <!-- n/a: feTurbulence --> + <!-- n/a: filter --> + <!-- todo: foreignObject (spec says `group` role if rendered and labeled) --> + <g fill="white" stroke="green" stroke-width="2" data-testname="el-g" data-expectedrole="group" aria-label="label" class="ex"> + <circle cx="40" cy="40" r="25" /> + </g> + <!-- n/a: hatch --> + <!-- n/a: hatchPath --> + <!-- todo: iframe -> follow HTML --> + <image data-testname="el-image" data-expectedrole="image" aria-label="label" class="ex" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></image> + <!-- blocked: line -> https://github.com/w3c/svg-aam/issues/24 --> + <!-- n/a: linearGradient --> + <!-- n/a: marker --> + <!-- n/a: mask --> + <!-- todo: mesh (spec says `image` role if rendered and labeled) --> + <!-- n/a: meshPatch --> + <!-- n/a: meshRow --> + <!-- n/a: metadata --> + <!-- n/a: mpath --> + <!-- blocked: path -> https://github.com/w3c/svg-aam/issues/24 --> + <!-- n/a: pattern --> + <!-- blocked: polygon -> https://github.com/w3c/svg-aam/issues/24 --> + <!-- blocked: polyline -> https://github.com/w3c/svg-aam/issues/24 --> + <!-- n/a: radialGradient --> + <!-- blocked: rect -> https://github.com/w3c/svg-aam/issues/24 --> + <!-- n/a: script --> + <!-- n/a: set --> + <!-- n/a: solidColor --> + <!-- todo: source -> follow HTML --> + <!-- n/a: stop --> + <!-- n/a: style --> + <!-- blocked: svg -> https://github.com/w3c/svg-aam/issues/18 --> + <!-- n/a: switch --> + <!-- blocked: symbol -> https://github.com/w3c/svg-aam/issues/24 --> + <!-- blocked: text -> https://github.com/w3c/svg-aam/issues/33 --> + <!-- blocked: textPath -> https://w3c.github.io/svg-aam/#textpath-tspan-mappings-issue--> + <!-- n/a: title --> + <!-- todo: track -> follow HTML --> + <!-- blocked: tspan -> https://w3c.github.io/svg-aam/#textpath-tspan-mappings-issue --> + <!-- blocked: use -> https://github.com/w3c/svg-aam/issues/24 --> + <!-- todo: video -> follow HTML --> + <!-- n/a: view --> +</svg> + +<script> +AriaUtils.verifyRolesBySelector(".ex"); +</script> + +</body> +</html>
\ No newline at end of file |