ElementInternals-role.html (5590B)
1 <!DOCTYPE HTML> 2 <!-- This test makes hundreds of sequential testdriver calls, 3 which can take a long time in non-optimized builds. --> 4 <meta name="timeout" content="long"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 10 <body> 11 <table-element id="table-row-columnheader-test"> 12 <row-element> 13 <columnheader-element></columnheader-element> 14 </row-element> 15 </table-element> 16 <grid-element id="grid-row-gridcell-test"> 17 <row-element> 18 <gridcell-element></gridcell-element> 19 </row-element> 20 </grid-element> 21 <list-element id="list-listitem-test"> 22 <listitem-element></listitem-element> 23 </list-element> 24 <menu-element id="menu-menuitem-test"> 25 <menuitem-element></menuitem-element> 26 </menu-element> 27 <menu-element id="menu-menuitemcheckbox-test"> 28 <menuitemcheckbox-element></menuitemcheckbox-element> 29 </menu-element> 30 <menu-element id="menu-menuitemradio-test"> 31 <menuitemradio-element></menuitemradio-element> 32 </menu-element> 33 <listbox-element id="listbox-option-test"> 34 <option-element></option-element> 35 </listbox-element> 36 <table-element id="table-row-test"> 37 <row-element></row-element> 38 </table-element> 39 <table-element id="table-rowgroup-test"> 40 <rowgroup-element></rowgroup-element> 41 </table-element> 42 <table-element id="table-row-rowheader-test"> 43 <row-element> 44 <rowheader-element></rowheader-element> 45 </row-element> 46 </table-element> 47 <tablist-element id="tablist-tab-test"> 48 <tab-element></tab-element> 49 </tablist-element> 50 <tree-element id="tree-treeitem-test"> 51 <treeitem-element></treeitem-element> 52 </tree-element> 53 </body> 54 55 <script> 56 function conditionally_register_element(role) { 57 if (!customElements.get(`${role}-element`)) { 58 customElements.define(`${role}-element`, class extends HTMLElement { 59 constructor() { 60 super(); 61 this.internals_ = this.attachInternals(); 62 this.internals_.role = role; 63 this.internals_.ariaLabel = `Test ${role} label`; 64 } 65 }); 66 } 67 } 68 69 function generate_role_element(role) { 70 conditionally_register_element(role); 71 const el = document.createElement(`${role}-element`); 72 document.body.append(el); 73 return el; 74 } 75 76 function generate_child_role_element(role, parentElement) { 77 conditionally_register_element(role); 78 const el = document.createElement(`${role}-element`); 79 parentElement.append(el); 80 return el; 81 } 82 83 const test_roles = [ 84 'alert', 85 'alertdialog', 86 'application', 87 'article', 88 'banner', 89 'button', 90 'cell', 91 'checkbox', 92 'combobox', 93 'complementary', 94 'contentinfo', 95 'definition', 96 'dialog', 97 ['directory', 'list'], // is this expected? 98 'document', 99 'figure', 100 'form', 101 'grid', 102 'group', 103 'heading', 104 ['img', 'image'], 105 'feed', 106 'link', 107 'list', 108 'listbox', 109 'log', 110 'main', 111 'marquee', 112 'math', 113 'menu', 114 'menubar', 115 'meter', 116 'navigation', 117 'note', 118 'progressbar', 119 'radio', 120 'radiogroup', 121 'region', 122 'scrollbar', 123 'search', 124 'searchbox', 125 'separator', 126 'slider', 127 'spinbutton', 128 'status', 129 'switch', 130 'table', 131 'tablist', 132 'tabpanel', 133 'term', 134 'textbox', 135 'timer', 136 'toolbar', 137 'tooltip', 138 'tree', 139 'treegrid' 140 ]; 141 142 test_roles.map((testdata) => { 143 let role; 144 let roleName; 145 if (Array.isArray(testdata)) { 146 role = testdata[0]; 147 roleName = testdata[1]; 148 } else { 149 role = testdata; 150 roleName = testdata; 151 } 152 promise_test(async () => { 153 const el = generate_role_element(role); 154 const computed_role = await test_driver.get_computed_role(el); 155 const computed_label = await test_driver.get_computed_label(el); 156 assert_equals(computed_role, roleName, el); 157 assert_equals(computed_label, `Test ${role} label`, el); 158 el.remove(); 159 }, `Applies "${role}" via Element Internals`); 160 }); 161 162 const child_test_roles = [ 163 ['table', 'row', 'columnheader'], 164 ['grid', 'row', 'gridcell'], 165 ['list', 'listitem'], 166 ['menu', 'menuitem'], 167 ['menu', 'menuitemcheckbox'], 168 ['menu', 'menuitemradio'], 169 ['listbox', 'option'], 170 ['table', 'row'], 171 ['table', 'rowgroup'], 172 ['table', 'row', 'rowheader'], 173 ['tablist', 'tab'], 174 ['tree', 'treeitem'], 175 ]; 176 177 child_test_roles.map((roles) => { 178 promise_test(async () => { 179 // Ensure role applied elements are registered. 180 roles.forEach((role) => { 181 conditionally_register_element(role); 182 }); 183 // Gather test DOM and walk children to ensure parent/child relationships are correct. 184 let testEl = document.getElementById([...roles, 'test'].join('-')); 185 for (let i = 0; i < roles.length; i++) { 186 const role = roles[i]; 187 const computed_role = await test_driver.get_computed_role(testEl); 188 const computed_label = await test_driver.get_computed_label(testEl); 189 assert_equals(computed_role, role, testEl); 190 assert_equals(computed_label, `Test ${role} label`, testEl); 191 testEl = testEl.children[0]; 192 } 193 }, `Applies parent/child relationship of "${roles.join('"/"')}" via Element Internals`); 194 }); 195 </script>