| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/protocol-test.js"></script> |
| </head> |
| <body onLoad="runTest()"> |
| |
| <p>Checking Web Inspector protocol for the Accessibility Node Inspector.</p> |
| |
| <div id="examples"> |
| |
| <script class="ex"></script> |
| <script class="ex" style="display:block;"></script> |
| |
| <div class="ex"><div></div></div> |
| |
| <div role="group" class="ex"> |
| <div>foo</div> |
| <span> |
| bar |
| <span role="button">baz</span> |
| </span> |
| <div></div> |
| <div></div> |
| </div> |
| |
| <div class="ex" role="presentation"><div></div></div> |
| <div class="ex"></div> |
| <div class="ex" aria-hidden="true"></div> |
| <span class="ex"></span> |
| <span class="ex" aria-hidden="true"></span> |
| |
| <div role="listbox" class="ex" aria-busy="true"> |
| <!-- Despite having no required option children, this is valid because it is marked as busy. --> |
| <!-- For example, waiting for a script to load its contents. --> |
| </div> |
| |
| <!-- Full coverage of live regions in getAccessibilityPropertiesForNode_liveRegion.html. --> |
| <div class="ex" role="group" aria-live="off">off</div> |
| <div class="ex" role="group" aria-live="polite">polite</div> |
| <div class="ex" role="group" aria-live="assertive" aria-atomic="true">assertive (and atomic)</div> |
| |
| <div class="ex" role="button" tabindex="0"></div> |
| <div class="ex" role="button" tabindex="0" aria-disabled="true">disabled</div> |
| <div class="ex" role="button" tabindex="0" aria-pressed="true">Pressed.</div> |
| <div class="ex" role="button" tabindex="0" aria-pressed="false">Not Pressed.</div> |
| <button class="ex"></button> |
| <input class="ex" type="button"> |
| <div role="button" class="ex" tabindex="0" aria-haspopup="true">Popup Button.</div> |
| |
| <!-- FIXME: Inputs missing parentNodeId http://webkit.org/b/130181 --> |
| <input class="ex"> |
| <input class="ex" required> |
| |
| <!-- Note: These correctly report childNodeIds.length of 1 b/c of their shadow DOM tree. See http://webkit.org/b/130302 --> |
| <input class="ex" aria-required="true" value="required"> |
| <input class="ex" aria-invalid="spelling" value="invalid spelling"> |
| <input class="ex" aria-invalid="foo" value="fake value will eval to true"> |
| <input class="ex" readonly value="readonly"> |
| |
| <div class="ex" role="textbox" tabindex="0" aria-readonly="true">readonly</div> |
| <input class="ex" disabled value="disabled"> |
| <div class="ex" role="textbox" tabindex="0" aria-disabled="true">disabled</div> |
| |
| <input class="ex" type="checkbox"> |
| <input class="ex" type="checkbox" checked> |
| <div class="ex" role="checkbox">unchecked (checked undefined evals to false on checkbox)</div> |
| <div class="ex" role="checkbox" aria-checked="true">checked</div> |
| <div class="ex" role="checkbox" aria-checked="mixed">mixed</div> |
| <div class="ex" role="checkbox" aria-checked="false">unchecked</div> |
| |
| <!-- The 'doc-*' roles are defined the ARIA DPUB mobile: https://www.w3.org/TR/dpub-aam-1.0/ --> |
| <!-- Editor's draft is currently at https://rawgit.com/w3c/aria/master/dpub-aam/dpub-aam.html --> |
| <div role="doc-abstract" class="ex">doc-abstract</div> |
| <div role="doc-acknowledgments" class="ex">doc-acknowledgments</div> |
| <div role="doc-afterword" class="ex">doc-afterword</div> |
| <div role="doc-appendix" class="ex">doc-appendix</div> |
| <div role="doc-backlink" class="ex">doc-backlink</div> |
| <div role="doc-biblioentry" class="ex">doc-biblioentry</div> |
| <div role="doc-bibliography" class="ex">doc-bibliography</div> |
| <div role="doc-biblioref" class="ex">doc-biblioref</div> |
| <div role="doc-chapter" class="ex">doc-chapter</div> |
| <div role="doc-colophon" class="ex">doc-colophon</div> |
| <div role="doc-conclusion" class="ex">doc-conclusion</div> |
| <div role="doc-cover" class="ex">doc-cover</div> |
| <div role="doc-credit" class="ex">doc-credit</div> |
| <div role="doc-credits" class="ex">doc-credits</div> |
| <div role="doc-dedication" class="ex">doc-dedication</div> |
| <div role="doc-endnote" class="ex">doc-endnote</div> |
| <div role="doc-endnotes" class="ex">doc-endnotes</div> |
| <div role="doc-epigraph" class="ex">doc-epigraph</div> |
| <div role="doc-epilogue" class="ex">doc-epilogue</div> |
| <div role="doc-errata" class="ex">doc-errata</div> |
| <div role="doc-example" class="ex">doc-example</div> |
| <div role="doc-footnote" class="ex">doc-footnote</div> |
| <div role="doc-foreword" class="ex">doc-foreword</div> |
| <div role="doc-glossary" class="ex">doc-glossary</div> |
| <div role="doc-glossref" class="ex">doc-glossref</div> |
| <div role="doc-index" class="ex">doc-index</div> |
| <div role="doc-introduction" class="ex">doc-introduction</div> |
| <div role="doc-noteref" class="ex">doc-noteref</div> |
| <div role="doc-notice" class="ex">doc-notice</div> |
| <div role="doc-pagebreak" class="ex">doc-pagebreak</div> |
| <div role="doc-pagelist" class="ex">doc-pagelist</div> |
| <div role="doc-part" class="ex">doc-part</div> |
| <div role="doc-preface" class="ex">doc-preface</div> |
| <div role="doc-prologue" class="ex">doc-prologue</div> |
| <div role="doc-pullquote" class="ex">doc-pullquote</div> |
| <div role="doc-qna" class="ex">doc-qna</div> |
| <div role="doc-subtitle" class="ex">doc-subtitle</div> |
| <div role="doc-tip" class="ex">doc-tip</div> |
| <div role="doc-toc" class="ex">doc-toc</div> |
| |
| <input class="ex" type="radio"> |
| <input class="ex" type="radio" checked> |
| <div class="ex" role="radio">unchecked (checked undefined evals to false on radio)</div> |
| <div class="ex" role="radio" aria-checked="true">checked</div> |
| <div class="ex" role="radio" aria-checked="mixed">unchecked [sic] mixed state will not be exposed on radios per ARIA spec.</div> |
| <div class="ex" role="radio" aria-checked="false">unchecked</div> |
| |
| <input class="ex" aria-hidden="true"> |
| <input class="ex" style="display:none;"> |
| |
| <!-- FIXME: Images missing parentNodeId http://webkit.org/b/130181 --> |
| <img class="ex" src="./404.gif"><!-- img:not([alt]) ignored if it does not load. --> |
| <img class="ex" src="data:image/gif;base64,R0lGODlhEAARAJECAOHh4UpKSgAAAAAAACH5BAEAAAIALAAAAAAQABEAAAIllB8Zx63b4otSUWcvyuz5D4biSD7AiZroWSXa5r7CJNOvra1RAQA7"> |
| <img class="ex" src="data:image/gif;base64,R0lGODlhEAARAJECAOHh4UpKSgAAAAAAACH5BAEAAAIALAAAAAAQABEAAAIllB8Zx63b4otSUWcvyuz5D4biSD7AiZroWSXa5r7CJNOvra1RAQA7" alt=""> |
| <img class="ex" src="data:image/gif;base64,R0lGODlhEAARAJECAOHh4UpKSgAAAAAAACH5BAEAAAIALAAAAAAQABEAAAIllB8Zx63b4otSUWcvyuz5D4biSD7AiZroWSXa5r7CJNOvra1RAQA7" alt="x"> |
| <img class="ex" src="data:image/gif;base64,R0lGODlhEAARAJECAOHh4UpKSgAAAAAAACH5BAEAAAIALAAAAAAQABEAAAIllB8Zx63b4otSUWcvyuz5D4biSD7AiZroWSXa5r7CJNOvra1RAQA7" alt="x" aria-hidden="true"> |
| <img class="ex" src="data:image/gif;base64,R0lGODlhEAARAJECAOHh4UpKSgAAAAAAACH5BAEAAAIALAAAAAAQABEAAAIllB8Zx63b4otSUWcvyuz5D4biSD7AiZroWSXa5r7CJNOvra1RAQA7" alt="x" style="display:none;"> |
| |
| <select multiple id="flowedTo2"> |
| <option class="ex" selected>selected</option> |
| <option class="ex">not selected</option> |
| </select> |
| |
| <select class="ex"> |
| <option>FOO</option> |
| </select> |
| |
| <input class="ex" role="combobox" aria-owns="ownedlistbox invalidIdRef" aria-controls="ownedlistbox invalidIdRef"> |
| <div role="listbox" class="ex" id="ownedlistbox"> |
| <div class="ex" role="option" aria-selected="true">selected</div> |
| <div class="ex" role="option" aria-selected="false">not selected</div> |
| </div> |
| |
| <div role="tablist" class="ex" aria-flowto="flowedTo1 invalidIdRef flowedTo2"> |
| <div class="ex" role="tab" aria-selected="true">selected</div> |
| <div class="ex" role="tab" aria-selected="false">not selected</div> |
| </div> |
| |
| <div role="listbox" class="ex" aria-multiselectable="true"> |
| <div role="option" aria-selected="true">selected</div> |
| <div role="option" aria-selected="false">not selected</div> |
| <div role="option" aria-selected="true">selected</div> |
| </div> |
| |
| <div role="listbox" aria-busy="true"> |
| <div class="ex" role="option">busy (parent)</div> |
| <div class="ex" role="option" aria-busy="true">busy (self)</div> |
| </div> |
| |
| <ul role="tree" class="ex" id="flowedTo1" aria-activedescendant="activedescendant"> |
| <li class="ex" role="treeitem" aria-expanded="true">expanded</li> |
| <li class="ex" role="treeitem" aria-expanded="false" id="activedescendant" aria-selected="true">collapsed</li> |
| <li class="ex" role="treeitem" aria-expanded="undefined">expanded</li> |
| </ul> |
| |
| <div> |
| <h1 class="ex">H1</h1> |
| <h2 class="ex">H2</h2> |
| <h3 class="ex">H3</h3> |
| <h4 class="ex">H4</h4> |
| <h5 class="ex">H5</h5> |
| <h6 class="ex">H6</h6> |
| |
| <h1 class="ex" style="color: red;" aria-level="8">H1</h1> |
| |
| <ul class="ex"> |
| <li class="ex" aria-level="1"> |
| <span>List Item Level 1</span> |
| <ol class="ex"> |
| <li class="ex" aria-level="2">List Item Level 2</li> |
| </ol> |
| </li> |
| <li class="ex" aria-level="1">List Item Level 1</li> |
| </ul> |
| |
| <ul class="ex" role="tree"> |
| <li class="ex" role="treeitem"> |
| <span>Tree Item Level 1</span> |
| <ul class="ex"> |
| <li class="ex" role="treeitem">Tree Item Level 2</li> |
| </ul> |
| </li> |
| </ul> |
| |
| </div> |
| |
| <!-- Full test of mouseEventNodeId in getAccessibilityPropertiesForNode_mouseEventNodeId.html. --> |
| <div class="ex" onclick="void(0);">click</div> |
| |
| </div> |
| |
| <script> |
| |
| function $(selector) { |
| return document.querySelectorAll(selector); |
| } |
| function cleanup() { |
| // Hide the test element container to avoid irrelevant output diffs on subsequent updates. |
| document.getElementById("examples").style.display = "none"; |
| } |
| |
| function test() { |
| |
| var examples = []; |
| var documentNodeId = null; |
| |
| function onGotDocument(response) { |
| InspectorProtocol.checkForError(response); |
| documentNodeId = response.result.root.nodeId; |
| InspectorProtocol.sendCommand("DOM.getAccessibilityPropertiesForNode", {"nodeId": documentNodeId}, onGotAccessibilityPropertiesForDocumentNode); |
| } |
| |
| function onGotAccessibilityPropertiesForDocumentNode(response) { |
| InspectorProtocol.checkForError(response); |
| ProtocolTest.log("#document"); |
| logAccessibilityProperties(response.result.properties); |
| ProtocolTest.log("\n"); |
| InspectorProtocol.sendCommand("DOM.querySelectorAll", {"nodeId": documentNodeId, "selector": ".ex"}, onGotQuerySelectorAll); |
| } |
| |
| function onGotQuerySelectorAll(response) { |
| InspectorProtocol.checkForError(response); |
| examples = response.result.nodeIds; |
| ProtocolTest.log("Total elements to be tested: " + examples.length + "."); |
| loop(); |
| } |
| |
| function loop() { |
| if (examples.length) { |
| InspectorProtocol.sendCommand("DOM.getOuterHTML", {"nodeId": examples[examples.length-1]}, onGotOuterHTML); |
| } else { |
| finishTest(); |
| } |
| } |
| |
| function onGotOuterHTML(response) { |
| InspectorProtocol.checkForError(response); |
| var outerHTML = response.result.outerHTML; |
| outerHTML = outerHTML.replace(/ class="ex"/g, ""); // remove any duplicated, unnecessary class attributes |
| outerHTML = outerHTML.replace(/;base64,.*?"/, "...\""); // suppress full data URIs in output |
| ProtocolTest.log("\n" + outerHTML); |
| InspectorProtocol.sendCommand("DOM.getAccessibilityPropertiesForNode", {"nodeId": examples[examples.length-1]}, onGotAccessibilityProperties); |
| } |
| |
| function onGotAccessibilityProperties(response) { |
| InspectorProtocol.checkForError(response); |
| logAccessibilityProperties(response.result.properties); |
| examples.pop(); |
| loop(); |
| } |
| |
| function logAccessibilityProperties(properties) { |
| for (var key in properties) { |
| var value = properties[key]; |
| switch (key){ |
| case "nodeId": |
| continue; |
| case "activeDescendantNodeId": |
| case "mouseEventNodeId": |
| case "parentNodeId": |
| if (typeof value === "number") |
| ProtocolTest.log(" " + key + ": exists"); |
| break; |
| case "childNodeIds": |
| case "controlledNodeIds": |
| case "flowedNodeIds": |
| case "ownedNodeIds": |
| case "selectedChildNodeIds": |
| if (typeof value === "object" && value.length) |
| ProtocolTest.log(" " + key + ".length: " + value.length); |
| break; |
| default: |
| ProtocolTest.log(" " + key + ": " + value); |
| } |
| } |
| } |
| |
| function finishTest() { |
| InspectorProtocol.sendCommand("Runtime.evaluate", {"expression": "cleanup()"}, function(){ |
| ProtocolTest.completeTest(); |
| }); |
| } |
| |
| |
| |
| InspectorProtocol.sendCommand("DOM.getDocument", {}, onGotDocument); |
| |
| } |
| </script> |
| </body> |
| </html> |
