<!
DOCTYPE html>
<
html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=483573
-->
<
head>
<
title>HTML5
audio/
video tests</
title>
<
link rel=
"stylesheet" type=
"text/css" href=
"chrome://mochikit/content/tests/SimpleTest/test.css" />
<
script src=
"chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></
script>
<
script type=
"application/javascript"
src=
"../common.js"></
script>
<
script type=
"application/javascript"
src=
"../role.js"></
script>
<
script type=
"application/javascript"
src=
"../states.js"></
script>
<
script type=
"application/javascript"
src=
"../promisified-events.js"></
script>
<
script type=
"application/javascript">
async function loadAudioSource() {
/**
* Setting the
source dynamically and wait for it to load,
* so we can test the accessibility tree of the control in its ready and
* stable state.
*
* See bug 1484048 comment 25 for discussion on how it switches UI when
* loading a statically declared
source.
*/
const bufferA11yShown = waitForEvent(
EVENT_SHOW,
evt => evt.accessible.role == ROLE_TEXT_LEAF &&
evt.accessible.indexInParent == 2 &&
evt.accessible.parent.role == ROLE_STATUSBAR
);
await new Promise(resolve => {
let el = document.getElementById(
"audio");
el.addEventListener(
"canplaythrough", resolve, {once: true});
el.src =
"../bug461281.ogg";
});
// Wait for this to be reflected in the a11y tree.
await bufferA11yShown;
// Give Fluent
time to update the value of the scrubber asynchronously.
let scrubber = document.getElementById(
"audio")
.openOrClosedShadowRoot.getElementById(
"scrubber");
await SimpleTest.promiseWaitForCondition(() =>
scrubber.getAttribute(
"aria-valuetext") ==
"0:00 / 0:02");
doTest();
}
function doTest() {
// ////////////////////////////////////////////////////////////////////////
// test the accessible tree
var accTree = {
role: ROLE_GROUPING,
children: [
{ // start/stop
button
role: ROLE_PUSHBUTTON,
name:
"Play",
children: [],
},
{ // buffer bar
role: ROLE_STATUSBAR,
children: [
{
role: ROLE_TEXT_LEAF,
name:
"Loading:",
},
{
role: ROLE_TEXT_LEAF,
name:
" ",
},
{
role: ROLE_TEXT_LEAF,
// The name is the percentage buffered; e.g.
"0%",
"100%".
// We can
't check it here because it might be different
// depending on browser caching.
},
],
},
{ // slider of
progress bar
role: ROLE_SLIDER,
name:
"Position",
value:
"0:00 / 0:02",
children: [],
},
{ // mute
button
role: ROLE_PUSHBUTTON,
name:
"Mute",
children: [],
},
{ // slider of volume bar
role: ROLE_SLIDER,
children: [],
name:
"Volume",
},
],
};
testAccessibleTree(
"audio", accTree);
SimpleTest.finish();
}
SimpleTest.waitForExplicitFinish();
addA11yLoadEvent(loadAudioSource);
</
script>
</
head>
<
body>
<a target=
"_blank"
title=
"Expose HTML5 video and audio elements' embedded controls through accessibility APIs"
href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=483573">Mozilla Bug 483573</a>
<p id=
"display"></p>
<
div id=
"content" style=
"display: none"></
div>
<
pre id=
"test">
</
pre>
<
audio id=
"audio" controls=
"true"></
audio>
<
div id=
"eventDump"></
div>
</
body>
</
html>
