<!doctype html>
<html lang="en">
<head>
<title>Name Comp: Name From Content (Tentative)</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>
</head>
<body>
<!--
These aria-labelledby tests may not be valid, pending spec discussion.
See https://github.com/w3c/accname/issues/209
-->
<!-- 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>
<!-- “びょういんのかんじゃサービス” means “Hospital patient services” -->
<!-- text-transform:full-size-kana visually changes: -->
<!-- 1. びょういん (byōin = hospital) into びよういん (biyōin = beauty parlor) -->
<!-- 2. かんじゃ (kanja = patient) into かんじや (kanjiya = [no meaning]) -->
<!-- ...causing the whole heading to become nonsensical. -->
<h1>heading which visually transforms <span lang="ja">びょういん</span> (hospital) to <span lang="ja">びよういん</span> (beauty parlor) using CSS <code>text-transform:full-size-kana</code></h1>
<h3 lang="ja" data-expectedlabel="びょういんのかんじゃサービス" data-testname="heading name from content with text-transform:full-size-kana" class="ex" style="text-transform:full-size-kana;">びょういんのかんじゃサービス</h3>
<script>
AriaUtils.verifyLabelsBySelector(".ex");
</script>
</body>
</html>
Codebase Browser
chromium