| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../resources/accessibility-helper.js"></script> |
| <script src="../resources/js-test.js"></script> |
| </head> |
| <body> |
| |
| <div id="content"> |
| <div>Implicit defaults</div> |
| <input type="range" id="slider"> |
| <input id="combo" type="text" role="combobox" placeholder="Placeholder" value="text"> |
| <div id="listbox" role="listbox"> |
| <div id="option1" role="option" aria-selected="true">Option</div> |
| </div> |
| <div id="menu" role="menu"> |
| <div role="menuitem" id="item1" tabindex="0">Menu item 1</div> |
| </div> |
| <div id="menubar" role="menubar">menubar</div> |
| <div role="radiogroup" id="radiogroup"> |
| <div role="radio" aria-label="radio 1" aria-checked="false">radio 1</div> |
| </div> |
| <div role="separator" id="separator"></div> |
| <div role="tablist" id="tablist"> |
| <div role="toolbar" id="toolbar" aria-label="test toolbar"><li>item one</div> |
| <ul id="tree" role="tree"> |
| <li id="treeitem1" role="treeitem">tree item</li> |
| </ul> |
| <table id="treegrid" role="treegrid"> |
| <tbody> |
| <tr><td role="gridcell" colspan="3">cell</tr> |
| <tr><td role="gridcell" colspan="3">cell2</tr> |
| </tbody> |
| </table> |
| |
| <br> |
| <div>Authored orientation</div> |
| <div role="radiogroup" id="radiogroup2" aria-orientation="vertical"> |
| <div role="radio" aria-label="radio 1" aria-checked=false>radio 1</div> |
| </div> |
| <table id="treegrid2" role="treegrid" aria-orientation="horizontal"> |
| <tbody> |
| <tr><td role="gridcell" colspan="3">cell</tr> |
| <tr><td role="gridcell" colspan="3">cell2</tr> |
| </tbody> |
| </table> |
| <div role="separator" id="separator2" aria-orientation="undefined"></div> |
| <span role="slider" id="slider2" aria-orientation="undefined" aria-valuenow=5 aria-valuemin=0 aria-valuemax=10>X</span> |
| <div role="listbox" id="listbox2" aria-orientation="horizontal"> |
| <div id="option2" role="option" aria-selected="true">Option</div> |
| </div> |
| <div role="listbox" id="listbox-display-contents" style="display:contents" aria-orientation="vertical"> |
| <div id="option-within-display-contents" role="option" aria-selected="true">Option</div> |
| </div> |
| </div> |
| |
| <script> |
| var testOutput = "This test ensures that aria-orientation works correctly and the implicit defaults are defined on different roles.\n\n"; |
| |
| if (window.accessibilityController) { |
| window.jsTestIsAsync = true; |
| |
| // Test implicit defaults on some roles. |
| var slider = accessibilityController.accessibleElementById("slider"); |
| testOutput += expect("slider.orientation", "'AXOrientation: AXHorizontalOrientation'"); |
| |
| var combobox = accessibilityController.accessibleElementById("combo"); |
| testOutput += expect("combobox.orientation", "'AXOrientation: AXUnknownOrientation'"); |
| |
| var listbox = accessibilityController.accessibleElementById("listbox"); |
| testOutput += expect("listbox.orientation", "'AXOrientation: AXVerticalOrientation'"); |
| |
| var menu = accessibilityController.accessibleElementById("menu"); |
| testOutput += expect("menu.orientation", "'AXOrientation: AXVerticalOrientation'"); |
| |
| var menubar = accessibilityController.accessibleElementById("menubar"); |
| testOutput += expect("menubar.orientation", "'AXOrientation: AXHorizontalOrientation'"); |
| |
| var radiogroup = accessibilityController.accessibleElementById("radiogroup"); |
| testOutput += expect("radiogroup.orientation", "'AXOrientation: AXUnknownOrientation'"); |
| |
| var separator = accessibilityController.accessibleElementById("separator"); |
| testOutput += expect("separator.orientation", "'AXOrientation: AXHorizontalOrientation'"); |
| |
| var tablist = accessibilityController.accessibleElementById("tablist"); |
| testOutput += expect("tablist.orientation", "'AXOrientation: AXHorizontalOrientation'"); |
| |
| var toolbar = accessibilityController.accessibleElementById("toolbar"); |
| testOutput += expect("toolbar.orientation", "'AXOrientation: AXHorizontalOrientation'"); |
| |
| var tree = accessibilityController.accessibleElementById("tree"); |
| testOutput += expect("tree.orientation", "'AXOrientation: AXVerticalOrientation'"); |
| |
| var treegrid = accessibilityController.accessibleElementById("treegrid"); |
| testOutput += expect("treegrid.orientation", "'AXOrientation: AXUnknownOrientation'"); |
| |
| // Test authored aria-orientation are correct. |
| var radiogroup2 = accessibilityController.accessibleElementById("radiogroup2"); |
| testOutput += expect("radiogroup2.orientation", "'AXOrientation: AXVerticalOrientation'"); |
| |
| var treegrid2 = accessibilityController.accessibleElementById("treegrid2"); |
| testOutput += expect("treegrid2.orientation", "'AXOrientation: AXHorizontalOrientation'"); |
| |
| var separator2 = accessibilityController.accessibleElementById("separator2"); |
| testOutput += expect("separator2.orientation", "'AXOrientation: AXUnknownOrientation'"); |
| |
| var slider2 = accessibilityController.accessibleElementById("slider2"); |
| testOutput += expect("slider2.orientation", "'AXOrientation: AXUnknownOrientation'"); |
| |
| var listbox2 = accessibilityController.accessibleElementById("listbox2"); |
| testOutput += expect("listbox2.orientation", "'AXOrientation: AXHorizontalOrientation'"); |
| |
| var listboxDisplayContents = accessibilityController.accessibleElementById("listbox-display-contents"); |
| testOutput += expect("listboxDisplayContents.orientation", "'AXOrientation: AXVerticalOrientation'"); |
| |
| testOutput += "\nUpdating #listbox-display-contents aria-orientation to horizontal.\n" |
| document.getElementById("listbox-display-contents").setAttribute("aria-orientation", "horizontal"); |
| setTimeout(async function() { |
| await waitFor(() => listboxDisplayContents.orientation.includes("AXHorizontalOrientation")); |
| testOutput += expect("listboxDisplayContents.orientation", "'AXOrientation: AXHorizontalOrientation'"); |
| |
| document.getElementById("content").style.visibility = "hidden"; |
| debug(testOutput); |
| finishJSTest(); |
| }, 0); |
| } |
| </script> |
| </body> |
| </html> |
| |
