Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /accname/name/comp_name_from_content.tentative.html - WPT Dashboard Interop Dashboard
<!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>
<!-- “びょういんのかんじゃサービス” 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>
<!-- Tests `Name from Each Child` edge case failures with an embedded `term` as a child element role. -->
<h2>Elements with implicit button, heading, link roles containing element with implicit term role</h2>
<button data-expectedlabel="this is an example" data-testname="implicit button name from content containing a dfn element" class="ex iblock"><span>this is an </span><dfn>example</dfn></button>
<h3 data-expectedlabel="this is an example" data-testname="implicit heading name from content containing a dfn element" class="ex iblock"><span>this is an </span><dfn>example</dfn></h3>
<a href="#" data-expectedlabel="this is an example" data-testname="implicit link name from content containing a dfn element" class="ex iblock"><span>this is an </span><dfn>example</dfn></a>
<h2>Elements with implicit button, heading, link roles containing element with explicit term role</h2>
<button data-expectedlabel="this is an example" data-testname="implicit button name from content containing an element with explicit term role" class="ex iblock"><span>this is an </span><span role="term">example</span></button>
<h3 data-expectedlabel="this is an example" data-testname="implicit heading name from content containing an element with explicit term role" class="ex iblock"><span>this is an </span><span role="term">example</span></h3>
<a href="#" data-expectedlabel="this is an example" data-testname="implicit link name from content containing an element explicit with term role" class="ex iblock"><span>this is an </span><span role="term">example</span></a>
<h2>Elements with explicit button, heading, link roles containing element with implicit term role</h2>
<div role="button" tabindex="0" data-expectedlabel="this is an example" data-testname="explicit button name from content containing a dfn element" class="ex iblock"><span>this is an </span><dfn>example</dfn></div>
<div role="heading" data-expectedlabel="this is an example" data-testname="explicit heading name from content containing a dfn element" class="ex iblock"><span>this is an </span><dfn>example</dfn></div>
<div role="link" tabindex="0" data-expectedlabel="this is an example" data-testname="explicit link name from content containing a dfn element" class="ex iblock"><span>this is an </span><dfn>example</dfn></div>
<h2>Elements with explicit button, heading, link roles containing element with explicit term role</h2>
<div role="button" tabindex="0" data-expectedlabel="this is an example" data-testname="explicit button name from content containing an element explicit with term role" class="ex iblock"><span>this is an </span><span role="term">example</span></div>
<div role="heading" data-expectedlabel="this is an example" data-testname="explicit heading name from content containing an element explicit with term role" class="ex iblock"><span>this is an </span><span role="term">example</span></div>
<div role="link" tabindex="0" data-expectedlabel="this is an example" data-testname="explicit link name from content containing an element explicit with term role" class="ex iblock"><span>this is an </span><span role="term">example</span></div>
<script>
AriaUtils.verifyLabelsBySelector(".ex");
</script>
</body>
</html>