2009-12-10 11:45:11 -08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>HTML ul/li element tests</title>
|
|
|
|
<link rel="stylesheet" type="text/css"
|
|
|
|
href="chrome://mochikit/content/tests/SimpleTest/test.css" />
|
|
|
|
|
|
|
|
<script type="application/javascript"
|
|
|
|
src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
|
|
|
|
|
|
|
<script type="application/javascript"
|
2010-09-01 15:09:56 -07:00
|
|
|
src="../common.js"></script>
|
2009-12-10 11:45:11 -08:00
|
|
|
<script type="application/javascript"
|
2010-09-01 15:09:56 -07:00
|
|
|
src="../role.js"></script>
|
2009-12-10 11:45:11 -08:00
|
|
|
|
|
|
|
<script type="application/javascript">
|
|
|
|
function listItemTree(aBulletText, aName, aSubtree)
|
|
|
|
{
|
|
|
|
var obj = {
|
|
|
|
role: ROLE_LISTITEM,
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
role: ROLE_STATICTEXT,
|
|
|
|
name: aBulletText
|
|
|
|
},
|
|
|
|
{
|
|
|
|
role: ROLE_TEXT_LEAF,
|
|
|
|
name: aName
|
|
|
|
}
|
|
|
|
]
|
|
|
|
};
|
|
|
|
|
|
|
|
if (aSubtree)
|
|
|
|
obj.children.push(aSubtree);
|
|
|
|
|
|
|
|
return obj;
|
|
|
|
}
|
|
|
|
|
|
|
|
function doTest()
|
|
|
|
{
|
|
|
|
// list1
|
2010-10-15 08:34:24 -07:00
|
|
|
var discAccTree = {
|
2009-12-10 11:45:11 -08:00
|
|
|
role: ROLE_LIST,
|
|
|
|
children: [
|
2011-03-28 06:59:54 -07:00
|
|
|
new listItemTree(kDiscBulletText, "Oranges"),
|
|
|
|
new listItemTree(kDiscBulletText, "Apples"),
|
|
|
|
new listItemTree(kDiscBulletText, "Bananas")
|
2009-12-10 11:45:11 -08:00
|
|
|
]
|
|
|
|
};
|
|
|
|
|
2010-10-15 08:34:24 -07:00
|
|
|
testAccessibleTree("list1", discAccTree);
|
2009-12-10 11:45:11 -08:00
|
|
|
|
|
|
|
// list2
|
2010-10-15 08:34:24 -07:00
|
|
|
var circleAccTree = {
|
|
|
|
role: ROLE_LIST,
|
|
|
|
children: [
|
2011-03-28 06:59:54 -07:00
|
|
|
new listItemTree(kCircleBulletText, "Oranges"),
|
|
|
|
new listItemTree(kCircleBulletText, "Apples"),
|
|
|
|
new listItemTree(kCircleBulletText, "Bananas")
|
2010-10-15 08:34:24 -07:00
|
|
|
]
|
|
|
|
};
|
|
|
|
|
|
|
|
testAccessibleTree("list2", circleAccTree);
|
|
|
|
|
|
|
|
// list3
|
|
|
|
var squareAccTree = {
|
|
|
|
role: ROLE_LIST,
|
|
|
|
children: [
|
2011-03-28 06:59:54 -07:00
|
|
|
new listItemTree(kSquareBulletText, "Oranges"),
|
|
|
|
new listItemTree(kSquareBulletText, "Apples"),
|
|
|
|
new listItemTree(kSquareBulletText, "Bananas")
|
2010-10-15 08:34:24 -07:00
|
|
|
]
|
|
|
|
};
|
|
|
|
|
|
|
|
testAccessibleTree("list3", squareAccTree);
|
|
|
|
|
|
|
|
// list4
|
|
|
|
var nestedAccTree = {
|
2009-12-10 11:45:11 -08:00
|
|
|
role: ROLE_LIST,
|
|
|
|
children: [
|
|
|
|
new listItemTree("1. ", "Oranges"),
|
|
|
|
new listItemTree("2. ", "Apples"),
|
2010-10-15 08:34:24 -07:00
|
|
|
new listItemTree("3. ", "Bananas", circleAccTree)
|
2009-12-10 11:45:11 -08:00
|
|
|
]
|
|
|
|
};
|
|
|
|
|
2010-10-15 08:34:24 -07:00
|
|
|
testAccessibleTree("list4", nestedAccTree);
|
2009-12-10 11:45:11 -08:00
|
|
|
|
2011-03-28 06:59:54 -07:00
|
|
|
// dl list
|
|
|
|
var tree =
|
2012-04-24 11:35:23 -07:00
|
|
|
{ DEFINITION_LIST: [ // dl
|
|
|
|
{ TERM: [ // dt
|
2011-03-28 06:59:54 -07:00
|
|
|
{ TEXT_LEAF: [] },
|
|
|
|
] },
|
2012-04-24 11:35:23 -07:00
|
|
|
{ DEFINITION: [ // dd
|
2011-03-28 06:59:54 -07:00
|
|
|
{ TEXT_LEAF: [] }
|
|
|
|
] },
|
2012-04-24 11:35:23 -07:00
|
|
|
{ TERM: [ // dt
|
2011-03-28 06:59:54 -07:00
|
|
|
{ TEXT_LEAF: [] }
|
|
|
|
] },
|
2012-04-24 11:35:23 -07:00
|
|
|
{ DEFINITION: [ // dd
|
2011-03-28 06:59:54 -07:00
|
|
|
{ TEXT_LEAF: [] }
|
|
|
|
] }
|
|
|
|
] };
|
|
|
|
|
|
|
|
testAccessibleTree("list5", tree);
|
|
|
|
|
|
|
|
// dl list inside ordered list
|
|
|
|
tree =
|
|
|
|
{ LIST: [ // ol
|
|
|
|
{ LISTITEM: [ // li
|
|
|
|
{ STATICTEXT: [ ] },
|
2012-04-24 11:35:23 -07:00
|
|
|
{ DEFINITION_LIST: [ // dl
|
|
|
|
{ TERM: [ // dt
|
2011-03-28 06:59:54 -07:00
|
|
|
{ TEXT_LEAF: [] }
|
|
|
|
] },
|
2012-04-24 11:35:23 -07:00
|
|
|
{ DEFINITION: [ // dd
|
2011-03-28 06:59:54 -07:00
|
|
|
{ TEXT_LEAF: [] }
|
|
|
|
] }
|
|
|
|
] }
|
|
|
|
] }
|
|
|
|
] };
|
|
|
|
|
|
|
|
testAccessibleTree("list6", tree);
|
|
|
|
|
2012-09-05 23:03:24 -07:00
|
|
|
// li having no display:list-item style
|
|
|
|
var tree =
|
|
|
|
{ LIST: [ // ul
|
|
|
|
{ LISTITEM: [ // li
|
|
|
|
{ TEXT_LEAF: [] },
|
|
|
|
] },
|
|
|
|
{ TEXT_LEAF: [] },
|
|
|
|
{ LISTITEM: [ // li
|
|
|
|
{ TEXT_LEAF: [] }
|
|
|
|
] }
|
|
|
|
] };
|
|
|
|
testAccessibleTree("list7", tree);
|
|
|
|
|
|
|
|
var tree =
|
|
|
|
{ LIST: [ // ul
|
|
|
|
{ LISTITEM: [ // li
|
|
|
|
{ TEXT_LEAF: [] },
|
|
|
|
] },
|
|
|
|
{ LISTITEM: [ // li
|
|
|
|
{ TEXT_LEAF: [] }
|
|
|
|
] }
|
|
|
|
] };
|
|
|
|
testAccessibleTree("list8", tree);
|
|
|
|
|
|
|
|
// span having display:list-item style
|
|
|
|
testAccessibleTree("list9", discAccTree);
|
|
|
|
|
2009-12-10 11:45:11 -08:00
|
|
|
SimpleTest.finish();
|
|
|
|
}
|
|
|
|
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
|
|
addA11yLoadEvent(doTest);
|
|
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
|
|
<a target="_blank"
|
|
|
|
title="Fix O(n^2) access to all the children of a container"
|
|
|
|
href="https://bugzilla.mozilla.org/show_bug.cgi?id=342045">
|
|
|
|
Mozilla Bug 342045
|
|
|
|
</a>
|
2012-09-05 23:03:24 -07:00
|
|
|
<a target="_blank"
|
|
|
|
title="Wrong accessible is created for HTML:li having block display style"
|
|
|
|
href="https://bugzilla.mozilla.org/show_bug.cgi?id=507555">
|
|
|
|
Mozilla Bug 507555
|
|
|
|
</a>
|
2010-10-15 08:34:24 -07:00
|
|
|
<a target="_blank"
|
|
|
|
title="Bullets of nested not ordered lists have one and the same character."
|
|
|
|
href="https://bugzilla.mozilla.org/show_bug.cgi?id=604587">
|
|
|
|
Mozilla Bug 604587
|
|
|
|
</a>
|
2011-03-28 06:59:54 -07:00
|
|
|
<a target="_blank"
|
|
|
|
title="Fix list bullets for DL list (crash [@ nsBulletFrame::GetListItemText])"
|
|
|
|
href="https://bugzilla.mozilla.org/show_bug.cgi?id=629114">
|
|
|
|
Mozilla Bug 629114
|
|
|
|
</a>
|
2009-12-10 11:45:11 -08:00
|
|
|
<p id="display"></p>
|
|
|
|
<div id="content" style="display: none"></div>
|
|
|
|
<pre id="test">
|
|
|
|
</pre>
|
|
|
|
|
|
|
|
<ul id="list1">
|
2010-10-15 08:34:24 -07:00
|
|
|
<li id="l1_li1">Oranges</li>
|
|
|
|
<li id="l1_li2">Apples</li>
|
|
|
|
<li id="l1_li3">Bananas</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<ul id="list2" style="list-style-type: circle">
|
|
|
|
<li id="l2_li1">Oranges</li>
|
|
|
|
<li id="l2_li2">Apples</li>
|
|
|
|
<li id="l2_li3">Bananas</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<ul id="list3" style="list-style-type: square">
|
|
|
|
<li id="l3_li1">Oranges</li>
|
|
|
|
<li id="l3_li2">Apples</li>
|
|
|
|
<li id="l3_li3">Bananas</li>
|
2009-12-10 11:45:11 -08:00
|
|
|
</ul>
|
|
|
|
|
2010-10-15 08:34:24 -07:00
|
|
|
<ol id="list4">
|
2009-12-10 11:45:11 -08:00
|
|
|
<li id="li4">Oranges</li>
|
|
|
|
<li id="li5">Apples</li>
|
|
|
|
<li id="li6">Bananas<ul>
|
|
|
|
<li id="n_li4">Oranges</li>
|
|
|
|
<li id="n_li5">Apples</li>
|
|
|
|
<li id="n_li6">Bananas</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
</ol>
|
2011-03-28 06:59:54 -07:00
|
|
|
|
|
|
|
<dl id="list5">
|
|
|
|
<dt>item1</dt><dd>description</dd>
|
|
|
|
<dt>item2</td><dd>description</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
<ol id="list6">
|
|
|
|
<li>
|
|
|
|
<dl id="dl">
|
|
|
|
<dt>item1</dt><dd>description</dd>
|
|
|
|
</dl>
|
|
|
|
</li>
|
|
|
|
</ol>
|
2012-09-05 23:03:24 -07:00
|
|
|
|
|
|
|
<!-- display style different than list-item -->
|
|
|
|
<ul id="list7">
|
|
|
|
<li id="l7_li1" style="display:inline-block;">Oranges</li>
|
|
|
|
<li id="l7_li2" style="display:inline-block;">Apples</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<ul id="list8">
|
|
|
|
<li id="l8_li1" style="display:inline; float:right;">Oranges</li>
|
|
|
|
<li id="l8_li2" style="display:inline; float:right;">Apples</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<!-- list-item display style -->
|
|
|
|
<ul id="list9">
|
|
|
|
<span id="l9_li1" style="display:list-item">Oranges</span>
|
|
|
|
<span id="l9_li2" style="display:list-item">Apples</span>
|
|
|
|
<span id="l9_li3" style="display:list-item">Bananas</span>
|
|
|
|
</ul>
|
2009-12-10 11:45:11 -08:00
|
|
|
</body>
|
|
|
|
</html>
|