test_media.html (3891B)
1 <!DOCTYPE html> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=483573 5 --> 6 <head> 7 <title>HTML5 audio/video tests</title> 8 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 9 10 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 11 12 <script type="application/javascript" 13 src="../common.js"></script> 14 <script type="application/javascript" 15 src="../role.js"></script> 16 <script type="application/javascript" 17 src="../states.js"></script> 18 <script type="application/javascript" 19 src="../promisified-events.js"></script> 20 21 <script type="application/javascript"> 22 23 async function loadAudioSource() { 24 /** 25 * Setting the source dynamically and wait for it to load, 26 * so we can test the accessibility tree of the control in its ready and 27 * stable state. 28 * 29 * See bug 1484048 comment 25 for discussion on how it switches UI when 30 * loading a statically declared source. 31 */ 32 const bufferA11yShown = waitForEvent( 33 EVENT_SHOW, 34 evt => evt.accessible.role == ROLE_TEXT_LEAF && 35 evt.accessible.indexInParent == 2 && 36 evt.accessible.parent.role == ROLE_STATUSBAR 37 ); 38 await new Promise(resolve => { 39 let el = document.getElementById("audio"); 40 el.addEventListener("canplaythrough", resolve, {once: true}); 41 el.src = "../bug461281.ogg"; 42 }); 43 // Wait for this to be reflected in the a11y tree. 44 await bufferA11yShown; 45 46 // Give Fluent time to update the value of the scrubber asynchronously. 47 let scrubber = document.getElementById("audio") 48 .openOrClosedShadowRoot.getElementById("scrubber"); 49 await SimpleTest.promiseWaitForCondition(() => 50 scrubber.getAttribute("aria-valuetext") == "0:00 / 0:02"); 51 52 doTest(); 53 } 54 55 function doTest() { 56 // //////////////////////////////////////////////////////////////////////// 57 // test the accessible tree 58 59 var accTree = { 60 role: ROLE_GROUPING, 61 children: [ 62 { // start/stop button 63 role: ROLE_PUSHBUTTON, 64 name: "Play", 65 children: [], 66 }, 67 { // buffer bar 68 role: ROLE_STATUSBAR, 69 children: [ 70 { 71 role: ROLE_TEXT_LEAF, 72 name: "Loading:", 73 }, 74 { 75 role: ROLE_TEXT_LEAF, 76 name: " ", 77 }, 78 { 79 role: ROLE_TEXT_LEAF, 80 // The name is the percentage buffered; e.g. "0%", "100%". 81 // We can't check it here because it might be different 82 // depending on browser caching. 83 }, 84 ], 85 }, 86 { // slider of progress bar 87 role: ROLE_SLIDER, 88 name: "Position", 89 value: "0:00 / 0:02", 90 children: [], 91 }, 92 { // mute button 93 role: ROLE_PUSHBUTTON, 94 name: "Mute", 95 children: [], 96 }, 97 { // slider of volume bar 98 role: ROLE_SLIDER, 99 children: [], 100 name: "Volume", 101 }, 102 ], 103 }; 104 testAccessibleTree("audio", accTree); 105 106 SimpleTest.finish(); 107 } 108 109 SimpleTest.waitForExplicitFinish(); 110 addA11yLoadEvent(loadAudioSource); 111 </script> 112 </head> 113 <body> 114 115 <a target="_blank" 116 title="Expose HTML5 video and audio elements' embedded controls through accessibility APIs" 117 href="https://bugzilla.mozilla.org/show_bug.cgi?id=483573">Mozilla Bug 483573</a> 118 <p id="display"></p> 119 <div id="content" style="display: none"></div> 120 <pre id="test"> 121 </pre> 122 123 <audio id="audio" controls="true"></audio> 124 125 <div id="eventDump"></div> 126 </body> 127 </html>