blob: 1c80c3008e2d1e646c89a9b38b5b6374534a1e04 [file] [log] [blame]
<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>FIXME: Selected is false. Expected true. http://webkit.org/b/129835</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>