1 files changed, 127 insertions, 0 deletions
diff --git a/accessible/tests/mochitest/tree/test_media.html b/accessible/tests/mochitest/tree/test_media.html
new file mode 100644
index 0000000000..5d9fe0ef24
--- /dev/null
+++ b/accessible/tests/mochitest/tree/test_media.html
@@ -0,0 +1,127 @@
+<!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>