304 lines
12 KiB
HTML
304 lines
12 KiB
HTML
<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>
|