Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 10 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /accname/name/comp_name_from_content.html - WPT Dashboard Interop Dashboard
<!doctype html>
<html>
<head>
<title>Name Comp: Name From Content</title>
<meta charset="utf-8">
<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>
<style type="text/css">
/*
Since the AccName spec is in flux about whitespace joiners, and the implementations don't match,
normalize the whitespace (with extra leading/trailing) space.
No point in having the same in-flux spec change cause failures the remaining unrelated tests.
See more here:
*/
.simple-before::before {
content: " before "; /* [sic] leading and trailing space */
margin:0 0.1em;
}
.simple-after::after {
content: " after "; /* [sic] leading and trailing space */
margin:0 0.1em;
}
.no-space::before, .no-space::after {
content: "nospace"; /* [sic] Unlike the others, NO extra leading/trailing space here. */
}
.simple-before:dir(rtl)::before {
content: " من قبل "; /* [sic] leading and trailing space */
}
.simple-after:dir(rtl)::after {
content: " بعد "; /* [sic] leading and trailing space */
}
.fallback-before::before {
content: " before "; /* [sic] leading and trailing space */
content: " before " / " alt-before "; /* Override the previous line for engines that support the Alternative Text syntax. */
}
.fallback-after::after {
content: " after "; /* [sic] leading and trailing space */
content: " after " / " alt-after "; /* Override the previous line for engines that support the Alternative Text syntax. */
}
.fallback-before-empty::before {
content: "before" / "";
}
.fallback-before-image-empty::before {
content: "before " url(/images/blue.png) / "";
}
.fallback-before-mixed::before {
content: " before "; /* [sic] leading and trailing space */
content: " before " / " start " attr(data-alt-text-before) " end "; /* Override the previous line for engines that support the Alternative Text syntax. */
}
.fallback-after-mixed::after {
content: " after "; /* [sic] leading and trailing space */
content: " after " / " start " attr(data-alt-text-after) " end "; /* Override the previous line for engines that support the Alternative Text syntax. */
}
.block > span {
display: block;
margin: 0 0.1em;
}
.iblock > span {
display: inline-block;
margin: 0 0.1em;
}
</style>
</head>
<body>
<p>Tests the <a href="https://w3c.github.io/accname/#comp_name_from_content">#comp_name_from_content</a> portions of the AccName <em>Name Computation</em> algorithm.</p>
<p>This series of tests exercises the button, heading, and link elements, because each have different characteristics worthy of testing in each of the name computation algorithm scenarios:</p>
<ul>
<li>button is a leaf node with sub-level elements presentational.</li>
<li>heading is block level, and can contain sub-level interactives like links.</li>
<li>link (a[href]) is an interactive inline element that can include non-presentational descendants.</li>
</ul>
<h1>ARIA roles, inline</h1>
<span tabindex="0" role="button" data-expectedlabel="label" data-testname="aria button name from content, inline" class="ex">label</span><br>
<span tabindex="0" role="heading" data-expectedlabel="label" data-testname="aria heading name from content, inline" class="ex">label</span><br>
<span tabindex="0" role="link" data-expectedlabel="label" data-testname="aria link name from content, inline" class="ex">label</span><br>
<br>
<h1>ARIA roles, block</h1>
<div tabindex="0" role="button" data-expectedlabel="label" data-testname="aria button name from content, block" class="ex">label</div>
<div tabindex="0" role="heading" data-expectedlabel="label" data-testname="aria heading name from content, block" class="ex">label</div>
<div tabindex="0" role="link" data-expectedlabel="label" data-testname="aria link name from content, block" class="ex">label</div>
<br>
<h1>simple</h1>
<button data-expectedlabel="label" data-testname="button name from content" class="ex">label</button><br>
<h3 data-expectedlabel="label" data-testname="heading name from content" class="ex">label</h3>
<a href="#" data-expectedlabel="label" data-testname="link name from content" class="ex">label</a><br>
<br>
<h1>simple with ::before</h1>
<button data-expectedlabel="before label" data-testname="button name from content with ::before" class="ex simple-before">label</button><br>
<h3 data-expectedlabel="before label" data-testname="heading name from content with ::before" class="ex simple-before">label</h3>
<a href="#" data-expectedlabel="before label" data-testname="link name from content with ::before" class="ex simple-before">label</a><br>
<br>
<h1>simple with ::after</h1>
<button data-expectedlabel="label after" data-testname="button name from content with ::after" class="ex simple-after">label</button><br>
<h3 data-expectedlabel="label after" data-testname="heading name from content with ::after" class="ex simple-after">label</h3>
<a href="#" data-expectedlabel="label after" data-testname="link name from content with ::after" class="ex simple-after">label</a><br>
<br>
<h1>simple with ::before and ::after</h1>
<button data-expectedlabel="before label after" data-testname="button name from content with ::before and ::after" class="ex simple-before simple-after">label</button><br>
<h3 data-expectedlabel="before label after" data-testname="heading name from content with ::before and ::after" class="ex simple-before simple-after">label</h3>
<a href="#" data-expectedlabel="before label after" data-testname="link name from content with ::before and ::after" class="ex simple-before simple-after">label</a><br>
<br>
<h1>no space joiners ::before and ::after</h1>
<button data-expectedlabel="nospacelabelnospace" data-testname="button name from content no space joiners ::before and ::after" class="ex no-space">label</button><br>
<h3 data-expectedlabel="nospacelabelnospace" data-testname="heading name from content no space joiners ::before and ::after" class="ex no-space">label</h3>
<a href="#" data-expectedlabel="nospacelabelnospace" data-testname="link name from content no space joiners ::before and ::after" class="ex no-space">label</a><br>
<br>
<h1>Arabic right-to-left (RTL) with ::before and ::after</h1>
<div dir="rtl" lang="ar">
<button data-expectedlabel="من قبل اسم بعد" data-testname="button name from content with ::before and ::after in rtl" class="ex simple-before simple-after">اسم</button><br>
<h3 data-expectedlabel="من قبل اسم بعد" data-testname="heading name from content with ::before and ::after in rtl" class="ex simple-before simple-after">اسم</h3>
<a href="#" data-expectedlabel="من قبل اسم بعد" data-testname="link name from content with ::before and ::after in rtl" class="ex simple-before simple-after">اسم</a><br>
</div>
<br>
<h1><a href="https://drafts.csswg.org/css-content/#alt">Alternative Text for CSS content (previously `alt:`)</a> in pseudo-elements</h1>
<p>rendered text should be "before label after"</p>
<p>accessibility label should be "alt-before label alt-after"</p>
<button data-expectedlabel="alt-before label alt-after" data-testname="button name from fallback content with ::before and ::after" class="ex fallback-before fallback-after">label</button><br>
<h3 data-expectedlabel="alt-before label alt-after" data-testname="heading name from fallback content with ::before and ::after" class="ex fallback-before fallback-after">label</h3>
<a href="#" data-expectedlabel="alt-before label alt-after" data-testname="link name from fallback content with ::before and ::after" class="ex fallback-before fallback-after">label</a><br>
<br>
<h1><a href="https://drafts.csswg.org/css-content/#alt">Mixed Alternative Text (attr() and strings) for CSS content (previously `alt:`)</a> in pseudo-elements</h1>
<p>rendered text should be "before label after"</p>
<p>accessibility label should be "start alt-before end label start alt-after end"</p>
<button data-alt-text-before="alt-before" data-alt-text-after="alt-after" data-expectedlabel="start alt-before end label start alt-after end" data-testname="button name from fallback content mixing attr() and strings with ::before and ::after" class="ex fallback-before-mixed fallback-after-mixed">label</button><br>
<h3 data-alt-text-before="alt-before" data-alt-text-after="alt-after" data-expectedlabel="start alt-before end label start alt-after end" data-testname="heading name from fallback content mixing attr() and strings with ::before and ::after" class="ex fallback-before-mixed fallback-after-mixed">label</h3>
<a href="#" data-alt-text-before="alt-before" data-alt-text-after="alt-after" data-expectedlabel="start alt-before end label start alt-after end" data-testname="link name from fallback content mixing attr() and strings with ::before and ::after" class="ex fallback-before-mixed fallback-after-mixed">label</a><br>
<br>
<h1>Empty alternative text for CSS content in pseudo-elements when applied to primitive appearance form controls</h1>
<p><input data-expectedlabel="" data-testname="primitive radio input with ::before containing empty alternative text" class="ex fallback-before-empty" type=radio style=appearance:none>
<p><input data-expectedlabel="" data-testname="primitive radio input with ::before containing empty alternative text for an image" class="ex fallback-before-image-empty" type=radio style=appearance:none>
<h1>simple w/ for each child</h1>
<button data-expectedlabel="one two three" data-testname="button name from content for each child" class="ex"><span>one</span> <span>two</span> <span>three</span></button><br>
<h3 data-expectedlabel="one two three" data-testname="heading name from content for each child" class="ex"><span>one</span> <span>two</span> <span>three</span></h3>
<a href="#" data-expectedlabel="one two three" data-testname="link name from content for each child" class="ex"><span>one</span> <span>two</span> <span>three</span></a><br>
<br>
<h1>simple for each child with image</h1>
<button data-expectedlabel="one two three" data-testname="button name from content for each child including image" class="ex"><span>one</span> <img alt="two" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> <span>three</span></button><br>
<h3 data-expectedlabel="one two three" data-testname="heading name from content for each child including image" class="ex"><span>one</span> <img alt="two" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> <span>three</span></h3>
<a href="#" data-expectedlabel="one two three" data-testname="link name from content for each child including image" class="ex"><span>one</span> <img alt="two" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="> <span>three</span></a><br>
<br>
<h1>simple for each child with extra nesting containing image</h1>
<button data-expectedlabel="one two three four" data-testname="button name from content for each child including nested image" class="ex"><span>one</span> <span>two <img alt="three" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></span> <span>four</span></button><br>
<h3 data-expectedlabel="one two three four" data-testname="heading name from content for each child including nested image" class="ex"><span>one</span> <span>two <img alt="three" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></span> <span>four</span></h3>
<a href="#" data-expectedlabel="one two three four" data-testname="link name from content for each child including nested image" class="ex"><span>one</span> <span>two <img alt="three" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></span> <span>four</span></a><br>
<br>
<h1>heading with nested button with nested image</h1>
<h3 data-expectedlabel="heading button image button heading" data-testname="heading name from content for each child including nested button with nested image" class="ex">
heading
<button>
button
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
button
</button>
heading
</h3>
<h1>heading with nested link with nested image</h1>
<h3 data-expectedlabel="heading link image link heading" data-testname="heading name from content for each child including nested link with nested image" class="ex">
heading
<a href="#">
link
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
link
</a>
heading
</h3>
<h1>heading with nested link with nested image using aria-label</h1>
<h3 data-expectedlabel="heading link aria-label heading" data-testname="heading name from content for each child including nested link using aria-label with nested image" class="ex">
heading
<a href="#" aria-label="link aria-label"><!-- should skip the other link text -->
ignored link text
<img id="nested_image_label_1" alt="ignored image alt" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
ignored link text
</a>
heading
</h3>
<h1>heading with nested link with nested image using aria-labelledby</h1>
<h3 data-expectedlabel="heading image heading" data-testname="heading name from content for each child including nested link using aria-labelledby with nested image" class="ex">
heading
<a href="#" aria-labelledby="nested_image_label1"><!-- should skip the other link text -->
ignored link text
<img id="nested_image_label1" alt="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
ignored link text
</a>
heading
</h3>
<h1>heading with two nested links referencing image using aria-labelledby</h1>
<h3 data-expectedlabel="image link2 link3" data-testname="heading name from content for each child including two nested links using aria-labelledby with nested image" class="ex">
<a href="#" aria-labelledby="nested_image_label2">
link1<!-- this text is skipped because of aria-labelledby -->
</a>
<a href="#" data-expectedlabel="link2 image link3" data-testname="link name from content for each child including nested image (referenced elsewhere via labelledby)" class="ex">
link2
<img id="nested_image_label2" alt="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
<!-- image skipped in this link (when computing heading text) because it was already referenced by the first link within this heading label recursion cycle. -->
<!-- but image not skipped when computing the text of the link itself since it has not been referenced in that context -->
link3
</a>
</h3>
<!-- cross-referencial edge case-->
<h1>heading with link referencing image using aria-labelledby, that in turn references text element via aria-labelledby</h1>
<h3 data-expectedlabel="image link" data-testname="heading with link referencing image using aria-labelledby, that in turn references text element via aria-labelledby" class="ex">
<a href="#" aria-labelledby="nested_image_label3">
<span class="note" id="crossref_link">link</span><!-- this text is skipped the first time around because of aria-labelledby on parent element -->
</a>
<!-- but it's picked up again in inverse order b/c of cross-referencial aria-labelledby edge case -->
<img id="nested_image_label3" alt="image" aria-labelledby="crossref_link" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
</h3>
<!-- self-referencial edge case-->
<h1>heading with link referencing image using aria-labelledby, that in turn references itself and another element via aria-labelledby</h1>
<h3 data-expectedlabel="image link" data-testname="heading with link referencing image using aria-labelledby, that in turn references itself and another element via aria-labelledby" class="ex">
<a href="#" aria-labelledby="nested_image_label4">
<span class="note" id="crossref_link2">link</span><!-- this text is skipped the first time around because of aria-labelledby on parent element -->
</a>
<!-- but it's picked up again (after the self-referencial image alt) in inverse order b/c of cross-referencial aria-labelledby edge case -->
<img id="nested_image_label4" alt="image" aria-labelledby="nested_image_label4 crossref_link2" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
</h3>
<!-- Note: The following test is out of line with the spec, but matching two out of three implementations at the time of writing, and spec changes are expeected. -->
<!-- Final spec resolution will be addressed in AccName Whitespace Project: https://github.com/w3c/accname/projects/1#card-42288231 -->
<h1>simple w/ for each child (w/o spaces and display:inline)</h1>
<button data-expectedlabel="onetwothree" data-testname="button name from content for each child (no space, inline)" class="ex"><span>one</span><span>two</span><span>three</span></button><br>
<h3 data-expectedlabel="onetwothree" data-testname="heading name from content for each child (no space, inline)" class="ex"><span>one</span><span>two</span><span>three</span></h3>
<a href="#" data-expectedlabel="onetwothree" data-testname="link name from content for each child (no space, inline)" class="ex"><span>one</span><span>two</span><span>three</span></a><br>
<br>
<h1>simple w/ for each child (w/o spaces and display:block)</h1>
<button data-expectedlabel="one two three" data-testname="button name from content for each child (no space, display:block)" class="ex block"><span>one</span><span>two</span><span>three</span></button><br>
<h3 data-expectedlabel="one two three" data-testname="heading name from content for each child (no space, display:block)" class="ex block"><span>one</span><span>two</span><span>three</span></h3>
<a href="#" data-expectedlabel="one two three" data-testname="link name from content for each child (no space, display:block)" class="ex block"><span>one</span><span>two</span><span>three</span></a><br>
<br>
<h1>simple w/ for each child (w/o spaces and display:inline block)</h1>
<button data-expectedlabel="one two three" data-testname="button name from content for each child (no space, display:inline-block)" class="ex iblock"><span>one</span><span>two</span><span>three</span></button><br>
<h3 data-expectedlabel="one two three" data-testname="heading name from content for each child (no space, display:inline-block)" class="ex iblock"><span>one</span><span>two</span><span>three</span></h3>
<a href="#" data-expectedlabel="one two three" data-testname="link name from content for each child (no space, display:inline-block)" class="ex iblock"><span>one</span><span>two</span><span>three</span></a><br>
<br>
<script>
AriaUtils.verifyLabelsBySelector(".ex");
</script>
</body>
</html>