195 lines
5.5 KiB
HTML
195 lines
5.5 KiB
HTML
<!DOCTYPE HTML>
|
|
<!-- This test makes hundreds of sequential testdriver calls,
|
|
which can take a long time in non-optimized builds. -->
|
|
<meta name="timeout" content="long">
|
|
<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>
|
|
|
|
<body>
|
|
<table-element id="table-row-columnheader-test">
|
|
<row-element>
|
|
<columnheader-element></columnheader-element>
|
|
</row-element>
|
|
</table-element>
|
|
<grid-element id="grid-row-gridcell-test">
|
|
<row-element>
|
|
<gridcell-element></gridcell-element>
|
|
</row-element>
|
|
</grid-element>
|
|
<list-element id="list-listitem-test">
|
|
<listitem-element></listitem-element>
|
|
</list-element>
|
|
<menu-element id="menu-menuitem-test">
|
|
<menuitem-element></menuitem-element>
|
|
</menu-element>
|
|
<menu-element id="menu-menuitemcheckbox-test">
|
|
<menuitemcheckbox-element></menuitemcheckbox-element>
|
|
</menu-element>
|
|
<menu-element id="menu-menuitemradio-test">
|
|
<menuitemradio-element></menuitemradio-element>
|
|
</menu-element>
|
|
<listbox-element id="listbox-option-test">
|
|
<option-element></option-element>
|
|
</listbox-element>
|
|
<table-element id="table-row-test">
|
|
<row-element></row-element>
|
|
</table-element>
|
|
<table-element id="table-rowgroup-test">
|
|
<rowgroup-element></rowgroup-element>
|
|
</table-element>
|
|
<table-element id="table-row-rowheader-test">
|
|
<row-element>
|
|
<rowheader-element></rowheader-element>
|
|
</row-element>
|
|
</table-element>
|
|
<tablist-element id="tablist-tab-test">
|
|
<tab-element></tab-element>
|
|
</tablist-element>
|
|
<tree-element id="tree-treeitem-test">
|
|
<treeitem-element></treeitem-element>
|
|
</tree-element>
|
|
</body>
|
|
|
|
<script>
|
|
function conditionally_register_element(role) {
|
|
if (!customElements.get(`${role}-element`)) {
|
|
customElements.define(`${role}-element`, class extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.internals_ = this.attachInternals();
|
|
this.internals_.role = role;
|
|
this.internals_.ariaLabel = `Test ${role} label`;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function generate_role_element(role) {
|
|
conditionally_register_element(role);
|
|
const el = document.createElement(`${role}-element`);
|
|
document.body.append(el);
|
|
return el;
|
|
}
|
|
|
|
function generate_child_role_element(role, parentElement) {
|
|
conditionally_register_element(role);
|
|
const el = document.createElement(`${role}-element`);
|
|
parentElement.append(el);
|
|
return el;
|
|
}
|
|
|
|
const test_roles = [
|
|
'alert',
|
|
'alertdialog',
|
|
'application',
|
|
'article',
|
|
'banner',
|
|
'button',
|
|
'cell',
|
|
'checkbox',
|
|
'combobox',
|
|
'complementary',
|
|
'contentinfo',
|
|
'definition',
|
|
'dialog',
|
|
['directory', 'list'], // is this expected?
|
|
'document',
|
|
'figure',
|
|
'form',
|
|
'grid',
|
|
'group',
|
|
'heading',
|
|
['img', 'image'],
|
|
'feed',
|
|
'link',
|
|
'list',
|
|
'listbox',
|
|
'log',
|
|
'main',
|
|
'marquee',
|
|
'math',
|
|
'menu',
|
|
'menubar',
|
|
'meter',
|
|
'navigation',
|
|
'note',
|
|
'progressbar',
|
|
'radio',
|
|
'radiogroup',
|
|
'region',
|
|
'scrollbar',
|
|
'search',
|
|
'searchbox',
|
|
'separator',
|
|
'slider',
|
|
'spinbutton',
|
|
'status',
|
|
'switch',
|
|
'table',
|
|
'tablist',
|
|
'tabpanel',
|
|
'term',
|
|
'textbox',
|
|
'timer',
|
|
'toolbar',
|
|
'tooltip',
|
|
'tree',
|
|
'treegrid'
|
|
];
|
|
|
|
test_roles.map((testdata) => {
|
|
let role;
|
|
let roleName;
|
|
if (Array.isArray(testdata)) {
|
|
role = testdata[0];
|
|
roleName = testdata[1];
|
|
} else {
|
|
role = testdata;
|
|
roleName = testdata;
|
|
}
|
|
promise_test(async () => {
|
|
const el = generate_role_element(role);
|
|
const computed_role = await test_driver.get_computed_role(el);
|
|
const computed_label = await test_driver.get_computed_label(el);
|
|
assert_equals(computed_role, roleName, el);
|
|
assert_equals(computed_label, `Test ${role} label`, el);
|
|
el.remove();
|
|
}, `Applies "${role}" via Element Internals`);
|
|
});
|
|
|
|
const child_test_roles = [
|
|
['table', 'row', 'columnheader'],
|
|
['grid', 'row', 'gridcell'],
|
|
['list', 'listitem'],
|
|
['menu', 'menuitem'],
|
|
['menu', 'menuitemcheckbox'],
|
|
['menu', 'menuitemradio'],
|
|
['listbox', 'option'],
|
|
['table', 'row'],
|
|
['table', 'rowgroup'],
|
|
['table', 'row', 'rowheader'],
|
|
['tablist', 'tab'],
|
|
['tree', 'treeitem'],
|
|
];
|
|
|
|
child_test_roles.map((roles) => {
|
|
promise_test(async () => {
|
|
// Ensure role applied elements are registered.
|
|
roles.forEach((role) => {
|
|
conditionally_register_element(role);
|
|
});
|
|
// Gather test DOM and walk children to ensure parent/child relationships are correct.
|
|
let testEl = document.getElementById([...roles, 'test'].join('-'));
|
|
for (let i = 0; i < roles.length; i++) {
|
|
const role = roles[i];
|
|
const computed_role = await test_driver.get_computed_role(testEl);
|
|
const computed_label = await test_driver.get_computed_label(testEl);
|
|
assert_equals(computed_role, role, testEl);
|
|
assert_equals(computed_label, `Test ${role} label`, testEl);
|
|
testEl = testEl.children[0];
|
|
}
|
|
}, `Applies parent/child relationship of "${roles.join('"/"')}" via Element Internals`);
|
|
});
|
|
</script>
|