Update web-platform-tests to revision 0d318188757a9c996e20b82db201fd04de5aa255

This commit is contained in:
James Graham 2015-03-27 09:15:38 +00:00
parent b2a5225831
commit 1a81b18b9f
12321 changed files with 544385 additions and 6 deletions

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AT-SPI ONLY: option within listbox exposed as ROLE_MENU: option is exposed as ROLE_MENU_ITEM</title>
</head>
<body>
<h1>AT-SPI ONLY: option within listbox exposed as ROLE_MENU: option is exposed as ROLE_MENU_ITEM</h1>
<div role="combobox" aria-expanded="true" aria-label="Combobox for AT-SPI test of listbox/option mappings">
<input type="text" value="combobox entry field">
<div role="listbox" aria-label="Listbox child of combobox for AT-SPI test of listbox/option mappings">
<p role="option" id="test">Test option</p>
<p role="option">Another option</p>
<p role="option">A third option</p>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,106 @@
<!DOCTYPE HTML><!-- HTML 5 -->
<html lang="en">
<head>
<title>ARIA Tree Example</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="./css/treesimple.css" type="text/css">
<script type="text/javascript" src="./js/prototype.js"></script>
<script type="text/javascript" src="./js/aria.js"></script>
<script type="text/javascript" src="./js/init.js"></script>
</head>
<body>
<h1>Directions</h1>
<ol>
<li>Tab into the tree control.</li>
<li>Use the up/down arrow keys to change the active descendant.</li>
<li>Use the right/left arrow keys to expand/collapse appropriate nodes.</li>
</ol>
<p>Some <a href="javascript:$('tree0').focus();">focusable</a> content before the ARIA application.</p>
<div role="application">
<h1 id="treelabel">ARIA Tree Example</h1>
<ul id="tree0" role="tree" aria-labelledby="treelabel" aria-activedescendant="tree0_item0_2_0_1" tabindex="0">
<!-- all the ids and aria-* attributes are hardcoded here for sake of example (final version will use javascript to assign ids as needed) -->
<li id="tree0_item0" role="treeitem" aria-level="1" aria-expanded="true">
<!-- .expander becomes the javascript trigger for expand/collapse -->
<span class="expander"></span>
Animals
<ul role="group">
<li id="tree0_item0_0" role="treeitem" aria-level="2"><span>Birds</span></li>
<li id="tree0_item0_1" role="treeitem" aria-level="2" aria-expanded="false">
<span class="expander"></span>
Cats
<ul role="group">
<li id="tree0_item0_1_0" role="treeitem" aria-level="3">Siamese</li>
<li id="tree0_item0_1_1" role="treeitem" aria-level="3">Tabby</li>
</ul>
</li>
<li id="tree0_item0_2" role="treeitem" aria-level="2" aria-expanded="true">
<span class="expander"></span>
Dogs
<ul role="group">
<li id="tree0_item0_2_0" role="treeitem" aria-level="3" aria-expanded="true">
<span class="expander"></span>
Small Breeds
<ul role="group">
<li id="tree0_item0_2_0_0" role="treeitem" aria-level="4">Chihuahua</li>
<li id="tree0_item0_2_0_1" role="treeitem" aria-level="4">Italian Greyhound</li>
<li id="tree0_item0_2_0_2" role="treeitem" aria-level="4">Japanese Chin</li>
</ul>
</li>
<li id="tree0_item0_2_1" role="treeitem" aria-level="3" aria-expanded="false">
<span class="expander"></span>
Medium Breeds
<ul role="group">
<li id="tree0_item0_2_1_0" role="treeitem" aria-level="4">Beagle</li>
<li id="tree0_item0_2_1_1" role="treeitem" aria-level="4">Cocker Spaniel</li>
<li id="tree0_item0_2_1_2" role="treeitem" aria-level="4">Pit Bull</li>
</ul>
</li>
<li id="tree0_item0_2_2" role="treeitem" aria-level="3" aria-expanded="false">
<span class="expander"></span>
Large Breeds
<ul role="group">
<li id="tree0_item0_2_2_0" role="treeitem" aria-level="4">Afghan</li>
<li id="tree0_item0_2_2_1" role="treeitem" aria-level="4">Great Dane</li>
<li id="tree0_item0_2_2_2" role="treeitem" aria-level="4">Mastiff</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="tree0_item1" role="treeitem" aria-level="1" aria-expanded="true">
<span class="expander"></span>
Minerals
<ul role="group">
<li id="tree0_item1_0" role="treeitem" aria-level="2">Zinc</li>
<li id="tree0_item1_1" role="treeitem" aria-level="2" aria-expanded="false">
<span class="expander"></span>
Gold
<ul role="group">
<li id="tree0_item1_1_0" role="treeitem" aria-level="3">Yellow Gold</li>
<li id="tree0_item1_1_1" role="treeitem" aria-level="3">White Gold</li>
</ul>
</li>
<li id="tree0_item1_2" role="treeitem" aria-level="2">Silver</li>
</ul>
</li>
<li id="tree0_item2" role="treeitem" aria-level="1" aria-expanded="true">
<span class="expander"></span>
Vegetables
<ul role="group">
<li id="tree0_item2_0" role="treeitem" aria-level="2">Carrot</li>
<li id="tree0_item2_1" role="treeitem" aria-level="2">Tomato</li>
<li id="tree0_item2_2" role="treeitem" aria-level="2">Lettuce</li>
</ul>
</li>
</ul>
</div>
<p>More <a href="javascript:$('tree0').focus();">focusable</a> content after the ARIA application.</p>
</body>
</html>

View file

@ -0,0 +1,124 @@
<!DOCTYPE HTML><!-- HTML 5 -->
<html lang="en">
<head>
<title>ARIA Tree Example</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="./css/treebox.css" type="text/css">
<script type="text/javascript" src="./js/prototype.js"></script>
<script type="text/javascript" src="./js/aria.js"></script>
<script type="text/javascript" src="./js/init.js"></script>
</head>
<body>
<h1>Directions</h1>
<ol>
<li>Tab into the tree control.</li>
<li>Use the up/down arrow keys to change the active descendant.</li>
<li>Use the right/left arrow keys to expand/collapse appropriate nodes.</li>
</ol>
<p>Some <a href="javascript:$('tree0').focus();">focusable</a> content before the ARIA application.</p>
<div role="application">
<h1 id="treelabel">ARIA Tree Example</h1>
<ul id="tree0" role="tree" aria-labelledby="treelabel" aria-activedescendant="tree0_item0_2_0_1" tabindex="0">
<!-- all the ids and aria-* attributes are hardcoded here for sake of example (final version will use javascript to assign ids as needed) -->
<li id="tree0_item0" role="treeitem" aria-level="1" aria-expanded="true">
<!-- .expander becomes the javascript trigger for expand/collapse -->
<span>
<span class="expander"></span>
Animals
</span>
<ul role="group">
<li id="tree0_item0_0" role="treeitem" aria-level="2"><span>Birds</span></li>
<li id="tree0_item0_1" role="treeitem" aria-level="2" aria-expanded="false">
<span>
<span class="expander"></span>
Cats
</span>
<ul role="group">
<li id="tree0_item0_1_0" role="treeitem" aria-level="3"><span>Siamese</span></li>
<li id="tree0_item0_1_1" role="treeitem" aria-level="3"><span>Tabby</span></li>
</ul>
</li>
<li id="tree0_item0_2" role="treeitem" aria-level="2" aria-expanded="true">
<span>
<span class="expander"></span>
Dogs
</span>
<ul role="group">
<li id="tree0_item0_2_0" role="treeitem" aria-level="3" aria-expanded="true">
<span>
<span class="expander"></span>
Small Breeds
</span>
<ul role="group">
<li id="tree0_item0_2_0_0" role="treeitem" aria-level="4"><span>Chihuahua</span></li>
<li id="tree0_item0_2_0_1" role="treeitem" aria-level="4"><span>Italian Greyhound</span></li>
<li id="tree0_item0_2_0_2" role="treeitem" aria-level="4"><span>Japanese Chin</span></li>
</ul>
</li>
<li id="tree0_item0_2_1" role="treeitem" aria-level="3" aria-expanded="false">
<span>
<span class="expander"></span>
Medium Breeds
</span>
<ul role="group">
<li id="tree0_item0_2_1_0" role="treeitem" aria-level="4"><span>Beagle</span></li>
<li id="tree0_item0_2_1_1" role="treeitem" aria-level="4"><span>Cocker Spaniel</span></li>
<li id="tree0_item0_2_1_2" role="treeitem" aria-level="4"><span>Pit Bull</span></li>
</ul>
</li>
<li id="tree0_item0_2_2" role="treeitem" aria-level="3" aria-expanded="false">
<span>
<span class="expander"></span>
Large Breeds
</span>
<ul role="group">
<li id="tree0_item0_2_2_0" role="treeitem" aria-level="4"><span>Afghan</span></li>
<li id="tree0_item0_2_2_1" role="treeitem" aria-level="4"><span>Great Dane</span></li>
<li id="tree0_item0_2_2_2" role="treeitem" aria-level="4"><span>Mastiff</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="tree0_item1" role="treeitem" aria-level="1" aria-expanded="true">
<span>
<span class="expander"></span>
Minerals
</span>
<ul role="group">
<li id="tree0_item1_0" role="treeitem" aria-level="2"><span>Zinc</span></li>
<li id="tree0_item1_1" role="treeitem" aria-level="2" aria-expanded="false">
<span>
<span class="expander"></span>
Gold
</span>
<ul role="group">
<li id="tree0_item1_1_0" role="treeitem" aria-level="3"><span>Yellow Gold</span></li>
<li id="tree0_item1_1_1" role="treeitem" aria-level="3"><span>White Gold</span></li>
</ul>
</li>
<li id="tree0_item1_2" role="treeitem" aria-level="2"><span>Silver</span></li>
</ul>
</li>
<li id="tree0_item2" role="treeitem" aria-level="1" aria-expanded="true">
<span>
<span class="expander"></span>
Vegetables
</span>
<ul role="group">
<li id="tree0_item2_0" role="treeitem" aria-level="2"><span>Carrot</span></li>
<li id="tree0_item2_1" role="treeitem" aria-level="2"><span>Tomato</span></li>
<li id="tree0_item2_2" role="treeitem" aria-level="2"><span>Lettuce</span></li>
</ul>
</li>
</ul>
</div>
<p>More <a href="javascript:$('tree0').focus();">focusable</a> content after the ARIA application.</p>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 B

View file

@ -0,0 +1,65 @@
/* variant of treesimple.css, that adds slightly more complex styling. */
html, body {
color:#333;
background-color:#fff;
font-family:"helvetica neue", arial, helvetica, sans-serif;
font-size:12px;
line-height:1.4em;
}
h1{
font-size:14px;
}
[role="tree"]{
border:solid 1px #000;
width:300px; /* hardcoded for example */
cursor:default;
}
ul[role="tree"], [role="tree"] li, [role="tree"] ul {
display:block;
list-style:none;
margin:0;
padding:0;
}
li[role="treeitem"] {
position:relative;
}
[role="treeitem"] > span{ display:block; }
/* looks kinda redundant, but is necessary to get the full left bleed on sub-level items */
[role="treeitem"] > span{ padding-left:15px; }
[role="treeitem"] [role="treeitem"] > span{ padding-left:30px; }
[role="treeitem"] [role="treeitem"] [role="treeitem"] > span{ padding-left:45px; }
[role="treeitem"] [role="treeitem"] [role="treeitem"] [role="treeitem"] > span{ padding-left:60px; }
[role="treeitem"] [role="treeitem"] [role="treeitem"] [role="treeitem"] [role="treeitem"] > span{ padding-left:75px; }
.expander {
display:block;
position:absolute;
left:2px;
top:0.3em;
width:9px;
height:9px;
background:transparent url(./img/expander.gif) -9px 0 no-repeat;
}
[aria-expanded="false"] > * > .expander {
background-position:0 0;
}
[role="treeitem"] [role="treeitem"] .expander { left:17px; }
[role="treeitem"] [role="treeitem"] [role="treeitem"] .expander { left:32px; }
[role="treeitem"] [role="treeitem"] [role="treeitem"] [role="treeitem"] .expander { left:47px; }
[role="treeitem"] [role="treeitem"] [role="treeitem"] [role="treeitem"] [role="treeitem"] .expander { left:62px; }
[aria-expanded="false"] [role="group"] {
display:none;
}
[role="tree"] .activedescendant > span {
background-color:#ccc;
}
[role="tree"]:focus .activedescendant > span {
color:#fff;
background-color:#03c;
}

View file

@ -0,0 +1,50 @@
html, body {
color:#333;
background-color:#fff;
font-family:"helvetica neue", arial, helvetica, sans-serif;
font-size:12px;
line-height:1.4em;
}
h1{
font-size:14px;
}
[role="tree"]{
cursor:default;
}
ul[role="tree"], [role="tree"] li, [role="tree"] ul {
display:block;
list-style:none;
margin:0;
padding:0;
}
li[role="treeitem"] {
position:relative;
padding-left:15px;
}
.expander {
display:block;
position:absolute;
left:2px;
top:0.3em;
width:9px;
height:9px;
background:transparent url(./img/expander.gif) -9px 0 no-repeat;
}
[aria-expanded="false"] > * > .expander {
background-position:0 0;
}
[aria-expanded="false"] [role="group"] {
display:none;
}
[role="tree"] .activedescendant {
font-weight:bold;
color:#000;
}
[role="tree"]:focus .activedescendant{
color:#03c;
}
[role="tree"] .activedescendant [role="group"] {
font-weight:normal;
color:#000;
}

View file

@ -0,0 +1,160 @@
/* Aria Singleton */
var Aria = {
Trees: new Array(), // instances of Aria.Tree Class
isEnabled: function(inNode){
// todo: this may need to check isEnabled on all parentNodes, inheritence of aria-enabled is ambiguous
if(inNode.getAttribute('aria-enabled') && inNode.getAttribute('aria-enabled').toLowerCase()=='false') return false;
else return true;
},
isExpanded: function(inNode){
if(inNode.getAttribute('aria-expanded') && inNode.getAttribute('aria-expanded').toLowerCase()=='false') return false;
else return true;
},
isTreeItem: function(inNode){
if(inNode.getAttribute('role') && inNode.getAttribute('role').toLowerCase()=='treeitem') return true;
else return false;
}
};
Aria.Tree = Class.create();
Aria.Tree.prototype = {
initialize: function(inNode){
if(!$(inNode) && console.error) console.error('Error from aria.js: Aria.Tree instance initialized with invalid element, '+ inNode);
this.el = $(inNode);
this.index = Aria.Trees.length; // each tree should know its index in the Aria singleton's list, in order to concatenate id strings
this.strActiveDescendant = this.el.getAttribute('aria-activedescendant');
this.strDefaultActiveDescendant = 'tree'+this.index+'_item0'; // default first item
if(!$(this.strActiveDescendant)) this.strActiveDescendant = this.strDefaultActiveDescendant; // set to default if no existing activedescendant
this.setActiveDescendant($(this.strActiveDescendant));
// set up event delegation on the tree node
Event.observe(this.el, 'click', this.handleClick.bindAsEventListener(this));
Event.observe(this.el, 'keydown', this.handleKeyPress.bindAsEventListener(this)); //webkit doesn't send keypress events for arrow keys, so use keydown instead
},
getActiveDescendant: function(inNode){
if(inNode){ // if inNode (from event target), sets the activedescendant to nearest ancestor treeitem
var el = $(inNode);
while(el != this.el){
if(Aria.isTreeItem(el)) break; // exit the loop; we have the treeitem
el = el.parentNode;
}
if(el == this.el) {
this.setActiveDescendant(); // set to default activedescendant
} else {
this.setActiveDescendant(el);
return el;
}
} else {
return $(this.el.getAttribute('aria-activedescendant'));
}
},
getNextTreeItem: function(inNode){
var el = $(inNode);
var originalElm = $(inNode);
while(!Aria.isTreeItem(el) || el == originalElm){
if(Aria.isExpanded(el) && el.down()){ // should be el.down('[role="treeitem"]');
var elements = el.getElementsByTagName('*');
for(var i=0, c=elements.length; i<c; i++){
if(Aria.isTreeItem(elements[i])) return elements[i];
}
}
if(el.next()){
el = el.next();
} else {
while(!el.parentNode.next() && el.parentNode != this.el){
el = el.parentNode;
}
if(el.parentNode == this.el) return originalElm; // if no next items in tree, return current treeitem
else el = el.parentNode.next();
}
}
return el;
},
getPreviousTreeItem: function(inNode){
var el = $(inNode);
var originalElm = $(inNode);
while(!Aria.isTreeItem(el) || el == originalElm){
if(el.previous()){
el = el.previous();
// recursively choose last child node of previous el, as long as it's not in an collapsed node
if (el.down() && Aria.isExpanded(el)){
el = el.down();
while (el.next() || (el.down() && Aria.isExpanded(el))){
if (el.next()) el = el.next();
else el = el.down();
}
}
} else {
if(el.parentNode == this.el) return originalElm; // if no previous items in tree, return current treeitem
el = el.parentNode;
}
}
if(el == this.el) return originalElm; // if no previous items in tree, return current treeitem
return el;
},
handleClick: function(inEvent){
var target = inEvent.target; // get the click target
var el = this.getActiveDescendant(target);
if(target.className.indexOf('expander')>-1){ // if it's an expander widget
this.toggleExpanded(el); // toggle the aria-expanded attribute on activedescendant
Event.stop(inEvent); // and stop the event
}
},
handleKeyPress: function(inEvent){
switch(inEvent.keyCode){
// case Event.KEY_PAGEUP: break;
// case Event.KEY_PAGEDOWN: break;
// case Event.KEY_END: break;
// case Event.KEY_HOME: break;
case Event.KEY_LEFT: this.keyLeft(); break;
case Event.KEY_UP: this.keyUp(); break;
case Event.KEY_RIGHT: this.keyRight(); break;
case Event.KEY_DOWN: this.keyDown(); break;
default:
//console.log(inEvent.keyCode);
return;
}
Event.stop(inEvent);
},
keyLeft: function(){
var el = this.activeDescendant;
if(Aria.isExpanded(el)){
el.setAttribute('aria-expanded','false');
this.setActiveDescendant(this.activeDescendant);
}
},
keyUp: function(){
var el = this.activeDescendant;
this.setActiveDescendant(this.getPreviousTreeItem(el));
},
keyRight: function(){
var el = this.activeDescendant;
if(!Aria.isExpanded(el)){
el.setAttribute('aria-expanded','true');
this.setActiveDescendant(this.activeDescendant);
}
},
keyDown: function(){
var el = this.activeDescendant;
this.setActiveDescendant(this.getNextTreeItem(el));
},
setActiveDescendant: function(inNode){
Element.removeClassName(this.activeDescendant,'activedescendant')
if($(inNode)) this.activeDescendant = $(inNode);
else this.activeDescendant = $(this.strDefaultActiveDescendant);
Element.addClassName(this.activeDescendant,'activedescendant')
this.strActiveDescendant = this.activeDescendant.id;
this.el.setAttribute('aria-activedescendant', this.activeDescendant.id);
},
toggleExpanded: function(inNode){
var el = $(inNode);
if(Aria.isExpanded(el)){
el.setAttribute('aria-expanded','false');
} else {
el.setAttribute('aria-expanded','true');
}
this.setActiveDescendant(el);
}
};

View file

@ -0,0 +1,8 @@
function myLoad(){
$$('[role="tree"]').each(function(elm){
// for each node where [role="tree"], create a new Aria.Tree instance and append it to array Aria.Trees
Aria.Trees.push(new Aria.Tree(elm));
});
}
Event.observe(window, 'load', myLoad); // will probably use onDOMContentLoaded instead of onLoad

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Checkbox with title attribute and no other labeling mechanism</title>
</head>
<body>
<input type="checkbox" id="test" title="foo" />
</body>
</html>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>File input with title attribute and no other labeling mechanism</title>
</head>
<body>
<input type="file" id="test" title="foo" />
</body>
</html>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Password input with title attribute and no other labeling mechanism</title>
</head>
<body>
<input type="password" id="test" title="foo" />
</body>
</html>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Radio button with title attribute and no other labeling mechanism</title>
</head>
<body>
<input type="radio" id="test" title="foo" />
</body>
</html>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Text input with title attribute and no other labeling mechanism</title>
</head>
<body>
<input type="text" id="test" title="foo" />
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 673</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 673</h1>
<div id="TEST_ID" aria-live="polite" >
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is defined in markup with the value="polite".
After the onload event completes a child DOM text node is added to the element with
the aria-live attribute.</p>
<script type="text/javascript">
function addTextNode() {
var node = document.getElementById('TEST_ID');
var text_node = document.createTextNode('TEST TEXT');
node.appendChild(text_node);
}
function onload() {
setTimeout(addTextNode,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 674</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 674</h1>
<div id="TEST_ID" aria-live="polite" >
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is defined in markup with the value="polite".
After the onload event completes a child DOM text node is added to the element
with the aria-live attribute.</p>
<script type="text/javascript">
function addTextNode() {
var node = document.getElementById('TEST_ID');
var text_node = document.createTextNode('TEST TEXT');
node.appendChild(text_node);
}
function onload() {
setTimeout(addTextNode,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 675</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 675</h1>
<div id="TEST_ID">
</div>
<h2>Description</h2>
<p>An element without an aria-live attribute is defined in markup.
After the onload event completes an aria-live attribute with the
value 'assertive' is added to the element and a child DOM text
node is added to the element.</p>
<script type="text/javascript">
function addLiveRegion() {
var node = document.getElementById('TEST_ID');
node.setAttribute('aria-live', 'assertive');
var text_node = document.createTextNode('TEST TEXT');
node.appendChild(text_node);
}
function onload() {
setTimeout(addLiveRegion,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 676</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 676</h1>
<div id="TEST_ID">
</div>
<h2>Description</h2>
<p>An element without an aria-live attribute is defined in markup.
After the onload event completes a new element with an aria-live attribute with the
value 'assertive' is added to the document and a child element and text
node is added to the element with the aria-live attribute.</p>
<script type="text/javascript">
function addElement() {
var node = document.getElementById('TEST_ID');
var element_node = document.createElement('span');
element_node.setAttribute('aria-live','assertive');
var text_node = document.createTextNode('Text added in a span element on load');
element_node.appendChild(text_node);
node.appendChild(element_node);
}
function onload() {
setTimeout(addElement,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 677</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 677</h1>
<div aria-live="polite" >
<span id="TEST_ID" style="display: none">Text in markup</span>
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is defined in markup with the value="polite"
which has a child DOM element node with text content that is hidden using CSS display="none".
After the onload event completes a child DOM element node with text content has the
CSS dsiplay property changed to display="block".</p>
<script type="text/javascript">
function showElement() {
var node = document.getElementById('TEST_ID');
node.style.display = 'block';
}
function onload() {
setTimeout(showElement,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 678</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 678</h1>
<div aria-live="assertive" >
<span id="TEST_ID" style="display: none">Text in markup</span>
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is defined in markup with the
value="assertive" which has a child DOM element node with text content
that is hidden using CSS display="none". After the onload event completes
a child DOM element node with text content has the CSS dsiplay property
changed to display="block".</p>
<script type="text/javascript">
function showElement() {
var node = document.getElementById('TEST_ID');
node.style.display = 'block';
}
function onload() {
setTimeout(showElement,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 679</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 679</h1>
<div aria-live="polite" >
<span>Text before test : </span>
<span id="TEST_ID" style="visibility: hidden">TEST TEXT</span>
<span> : Text after test</span>
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is defined in markup with the value="polite" which has a child
DOM element node with text content that is hidden using CSS visibility="hidden".
After the onload event completes a child DOM element node with text content has the
CSS dsiplay property changed to visibility="visible".</p>
<script type="text/javascript">
function showElement() {
var node = document.getElementById('TEST_ID');
node.style.visibility = 'visible';
}
function onload() {
setTimeout(showElement,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 680</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 680</h1>
<div aria-live="assertive" >
<span>Text before test : </span>
<span id="TEST_ID" style="visibility: hidden">TEST TEXT</span>
<span> : Text after test</span>
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is defined in markup with the value="assertive"
which has a child DOM element node with text content that is hidden using CSS visibility="hidden".
After the onload event completes a child DOM element node with text content has the CSS dsiplay
property changed to visibility="visible".</p>
<script type="text/javascript">
function showElement() {
var node = document.getElementById('TEST_ID');
node.style.visibility = 'visible';
}
function onload() {
setTimeout(showElement,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 681</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 681</h1>
<div id="TEST_ID" aria-live="polite">
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is added to the document by a script during the onload
event with the value="polite". After the onload event completes a child DOM text node is added
to the element with the aria-live attribute.</p>
<script type="text/javascript">
function addChildTextNode() {
var node = document.getElementById('TEST_ID');
var text_node = document.createTextNode("TEST TEXT");
node.appendChild(text_node);
}
function onload() {
setTimeout(addChildTextNode,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 682</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 682</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is added to the document by a script during the onload
event with the value="assertive". After the onload event completes a child DOM text node is
added to the element with the aria-live attribute.</p>
<script type="text/javascript">
function addChildTextNode() {
var node = document.getElementById('TEST_ID_2');
var text_node = document.createTextNode("TEST TEXT");
node.appendChild(text_node);
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
element_node.setAttribute('aria-live', 'assertive');
node.appendChild(element_node);
setTimeout(addChildTextNode,1000);
}
function onload() {
addLiveRegion();
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 683</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 683</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is added to the document by a script during the onload
event with the value="polite". After the onload event completes a child DOM element node is
added to the element with the aria-live attribute.</p>
<script type="text/javascript">
function addChildElementNode() {
var node = document.getElementById('TEST_ID_2');
var element_node = document.createElement('div');
var text_node = document.createTextNode("TEST TEXT");
element_node.appendChild(text_node);
node.appendChild(element_node);
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var live_node = document.createElement('div');
live_node.setAttribute('id', 'TEST_ID_2');
live_node.setAttribute('aria-live', 'polite');
node.appendChild(live_node);
setTimeout(addChildElementNode,1000);
}
function onload() {
addLiveRegion();
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 684</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 684</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is added to the document by a script during
the onload event with the value="assertive". After the onload event completes a
child DOM element node is added to the element with the aria-live attribute.</p>
<script type="text/javascript">
function addChildElementNode() {
var node = document.getElementById('TEST_ID_2');
var element_node = document.createElement('div');
element_node.setAttribute('aria-live', 'polite');
node.appendChild(element_node);
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
element_node.setAttribute('aria-live', 'assertive');
node.appendChild(element_node);
setTimeout(addChildElementNode, 1000);
}
function onload() {
addLiveRegion();
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 685</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 685</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is added to the document by a script during the onload
event with the value="polite" and the element has a child DOM element node with text content
that is hidden using CSS display="none". After the onload event completes a child DOM element
node with text content has the CSS display property changed to display="block".</p>
<script type="text/javascript">
function showElement() {
var node = document.getElementById('TEST_ID_3');
node.style.display = "block";
}
function addChildElementNode() {
var node = document.getElementById('TEST_ID_2');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_3');
element_node.setAttribute('style', 'display: none');
var text_node = document.createTextNode("TEST TEXT");
element_node.appendChild(text_node);
node.appendChild(element_node);
setTimeout(showElement,1000);
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
element_node.setAttribute('aria-live', 'polite');
node.appendChild(element_node);
setTimeout(addChildElementNode,1000);
}
function onload() {
addLiveRegion();
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 686</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 686</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is added to the document by a script during the onload
event with the value="assertive" and the element has a child DOM element node with text content
that is hidden using CSS display="none". After the onload event completes a child DOM element
node with text content has the CSS display property changed to display="block".</p>
<script type="text/javascript">
function showElement() {
var node = document.getElementById('TEST_ID_3');
node.style.display = "block";
}
function addChildElementNode() {
var node = document.getElementById('TEST_ID_2');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_3');
element_node.setAttribute('style', 'display: none');
var text_node = document.createTextNode("TEST TEXT");
element_node.appendChild(text_node);
node.appendChild(element_node);
setTimeout(showElement,1000);
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
element_node.setAttribute('aria-live', 'assertive');
node.appendChild(element_node);
setTimeout(addChildElementNode,1000);
}
function onload() {
addLiveRegion();
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 687</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 687</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is added to the document by a script during
the onload event with the value="polite" and the element has a child DOM element node
with text content that is hidden using CSS visibility="hidden". After the onload
event completes a child DOM element node with text content has the CSS display property
changed to visibility="visible".</p>
<script type="text/javascript">
function showElement() {
var node = document.getElementById('TEST_ID_3');
node.setAttribute('style', 'visibility: visible');
}
function addChildElementNode() {
var node = document.getElementById('TEST_ID_2');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_3');
element_node.setAttribute('style', 'visibility: hidden');
var text_node = document.createTextNode("TEST TEXT");
element_node.appendChild(text_node);
node.appendChild(element_node);
setTimeout(showElement,1000);
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
element_node.setAttribute('aria-live', 'polite');
node.appendChild(element_node);
setTimeout(addChildElementNode,1000);
}
function onload() {
addLiveRegion();
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 688</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 688</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is added to the document by a script
during the onload event with the value="assertive" and the element has a child
DOM element node with text content that is hidden using CSS visibility="hidden".
After the onload event completes a child DOM element node with text content
has the CSS display property changed to visibility="visible".</p>
<script type="text/javascript">
function showElement() {
var node = document.getElementById('TEST_ID_3');
node.setAttribute('style', 'visibility: visible');
}
function addChildElementNode() {
var node = document.getElementById('TEST_ID_2');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_3');
element_node.setAttribute('style', 'visibility: hidden');
var text_node = document.createTextNode("TEST TEXT");
element_node.appendChild(text_node);
node.appendChild(element_node);
setTimeout(showElement,1000);
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
element_node.setAttribute('aria-live', 'assertive');
node.appendChild(element_node);
setTimeout(addChildElementNode,1000);
}
function onload() {
addLiveRegion();
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 689</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 689</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>The aria-live attribute is added to an element in the document by a script after the
onload event completes with the value="polite". After the aria-live attribute is added,
a child DOM text node is added to the element with the aria-live attribute.</p>
<script type="text/javascript">
function addChildTextNode() {
var node = document.getElementById('TEST_ID_2');
var text_node = document.createTextNode("TEST TEXT");
node.appendChild(text_node);
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
element_node.setAttribute('aria-live', 'polite');
node.appendChild(element_node);
setTimeout(addChildTextNode,500);
}
function onload() {
setTimeout(addLiveRegion,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 690</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 690</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>The aria-live attribute is added to an element in the document by a script after
the onload event completes with the value="assertive". After the aria-live attribute
is added, a child DOM text node is added to the element with the aria-live attribute.</p>
<script type="text/javascript">
function addChildTextNode() {
var node = document.getElementById('TEST_ID_2');
var text_node = document.createTextNode("TEST TEXT");
node.appendChild(text_node);
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
element_node.setAttribute('aria-live', 'assertive');
node.appendChild(element_node);
setTimeout(addChildTextNode,500);
}
function onload() {
setTimeout(addLiveRegion,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 691</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 691</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>The aria-live attribute is added to an element in the document by a script
after the onload event completes with the value="polite". After the aria-live
attribute is added, a child DOM element node is added to the element with
the aria-live attribute.</p>
<script type="text/javascript">
function addChildElementNode() {
var node = document.getElementById('TEST_ID_2');
var element_node = document.createElement('div');
var text_node = document.createTextNode("TEST TEXT");
element_node.appendChild(text_node);
node.appendChild(element_node);
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
element_node.setAttribute('aria-live', 'polite');
node.appendChild(element_node);
setTimeout(addChildElementNode,500);
}
function onload() {
setTimeout(addLiveRegion,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 692</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 692</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>The aria-live attribute is added to an element in the document by a script after
the onload event completes with the value="assertive". After the aria-live attribute
is added, a child DOM element node is added to the element with the aria-live attribute.</p>
<script type="text/javascript">
function addChildElementNode() {
var node = document.getElementById('TEST_ID_2');
var element_node = document.createElement('div');
element_node.setAttribute('aria-live', 'polite');
node.appendChild(element_node);
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
element_node.setAttribute('aria-live', 'assertive');
node.appendChild(element_node);
setTimeout(addChildElementNode,500);
}
function onload() {
setTimeout(addLiveRegion,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 693</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 693</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>The aria-live attribute is added to an element in the document by a script after
the onload event completes with the value="polite" and the element has a child DOM
element node with text content that is hidden using CSS display="none". After the
aria-live attribute is added, the child DOM element node with text content has the
CSS display property changed to display="block".</p>
<script type="text/javascript">
function showElement() {
var node = document.getElementById('TEST_ID_2');
node.setAttribute('style', 'display: block');
}
function addChildElementNode() {
var element_node = document.getElementById('TEST_ID_2');
var text_node = document.createTextNode("TEST TEXT");
element_node.appendChild(text_node);
element_node.setAttribute('style', 'display: none');
setTimeout(showElement,500);
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
element_node.setAttribute('aria-live', 'polite');
node.appendChild(element_node);
setTimeout(addChildElementNode,500);
}
function onload() {
setTimeout(addLiveRegion,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 694</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 694</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>The aria-live attribute is added to an element in the document by a script after
the onload event completes with the value="assertive" and the element has a child
DOM element node with text content that is hidden using CSS display="none". After
the aria-live attribute is added, the child DOM element node with text content has
the CSS display property changed to display="block".</p>
<script type="text/javascript">
function showElement() {
var node = document.getElementById('TEST_ID_3');
node.setAttribute('style', 'display: block');
}
function addChildElementNode() {
var node = document.getElementById('TEST_ID_2');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_3');
element_node.setAttribute('style', 'display: none');
var text_node = document.createTextNode("TEST TEXT");
element_node.appendChild(text_node);
node.appendChild(element_node);
setTimeout(showElement,500);
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
element_node.setAttribute('aria-live', 'assertive');
node.appendChild(element_node);
setTimeout(addChildElementNode,500);
}
function onload() {
setTimeout(addLiveRegion,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 695</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 695</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>The aria-live attribute is added to an element in the document by a script
after the onload event completes with the value="polite" and the element has
a child DOM element node with text content that is hidden using CSS
visibility="hidden". After the aria-live attribute is added, the child DOM
element node with text content has the CSS display property changed to visibility="visible".</p>
<script type="text/javascript">
function showElement() {
var node = document.getElementById('TEST_ID_3');
node.setAttribute('style', 'visibility: visible');
}
function addChildElementNode() {
var node = document.getElementById('TEST_ID_2');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_3');
element_node.setAttribute('style', 'visibility: hidden');
var text_node = document.createTextNode("TEST TEXT");
element_node.appendChild(text_node);
node.appendChild(element_node);
setTimeout(showElement,500);
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
element_node.setAttribute('aria-live', 'assertive');
node.appendChild(element_node);
setTimeout(addChildElementNode,500);
}
function onload() {
setTimeout(addLiveRegion,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 696</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 696</h1>
<div id="TEST_ID_1">
<div id="TEST_ID_2" style="visibility: hidden">TEST TEXT</div>
</div>
<h2>Description</h2>
<p>The aria-live attribute is added to an element in the document by a script after the
onload event completes with the value="assertive" and the element has a child DOM
element node with text content that is hidden using CSS visibility="hidden". After
the aria-live attribute is added, the child DOM element node with text content has
the CSS display property changed to visibility="visible".</p>
<script type="text/javascript">
function showElement() {
var node = document.getElementById('TEST_ID_2');
node.setAttribute('style', 'visibility: visible');
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
node.setAttribute('aria-live', 'assertive');
setTimeout(showElement,500);
}
function onload() {
setTimeout(addLiveRegion,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 697</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 697</h1>
<div id="TEST_ID_1" aria-live="polite">
TEST TEXT
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is defined in markup with the value="polite"
has a child DOM text node with content. After the onload event completes the child
DOM text node is deleted.</p>
<script type="text/javascript">
function deleteChildNodes() {
var node = document.getElementById('TEST_ID_1');
while (node.firstChild) node.removeChild(node.firstChild);
}
function onload() {
setTimeout(deleteChildNodes,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 698</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 698</h1>
<div id="TEST_ID_1" aria-live="assertive">
TEST TEXT
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is defined in markup with the value="assertive"
has a child DOM text node with content. After the onload event completes the child DOM
text node is deleted.</p>
<script type="text/javascript">
function deleteChildNodes() {
var node = document.getElementById('TEST_ID_1');
while (node.firstChild) node.removeChild(node.firstChild);
}
function onload() {
setTimeout(deleteChildNodes,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 699</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 699</h1>
<div id="TEST_ID_1" aria-live="polite">
<div>TEST TEXT</div>
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is defined in markup with the value="polite"
has a child DOM element node that contains text content. After the onload event completes
the child DOM element node is deleted.</p>
<script type="text/javascript">
function deleteChildNodes() {
var node = document.getElementById('TEST_ID_1');
while (node.firstChild) node.removeChild(node.firstChild);
}
function onload() {
setTimeout(deleteChildNodes,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 700</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 700</h1>
<div id="TEST_ID_1" aria-live="assertive">
<div>TEST TEXT</div>
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is defined in markup with the
value="assertive" has a child DOM element node that contains text content.
After the onload event completes the child DOM element node is deleted.</p>
<script type="text/javascript">
function deleteChildNodes() {
var node = document.getElementById('TEST_ID_1');
while (node.firstChild) node.removeChild(node.firstChild);
}
function onload() {
setTimeout(deleteChildNodes,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 701</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 701</h1>
<div id="TESTZ" aria-live="polite">
Text before: <span id="TEST_ID_1">TEST TEXT</span> :text after
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is defined in markup with
the value="polite" has a child DOM element node that contains text
content. After the onload event completes the CSS 'display' property
of the child DOM element node is changed to display="none".</p>
<script type="text/javascript">
function hideElement() {
var node = document.getElementById('TEST_ID_1');
node.setAttribute('style', 'display: none');
}
function onload() {
setTimeout(hideElement,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 702</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 702</h1>
<div id="TESTZ" aria-live="assertive">
Text before: <span id="TEST_ID_1">TEST TEXT</span> :text after
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is defined in markup with the value="assertive"
has a child DOM element node that contains text content. After the onload event completes
the CSS 'display' property of the child DOM element node is changed to display="none".</p>
<script type="text/javascript">
function hideElement() {
var node = document.getElementById('TEST_ID_1');
node.setAttribute('style', 'display: none');
}
function onload() {
setTimeout(hideElement,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 703</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 703</h1>
<div id="TESTZ" aria-live="polite">
Text before: <span id="TEST_ID_1">TEST TEXT</span> :text after
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is defined in markup with the value="polite"
has a child DOM element node that contains text content. After the onload event
completes the CSS 'visibility' property of the child DOM element node is changed
to visibility="hidden".</p>
<script type="text/javascript">
function hideElement() {
var node = document.getElementById('TEST_ID_1');
node.setAttribute('style', 'visibility: hidden');
}
function onload() {
setTimeout(hideElement,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 704</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 704</h1>
<div id="TESTZ" aria-live="assertive">
Text before: <span id="TEST_ID_1">TEST TEXT</span> :text after
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is defined in markup with the value="assertive"
has a child DOM element node that contains text content. After the onload event completes
the CSS 'visibility' property of the child DOM element node is changed to visibility="hidden".</p>
<script type="text/javascript">
function hideElement() {
var node = document.getElementById('TEST_ID_1');
node.setAttribute('style', 'visibility: hidden');
}
function onload() {
setTimeout(hideElement,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 705</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 705</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is added to the document by a script
during the onload event with the value="polite" and the element has a child DOM
text node with content. After the onload event completes the child DOM text
node is deleted.</p>
<script type="text/javascript">
function deleteChildNodes() {
var node = document.getElementById('TEST_ID_2');
while (node.firstChild) node.removeChild(node.firstChild);
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
element_node.setAttribute('aria-live', 'polite');
var text_node = document.createTextNode('TEST TEXT');
element_node.appendChild(text_node);
node.appendChild(element_node);
setTimeout(deleteChildNodes,500);
}
function onload() {
addLiveRegion();
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 706</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 706</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is added to the document by a script during the onload
event with the value="assertive" and the element has a child DOM text node with content. After
the onload event completes the child DOM text node is deleted.</p>
<script type="text/javascript">
function deleteChildNodes() {
var node = document.getElementById('TEST_ID_2');
while (node.firstChild) node.removeChild(node.firstChild);
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var element_node = document.createElement('div');
element_node.setAttribute('aria-live', 'assertive');
element_node.setAttribute('id', 'TEST_ID_2');
var text_node = document.createTextNode('TEST TEXT');
element_node.appendChild(text_node);
node.appendChild(element_node);
setTimeout(deleteChildNodes,1000);
}
function onload() {
addLiveRegion();
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 707</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 707</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is added to the document by a script
during the onload event with the value="polite" and the element has a child
DOM element node that contains text content. After the onload event completes
the child DOM element node is deleted.</p>
<script type="text/javascript">
function deleteChildNodes() {
var node = document.getElementById('TEST_ID_2');
while (node.firstChild) node.removeChild(node.firstChild);
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var live_node = document.createElement('div');
live_node.setAttribute('aria-live', 'polite');
live_node.setAttribute('id', 'TEST_ID_2');
var element_node = document.createElement('div');
var text_node = document.createTextNode('TEST TEXT');
element_node.appendChild(text_node);
live_node.appendChild(element_node);
node.appendChild(live_node);
setTimeout(deleteChildNodes,1000);
}
function onload() {
addLiveRegion();
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 708</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 708</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is added to the document by a script during
the onload event with the value="assertive" and the element has a child DOM element
node that contains text content. After the onload event completes the child DOM
element node is deleted.</p>
<script type="text/javascript">
function deleteChildNodes() {
var node = document.getElementById('TEST_ID_2');
while (node.firstChild) node.removeChild(node.firstChild);
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var live_node = document.createElement('div');
live_node.setAttribute('aria-live', 'assertive');
live_node.setAttribute('id', 'TEST_ID_2');
var element_node = document.createElement('div');
var text_node = document.createTextNode('TEST TEXT');
element_node.appendChild(text_node);
live_node.appendChild(element_node);
node.appendChild(live_node);
setTimeout(deleteChildNodes,1000);
}
function onload() {
addLiveRegion();
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 709</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 709</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is added to the document by a script during
the onload event with the value="polite" and the element has a child DOM element node
that contains text content. After the onload event completes the CSS 'display'
property of the child DOM element node is changed to display="none".</p>
<script type="text/javascript">
function hideElement() {
var node = document.getElementById('TEST_ID_2');
node.setAttribute('style', 'display: none');
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var live_node = document.createElement('div');
live_node.setAttribute('aria-live', 'polite');
live_node.setAttribute('id','TESTZ');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
var text_node = document.createTextNode('TEST TEXT');
element_node.appendChild(text_node);
live_node.appendChild(element_node);
node.appendChild(live_node);
setTimeout(hideElement,1000);
}
function onload() {
addLiveRegion();
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 710</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 710</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is added to the document by a script during
the onload event with the value="assertive" and the element has a child DOM element
node that contains text content. After the onload event completes the CSS 'display'
property of the child DOM element node is changed to display="none".</p>
<script type="text/javascript">
function hideElement() {
var node = document.getElementById('TEST_ID_2');
node.setAttribute('style', 'display: none');
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var live_node = document.createElement('div');
live_node.setAttribute('aria-live', 'assertive');
live_node.setAttribute('id','TESTZ');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
var text_node = document.createTextNode('TEST TEXT');
element_node.appendChild(text_node);
live_node.appendChild(element_node);
node.appendChild(live_node);
setTimeout(hideElement,1000);
}
function onload() {
addLiveRegion();
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 711</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 711</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is added to the document by a script
during the onload event with the value="polite" and the element has a child
DOM element node that contains text content. After the onload event completes
the CSS 'visibility' property of the child DOM element node is changed
to visibility="hidden".</p>
<script type="text/javascript">
function hideElement() {
var node = document.getElementById('TEST_ID_2');
node.setAttribute('style', 'visibility: hidden');
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var live_node = document.createElement('div');
live_node.setAttribute('aria-live', 'polite');
live_node.setAttribute('id', 'TESTZ');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
var text_node = document.createTextNode('TEST TEXT');
element_node.appendChild(text_node);
live_node.appendChild(element_node);
node.appendChild(live_node);
setTimeout(hideElement,1000);
}
function onload() {
addLiveRegion();
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 712</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 712</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>An element with an aria-live attribute is added to the document by a
script during the onload event with the value="assertive" and the element
has a child DOM element node that contains text content. After the onload
event completes the CSS 'visibility' property of the child DOM element
node is changed to visibility="hidden".</p>
<script type="text/javascript">
function hideElement() {
var node = document.getElementById('TEST_ID_2');
node.setAttribute('style', 'visibility: hidden');
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var live_node = document.createElement('div');
live_node.setAttribute('aria-live', 'assertive');
live_node.setAttribute('id', 'TESTZ');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
var text_node = document.createTextNode('TEST TEXT');
element_node.appendChild(text_node);
live_node.appendChild(element_node);
node.appendChild(live_node);
setTimeout(hideElement,1000);
}
function onload() {
addLiveRegion();
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 713</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 713</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>The aria-live attribute is added to an element in the document by a
script after the onload event completes with the value="polite" and
the element has a child DOM text node with content. After the
aria-live attribute is added, the child DOM text node is deleted.</p>
<script type="text/javascript">
function deleteChildNodes() {
var node = document.getElementById('TEST_ID_2');
while (node.firstChild) node.removeChild(node.firstChild);
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var live_node = document.createElement('div');
live_node.setAttribute('aria-live', 'polite');
live_node.setAttribute('id', 'TESTZ');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
var text_node = document.createTextNode('TEST TEXT');
element_node.appendChild(text_node);
live_node.appendChild(element_node);
node.appendChild(live_node);
setTimeout(deleteChildNodes,1000);
}
function onload() {
setTimeout(addLiveRegion, 1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 714</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 714</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>The aria-live attribute is added to an element in the document by a
script after the onload event completes with the value="assertive"
and the element has a child DOM text node with content. After the
aria-live attribute is added, the child DOM text node is deleted.</p>
<script type="text/javascript">
function deleteChildNodes() {
var node = document.getElementById('TEST_ID_2');
while (node.firstChild) node.removeChild(node.firstChild);
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var live_node = document.createElement('div');
live_node.setAttribute('aria-live', 'assertive');
live_node.setAttribute('id', 'TESTZ');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
var text_node = document.createTextNode('TEST TEXT');
element_node.appendChild(text_node);
live_node.appendChild(element_node);
node.appendChild(live_node);
setTimeout(deleteChildNodes,500);
}
function onload() {
setTimeout(addLiveRegion,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 715</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 715</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>The aria-live attribute is added to an element in the document by a script
after the onload event completes with the value="polite" and the element has
a child DOM element node that contains text content. After the aria-live
attribute is added, the child DOM element node is deleted.</p>
<script type="text/javascript">
function deleteChildNodes() {
var node = document.getElementById('TEST_ID_1');
while (node.firstChild) node.removeChild(node.firstChild);
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
node.setAttribute('aria-live', 'polite');
var text_node = document.createTextNode('TEST TEXT');
node.appendChild(text_node);
setTimeout(deleteChildNodes,500);
}
function onload() {
setTimeout(addLiveRegion,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 716</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 716</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>The aria-live attribute is added to an element in the document by a script
after the onload event completes with the value="polite" and the element has
a child DOM element node that contains text content. After the aria-live
attribute is added, the child DOM element node is deleted.</p>
<script type="text/javascript">
function deleteChildNodes() {
var node = document.getElementById('TEST_ID_1');
while (node.firstChild) node.removeChild(node.firstChild);
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
node.setAttribute('aria-live', 'assertive');
var text_node = document.createTextNode('TEST TEXT');
node.appendChild(text_node);
setTimeout(deleteChildNodes,500);
}
function onload() {
setTimeout(addLiveRegion,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 717</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 717</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>The aria-live attribute is added to an element in the document by a script
after the onload event completes with the value="polite" and the element has
a child DOM element node that contains text content. After the aria-live
attribute is added, the CSS 'display' property of the child DOM element
node is changed to display="none".</p>
<script type="text/javascript">
function hideElement() {
var node = document.getElementById('TEST_ID_2');
node.style.display = "none";
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var live_node = document.createElement('div');
live_node.setAttribute('aria-live', 'polite');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
var text_node = document.createTextNode('TEST TEXT');
element_node.appendChild(text_node);
live_node.appendChild(element_node);
node.appendChild(live_node);
setTimeout(hideElement,500);
}
function onload() {
setTimeout(addLiveRegion,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 718</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 718</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>The aria-live attribute is added to an element in the document by a script
after the onload event completes with the value="assertive" and the element has
a child DOM element node that contains text content. After the aria-live
attribute is added, the CSS 'display' property of the child DOM element
node is changed to display="none".</p>
<script type="text/javascript">
function hideElement() {
var node = document.getElementById('TEST_ID_2');
node.style.display = "none";
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var live_node = document.createElement('div');
live_node.setAttribute('aria-live', 'assertive');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
var text_node = document.createTextNode('TEST TEXT');
element_node.appendChild(text_node);
live_node.appendChild(element_node);
node.appendChild(live_node);
setTimeout(hideElement,500);
}
function onload() {
setTimeout(addLiveRegion,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 719</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 719</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>The aria-live attribute is added to an element in the document by a
script after the onload event completes with the value="polite" and
the element has a child DOM element node that contains text content.
After the aria-live attribute is added, the CSS 'visibility' property
of the child DOM element node is changed to visibility="hidden".</p>
<script type="text/javascript">
function hideElement() {
var node = document.getElementById('TEST_ID_2');
node.style.visibility = "hidden";
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var live_node = document.createElement('div');
live_node.setAttribute('aria-live', 'polite');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
var text_node = document.createTextNode('TEST TEXT');
element_node.appendChild(text_node);
live_node.appendChild(element_node);
node.appendChild(live_node);
setTimeout(hideElement,500);
}
function onload() {
setTimeout(addLiveRegion,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Test Case 720</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>ARIA 1.0 Test Case 720</h1>
<div id="TEST_ID_1">
</div>
<h2>Description</h2>
<p>The aria-live attribute is added to an element in the document by a
script after the onload event completes with the value="assertive" and
the element has a child DOM element node that contains text content.
After the aria-live attribute is added, the CSS 'visibility' property
of the child DOM element node is changed to visibility="hidden".</p>
<script type="text/javascript">
function hideElement() {
var node = document.getElementById('TEST_ID_2');
node.style.visibility = "hidden";
}
function addLiveRegion() {
var node = document.getElementById('TEST_ID_1');
var live_node = document.createElement('div');
live_node.setAttribute('aria-live', 'assertive');
var element_node = document.createElement('div');
element_node.setAttribute('id', 'TEST_ID_2');
var text_node = document.createTextNode('TEST TEXT');
element_node.appendChild(text_node);
live_node.appendChild(element_node);
node.appendChild(live_node);
setTimeout(hideElement,500);
}
function onload() {
setTimeout(addLiveRegion,1000);
}
window.addEventListener('load', onload);
</script>
</body>
</html>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test 772
</title>
</head>
<body>
<img src="foo.jpg" id="test" alt="test" aria-describedby="t1">
<div id="t1">foo</div>
</body>
</html>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test 773
</title>
</head>
<body>
<img src="foo.jpg" id="test" alt="test" aria-describedby="t1">
<div id="t1" style="display:none">foo</div>
</body>
</html>

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test 774</title>
</head>
<body>
<img src="foo.jpg" id="test" alt="test" aria-describedby="t1">
<span id="t1" role="presentation">foo</span>
</body>
</html>

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test 773
</title>
</head>
<body>
<img src="foo.jpg" id="test" alt="test" aria-describedby="t1">
<div id="t1" style="visibility:hidden">foo</div>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A &lt;div&gt; with role "button" followed by a modification to the value of "checkbox".</title>
<script type="text/javascript">
function changeRole (/* Element */ element, /* String */ newRole) {
element.setAttribute ('role', newRole);
element.innerHTML = "This &lt;div&gt; has role '" + newRole + "'";
}
</script>
</head>
<body>
<div role="button" id="test" tabindex="0" onclick="changeRole (this, 'checkbox');" onkeydown="changeRole (this, 'checkbox');">This &lt;div&gt; has role 'button'</div>
<p>
<button onclick="changeRole (document.getElementById ('test'), 'checkbox')" type="button">Change Role</button>
<button onclick="window.location.reload()" type="button">Reload Page</button>
</p>
</body>
</html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A &lt;div&gt; with role "button" followed by removal of the element and its children and an insertion of a new div having role="checkbox"</title>
<script type="text/javascript">
function changeRoleByRemoval (/* Element */ element, /* String */ newRole) {
var parent = element.parentNode;
if (parent) {
parent.removeChild (element);
var div = document.createElement ('div');
div.setAttribute ('role', newRole);
div.setAttribute ('id', 'test');
div.setAttribute ('tabindex', '0');
div.setAttribute ('onclick', 'changeRoleByRemoval (this, "checkbox");');
div.setAttribute ('onkeydown', 'changeRoleByRemoval (this, "checkbox");');
div.innerHTML = "This &lt;div&gt; has role '" + newRole + "'";
parent.appendChild (div);
}
}
</script>
</head>
<body>
<div>
<div role="button" id="test" tabindex="0" onclick="changeRoleByRemoval (this, 'checkbox');" onkeydown="changeRoleByRemoval (this, 'checkbox');">This &lt;div&gt; has role 'button'</div>
</div>
<p>
<button onclick="changeRoleByRemoval (document.getElementById ('test'), 'checkbox')" type="button">Change Role</button>
<button onclick="window.location.reload()" type="button">Reload Page</button>
</p>
</body>
</html>

View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A &lt;div&gt; with role role="listbox" aria-busy="true", but no "option" descendants.</title>
</head>
<body>
<div id="test" role="listbox" aria-busy="true">
</div>
</body>
</html>

View file

@ -0,0 +1,84 @@
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>In a &lt;div&gt; element with role="combobox" and aria-autocomplete="none", change values of the combobox by typing.</title>
<style type="text/css">
.hasFocus { border: 2px solid red; }
</style>
<script type="text/javascript">
var DEL = 8;
var BACK_SPACE = 72;
var comboInfo = {};
function initComboInfo() {
comboInfo.comboBox = document.getElementById ('test');
comboInfo.textEntry = document.getElementById ('textEntry');
var active = document.getElementById (comboInfo.comboBox.getAttribute ('aria-activedescendant'));
comboInfo.options = active.parentElement.children;
return active;
}
function matchOption(/* String */ entryVal) {
var theOption = null;
// Check only if entryVal is not empty.
//
if (entryVal != null && entryVal.length != 0) {
for (var i = 0; i < comboInfo.options.length; i++) {
var anOption = comboInfo.options[i];
var optionText = anOption.innerHTML.toLowerCase();
if (optionText.indexOf (entryVal) == 0) {
theOption = anOption;
break;
}
}
}
return theOption;
}
function updateActive (/* Element */ newActive) {
var oldActive = document.getElementById (comboInfo.comboBox.getAttribute ('aria-activedescendant'));
if (oldActive != newActive) {
comboInfo.comboBox.setAttribute ('aria-activedescendant', newActive.getAttribute ('id'));
oldActive.removeAttribute ('class');
newActive.setAttribute ('class', 'hasFocus');
}
}
function doOnload() {
var active = initComboInfo();
active.setAttribute ('class', 'hasFocus');
comboInfo.textEntry.value = active.innerHTML;
comboInfo.textEntry.focus();
}
function handleTyping (event) {
/* NOTE: With respect to IE, assumes IE9 as per CR criteria (http://www.w3.org/WAI/ARIA/1.0/CR/implementation-report) */
/* NOTE: Supports deletion only from the end of the text INPUT value */
var stringSoFar = event.target.value;
if (event.which == DEL || event.which == BACK_SPACE)
stringSoFar = stringSoFar.slice(0, stringSoFar.length-1);
else
stringSoFar = stringSoFar + String.fromCharCode (event.which);
var matchedOption = matchOption (stringSoFar.toLowerCase());
if (matchedOption != null)
updateActive (matchedOption);
}
</script>
</head>
<body onload="doOnload();">
<div id="test" role="combobox" aria-expanded="true" aria-label="Tag" aria-autocomplete="none" aria-activedescendant="o1">
<input id="textEntry" role="textbox" aria-owns="owned_listbox" onkeypress="handleTyping(event);" type="text">
<ul role="listbox" id="owned_listbox" style="list-style-type: none;">
<li role="option" id="o1">Zebra</li>
<li role="option" id="o2">Zoom</li>
<li role="option" id="o3">Zeta</li>
<li role="option" id="o4">Zaphod</li>
<li role="option" id="o5">Alpha</li>
</ul>
</div>
</body></html>

View file

@ -0,0 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>In a &lt;div&gt; element with role="combobox" and aria-autocomplete="inline", change values of the combobox by adjusting the up and down arrow keys with focus on the textfield in the combobox.</title>
<style type="text/css">
.hasFocus { border: 2px solid red; }
</style>
<script type="text/javascript">
var UP = 38;
var DOWN = 40;
comboInfo = {};
function toArray (/* NodeList */ nodeList) {
var result = [];
for (var i=0; i < nodeList.length; i++) {
result[i] = nodeList[i];
}
return result;
}
function initComboInfo() {
comboInfo.comboBox = document.getElementById ('test');
comboInfo.textEntry = document.getElementById ('testEntry');
var active = document.getElementById (comboInfo.comboBox.getAttribute ('aria-activedescendant'));
comboInfo.options = toArray (active.parentElement.children);
return active;
}
function handleArrow (/* Event */ event) {
/* NOTE: With respect to IE, assumes IE9 as per CR criteria (http://www.w3.org/WAI/ARIA/1.0/CR/implementation-report) */
var active = document.getElementById (comboInfo.comboBox.getAttribute ('aria-activedescendant'));
var currentIndex = comboInfo.options.indexOf (active);
var nextIndex = currentIndex;
if (event.which == DOWN) {
nextIndex = (currentIndex + 1) % comboInfo.options.length;
}
else if (event.which == UP) {
nextIndex = currentIndex - 1;
if (nextIndex < 0)
nextIndex = comboInfo.options.length - 1;
}
if (nextIndex != currentIndex) {
active.removeAttribute ('class');
active = comboInfo.options[nextIndex];
comboInfo.comboBox.setAttribute ('aria-activedescendant', active.getAttribute ('id'));
active.setAttribute ('class', 'hasFocus');
event.target.value = active.innerHTML;
}
}
function doOnload() {
var active = initComboInfo();
comboInfo.textEntry.value = active.innerHTML;
comboInfo.textEntry.focus();
active.setAttribute ('class', 'hasFocus');
}
</script>
</head>
<body onload='doOnload()'>
<div id="test" role="combobox" aria-expanded="true" aria-label="Tag" aria-autocomplete="inline" aria-activedescendant="o1">
<input id="testEntry" type="text" role="textbox" aria-owns="owned_listbox" onkeydown='handleArrow (event)'>
<ul role="listbox" id="owned_listbox" style="list-style-type: none;">
<li role="option" id="o1">Zebra</li>
<li role="option" id="o2">Zoom</li>
<li role="option" id="o3">Zeta</li>
<li role="option" id="o4">Zaphod</li>
</ul>
</div>
</body>
</html>

View file

@ -0,0 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>In a &lt;div&gt; element with role="combobox" and aria-autocomplete="both", change values of the combobox by adjusting the up and down arrow keys with focus on the textfield in the combobox.</title>
<style type="text/css">
.hasFocus { border: 2px solid red; }
</style>
<script type="text/javascript">
var UP = 38;
var DOWN = 40;
comboInfo = {};
function toArray (/* NodeList */ nodeList) {
var result = [];
for (var i=0; i < nodeList.length; i++) {
result[i] = nodeList[i];
}
return result;
}
function initComboInfo() {
comboInfo.comboBox = document.getElementById ('test');
comboInfo.textEntry = document.getElementById ('testEntry');
var active = document.getElementById (comboInfo.comboBox.getAttribute ('aria-activedescendant'));
comboInfo.options = toArray (active.parentElement.children);
return active;
}
function handleArrow (/* Event */ event) {
/* NOTE: With respect to IE, assumes IE9 as per CR criteria (http://www.w3.org/WAI/ARIA/1.0/CR/implementation-report) */
var active = document.getElementById (comboInfo.comboBox.getAttribute ('aria-activedescendant'));
var currentIndex = comboInfo.options.indexOf (active);
var nextIndex = currentIndex;
if (event.which == DOWN) {
nextIndex = (currentIndex + 1) % comboInfo.options.length;
}
else if (event.which == UP) {
nextIndex = currentIndex - 1;
if (nextIndex < 0)
nextIndex = comboInfo.options.length - 1;
}
if (nextIndex != currentIndex) {
active.removeAttribute ('class');
active = comboInfo.options[nextIndex];
comboInfo.comboBox.setAttribute ('aria-activedescendant', active.getAttribute ('id'));
active.setAttribute ('class', 'hasFocus');
event.target.value = active.innerHTML;
}
}
function doOnload() {
var active = initComboInfo();
comboInfo.textEntry.value = active.innerHTML;
comboInfo.textEntry.focus();
active.setAttribute ('class', 'hasFocus');
}
</script>
</head>
<body onload='doOnload()'>
<div id="test" role="combobox" aria-expanded="true" aria-label="Tag" aria-autocomplete="both" aria-activedescendant="o2">
<input id="testEntry" type="text" role="textbox" aria-owns="owned_listbox" onkeydown='handleArrow (event)'>
<ul role="listbox" id="owned_listbox" style="list-style-type: none;">
<li role="option" id="o1">Zebra</li>
<li role="option" id="o2">Zoom</li>
<li role="option" id="o3">Zeta</li>
<li role="option" id="o4">Zaphod</li>
</ul>
</div>
</body>
</html>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A &lt;div&gt; with role="list" and a child div with role="group" who has a child of role="button".</title>
</head>
<body>
<div id="test" role="list">
<div id="listChild" role="group">
<span id="groupChild" role="button">List <abbr title="containing"></abbr> group <abbr title="containing"></abbr> button</span>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A &lt;div&gt;with role="menu" and a child div with role="group" who has a child of role="button"..</title>
</head>
<body>
<div id="test" role="menu">
<div id="menuChild" role="group">
<span id="groupChild" role="button">Menu <abbr title="containing"></abbr> group <abbr title="containing"></abbr> button</span>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A &lt;div&gt; with role="tree" and a child div with role="group" who has a child of role="button"</title>
</head>
<body>
<div id="test" role="tree">
<div id="treeChild" role="group">
<span id="groupChild" role="button">Tree <abbr title="containing"></abbr> group <abbr title="containing"></abbr> button</span>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A &lt;div&gt; with role="grid" and a child div with role="rowgroup" who has a child of role="button".</title>
</head>
<body>
<div id="test" role="grid">
<div id="gridChild" role="rowgroup">
<span id="rowgroupChild" role="button">Grid <abbr title="containing"></abbr> rowgroup <abbr title="containing"></abbr> button</span>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A page with two div elements that have role="toolbar" but not aria-label property.</title>
</head>
<body>
<div id="test" role="toolbar">Toolbar 1</div>
<div id="test2" role="toolbar">Toolbar 2</div>
</body>
</html>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A page with one div element that has role="toolbar" but not aria-label property.</title>
</head>
<body>
<div id="test" role="toolbar">Toolbar 1</div>
</body>
</html>

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A div element with style="display:none" has aria-hidden="true", and then script sets style to "display: block".</title>
<script type="text/javascript">
function replaceStyle (/* Element */ element, /* String */ selector, /* String */ newValue) {
element.setAttribute ('style', selector + ':' + newValue);
if (newValue == 'block')
element.setAttribute ('aria-hidden', 'false');
else if (newValue == 'none')
element.setAttribute ('aria-hidden', 'true');
}
</script>
</head>
<body>
<div id="test" aria-hidden="true" style="display:none;">This &lt;div&gt;'s style switched from 'display:none' to 'display:block'. It's <code>aria-hidden</code> was simultaneously switched to 'false'.</div>
<p>
<button onclick="replaceStyle (document.getElementById ('test'), 'display', 'block')" type="button">Change to 'display:block'</button>
<button onclick="replaceStyle (document.getElementById ('test'), 'display', 'none')" type="button">Change to 'display:none'</button>
<button onclick="window.location.reload()" type="button">Reload Page</button>
</p>
</body>
</html>

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A page with a div element with id="owned1" is referenced by two div elements that each have aria-owns="owned1".</title>
</head>
<body>
<div id="owner1" aria-owns="owned1">First owner of owned1</div>
<div id="owner2" aria-owns="owned1">Second owner of owned1</div>
<div id="owned1">I am owned1</div>
</body>
</html>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>An element with aria-setsize=5 has aria-posinset=6.</title>
</head>
<body>
<h2 id="label_fruit"> Available Fruit </h2>
<ul role="listbox" aria-labelledby="label_fruit">
<li role="option" aria-setsize="5" aria-posinset="6" id="test"> apples </li>
<li role="option" aria-setsize="5" aria-posinset="2"> bananas </li>
<li role="option" aria-setsize="5" aria-posinset="3"> cantaloupes </li>
<li role="option" aria-setsize="5" aria-posinset="4"> dates </li>
<li role="option" aria-setsize="5" aria-posinset="5"> kumquat </li>
</ul>
</body>
</html>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>An element with aria-setsize=1 has aria-posinset=5</title>
</head>
<body>
<h2 id="label_fruit"> Available Fruit </h2>
<ul role="listbox" aria-labelledby="label_fruit">
<li role="option" aria-setsize="1" aria-posinset="5" id="test"> apples </li>
<li role="option" aria-setsize="5" aria-posinset="2"> bananas </li>
<li role="option" aria-setsize="5" aria-posinset="3"> cantaloupes </li>
<li role="option" aria-setsize="5" aria-posinset="4"> dates </li>
<li role="option" aria-setsize="5" aria-posinset="5"> kumquat </li>
</ul>
</body>
</html>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>An element with role button without the aria-pressed state.</title>
</head>
<body>
<div id="test" role="button">This div has role button</div>
</body>
</html>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>An element with role button with an aria-pressed state of "true".</title>
</head>
<body>
<div id="test" role="button" aria-pressed='true'>This div has role button, with aria-pressed='true'</div>
</body>
</html>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Div with role="combobox" and aria-autocomplete="list"</title>
</head>
<body>
<div role="combobox" aria-expanded="true" aria-label="Tag"
aria-autocomplete="list" aria-activedescendant="selected_option">
<input type="text" role="textbox" aria-owns="owned_listbox" />
<ul role="listbox" id="owned_listbox">
<li role="option">Zebra</li>
<li role="option" id="selected_option" aria-selected="true">Zoom</li>
</ul>
</div>
</body>
</html>

View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Input with role="combobox" and aria-autocomplete="list"</title>
</head>
<body>
<input tabindex="0" type="text" id="test" role="combobox" aria-label="Tag" aria-expanded="true"
aria-autocomplete="list" aria-owns="owned_listbox" aria-activedescendant="selected_option" />
<ul role="listbox" id="owned_listbox">
<li role="option">Zebra</li>
<li role="option" id="selected_option" aria-selected="true">Zoom</li>
</ul>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Native checkbox with aria-checked that conflicts with native checked</title>
</head>
<body>
<form>
<input type="checkbox" role="checkbox" checked="checked" aria-checked="false" id="test" value="Placeholder content" />
</form>
</body>
</html>

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Native checkbox with aria-checked but no role</title>
</head>
<body>
<form>
<input type="checkbox" checked="checked" aria-checked="mixed" id="test" value="Placeholder content" />
</form>
</body>
</html>

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Native checkbox with aria-checked with role</title>
</head>
<body>
<form>
<input type="checkbox" checked="checked" role="checkbox" aria-checked="mixed" id="test" value="Placeholder content" />
</form>
</body>
</html>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>valuetext</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
<body>
<input id="test" type="range" min="0" max="100" value="75" aria-valuetext="awesome">
</body>
</html>

View file

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Live Region Event Test Case: Add text content</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div#TEST_ID {
margin: 0.5em;
padding: 0.25em;
border: medium gray solid;
width: 10em;
}
</style>
</head>
<body>
<h1>ARIA 1.0 Live Region Event Test Case: Add text content</h1>
<div id="TEST_ID" aria-live="assertive" aria-label="charlotte">
</div>
<button onclick="tryAgain()">Try Again</button>
<h2>Description</h2>
<p>An element with an aria-live attribute with the value "assertive" has a text content added
1.5 seconds after the document is loaded.</p>
<h2>Expected Results</h2>
<dl>
<dt>ATK/AT-SPI</dt>
<dd>ATK/AT-SPIevent: text_changed::insert event</dd>
<dt>AXAPI</dt>
<dd>AXLiveRegionChanged notification</dd>
<dt>MSAA + IAccessible2</dt>
<dd>IAccessible2: IA2_EVENT_TEXT_INSERTED event</dd>
<dt>MSAA + UIA Express</dt>
<dd>TextPattern..::.TextChangedEvent event</dd>
</dl>
<script type="text/javascript">
function tryAgain() {
var node = document.getElementById('TEST_ID');
while (node.firstChild) node.removeChild(node.firstChild);
onLoad();
}
function addText () {
var node = document.getElementById('TEST_ID');
var text_node = document.createTextNode('TEST TEXT ADDED');
node.appendChild(text_node);
}
function onLoad() {
setTimeout(addText,1500);
}
window.addEventListener('load', onLoad);
</script>
</body>
</html>

View file

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Live Region Event Test Case: Delete text content</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div#TEST_ID {
margin: 0.5em;
padding: 0.25em;
border: medium gray solid;
width: 10em;
}
</style>
</head>
<body>
<h1>ARIA 1.0 Live Region Event Test Case: Delete text content</h1>
<div id="TEST_ID" aria-live="polite" >
TEST TEXT
</div>
<button onclick="tryAgain()">Try Again</button>
<h2>Description</h2>
<p>An element with an aria-live attribute with the value "polite" has a text content deleted
1.5 seconds after the document is loaded.</p>
<h2>Expected Results</h2>
<dl>
<dt>ATK/AT-SPI</dt>
<dd>ATK/AT-SPIevent: text_changed::delete event</dd>
<dt>AXAPI</dt>
<dd></dd>
<dd>AXLiveRegionChanged notification</dd>
<dt>MSAA + IAccessible2</dt>
<dd>IAccessible2: IA2_EVENT_TEXT_REMOVED event</dd>
<dt>MSAA + UIA Express</dt>
<dd>TextPattern..::.TextChangedEvent event</dd>
</dl>
<script type="text/javascript">
function tryAgain() {
addText()
onLoad();
}
function clearText() {
var node = document.getElementById('TEST_ID');
while (node.firstChild) node.removeChild(node.firstChild);
}
function addText () {
var node = document.getElementById('TEST_ID');
var text_node = document.createTextNode('TEST TEXT');
node.appendChild(text_node);
}
function onLoad() {
setTimeout(clearText,1500);
}
window.addEventListener('load', onLoad);
</script>
</body>
</html>

View file

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Live Region Event Test Case: Change text content</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div#TEST_ID {
margin: 0.5em;
padding: 0.25em;
border: medium gray solid;
width: 10em;
}
</style>
</head>
<body>
<h1>ARIA 1.0 Live Region Event Test Case: Change text content</h1>
<div id="TEST_ID" aria-live="assertive">
TEST TEXT 1
</div>
<button onclick="tryAgain()">Try Again</button>
<h2>Description</h2>
<p>An element with an aria-live attribute with the value "assertive" has a text content changed
1.5 seconds after the document is loaded.</p>
<h2>Expected Results</h2>
<dl>
<dt>ATK/AT-SPI</dt>
<dd>ATK/AT-SPIevent: text_changed::delete event followed by text_changed::insert event</dd>
<dt>AXAPI</dt>
<dd></dd>
<dd>AXLiveRegionChanged notification</dd>
<dt>MSAA + IAccessible2</dt>
<dd>IAccessible2: IA2_EVENT_TEXT_REMOVED event followed by IA2_EVENT_TEXT_INSERTED event</dd>
<dt>MSAA + UIA Express</dt>
<dd>TextPattern..::.TextChangedEvent event followed by another TextPattern..::.TextChangedEvent event</dd>
</dl>
<script type="text/javascript">
function tryAgain() {
changeText('TEST TEXT 1')
onLoad();
}
function changeText(str) {
var node = document.getElementById('TEST_ID');
while (node.firstChild) node.removeChild(node.firstChild);
if (typeof str !== 'string') str = 'changed test text 2';
addText(str)
}
function addText (str) {
var node = document.getElementById('TEST_ID');
var text_node = document.createTextNode(str);
node.appendChild(text_node);
}
function onLoad() {
setTimeout(changeText,1500);
}
window.addEventListener('load', onLoad);
</script>
</body>
</html>

View file

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Live Region Event Test Case: Add text content (ALERT role)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div#TEST_ID {
margin: 0.5em;
padding: 0.25em;
border: medium gray solid;
width: 20em;
}
</style>
</head>
<body>
<h1>ARIA 1.0 Live Region Event Test Case: Add text content (ALERT role)</h1>
<div id="TEST_ID" role="alert" >
</div>
<button onclick="tryAgain()">Try Again</button>
<h2>Description</h2>
<p>An element with an role attribute with the value "alert" has a text content added
1.5 seconds after the document is loaded.</p>
<h2>Expected Results</h2>
<dl>
<dt>ATK/AT-SPI</dt>
<dd>ATK/AT-SPIevent: text_changed::insert event</dd>
<dt>AXAPI</dt>
<dd>AXLiveRegionChanged notification</dd>
<dt>MSAA + IAccessible2</dt>
<dd>IAccessible2: IA2_EVENT_TEXT_INSERTED event</dd>
<dt>MSAA + UIA Express</dt>
<dd>TextPattern..::.TextChangedEvent event</dd>
</dl>
<script type="text/javascript">
function tryAgain() {
var node = document.getElementById('TEST_ID');
while (node.firstChild) node.removeChild(node.firstChild);
onLoad();
}
function addText () {
var node = document.getElementById('TEST_ID');
var text_node = document.createTextNode('ALERT ROLE TEST TEXT ADDED');
node.appendChild(text_node);
}
function onLoad() {
setTimeout(addText,1500);
}
window.addEventListener('load', onLoad);
</script>
</body>
</html>

View file

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<title>ARIA 1.0 Live Region Event Test Case: Change text content (LOG role)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div#TEST_ID {
margin: 0.5em;
padding: 0.25em;
border: medium gray solid;
width: 20em;
}
</style>
</head>
<body>
<h1>ARIA 1.0 Live Region Event Test Case: Change text content (LOG role)</h1>
<div id="TEST_ID" role="log">
LOG ROLE TEST TEXT 1
</div>
<button onclick="tryAgain()">Try Again</button>
<h2>Description</h2>
<p>An element with an role attribute with the value "log" has a text content changed
1.5 seconds after the document is loaded.</p>
<h2>Expected Results</h2>
<dl>
<dt>ATK/AT-SPI</dt>
<dd>ATK/AT-SPIevent: text_changed::delete event followed by text_changed::insert event</dd>
<dt>AXAPI</dt>
<dd></dd>
<dd>AXLiveRegionChanged notification</dd>
<dt>MSAA + IAccessible2</dt>
<dd>IAccessible2: IA2_EVENT_TEXT_REMOVED event followed by IA2_EVENT_TEXT_INSERTED event</dd>
<dt>MSAA + UIA Express</dt>
<dd>TextPattern..::.TextChangedEvent event followed by another TextPattern..::.TextChangedEvent event</dd>
</dl>
<script type="text/javascript">
function tryAgain() {
changeText('LOG ROLE TEST TEXT 1')
onLoad();
}
function changeText(str) {
var node = document.getElementById('TEST_ID');
while (node.firstChild) node.removeChild(node.firstChild);
if (typeof str !== 'string') str = 'log role changed test text 2';
addText(str)
}
function addText (str) {
var node = document.getElementById('TEST_ID');
var text_node = document.createTextNode(str);
node.appendChild(text_node);
}
function onLoad() {
setTimeout(changeText,1500);
}
window.addEventListener('load', onLoad);
</script>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show more