<!DOCTYPE html>
<title>Media Controls: playback speed button accessibility tests</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-controls.js"></script>
<video controls></video>
<script>
async_test(t => {
var video = document.querySelector('video');
enableTestMode(video);
video.src = '../content/test.ogv';
video.onloadeddata = t.step_func(_ => {
assert_true(isPlaybackSpeedButtonEnabled(video));
var playback_speed_button = playbackSpeedButton(video);
var playback_speed_overflow_item = playbackSpeedOverflowItem(video);
assert_not_equals(playback_speed_button, null);
assert_not_equals(playback_speed_overflow_item, null);
assert_equals(playback_speed_button.getAttribute('aria-label'),
'show playback speed menu');
assert_equals(playback_speed_overflow_item.getAttribute('aria-label'),
'show playback speed menu');
clickPlaybackSpeedButton(video, t.step_func_done(function() {
// Get the menu that displays the list of playback speeds.
var playbackSpeedsList = playbackSpeedMenu(video);
assert_equals(playbackSpeedsList.getAttribute('aria-label'), 'Options');
var listHeader = playbackSpeedListHeader(video);
assert_equals(listHeader.getAttribute('aria-label'), 'back to options');
const playbackSpeeds = [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2];
playbackSpeeds.forEach(function(playbackSpeed, index) {
var playbackSpeedListItem = playbackSpeedListItemAtPlaybackRate(video, playbackSpeed);
assert_equals(playbackSpeedListItem.innerText, playbackSpeed == 1.0 ? 'Normal' : `${playbackSpeed}`);
assert_equals(playbackSpeedListItem.getAttribute('role'), 'menuitemcheckbox');
assert_equals(playbackSpeedListItem.getAttribute('aria-setsize'), `${playbackSpeeds.length}`);
assert_equals(playbackSpeedListItem.getAttribute('aria-posinset'), `${index + 1}`);
});
}));
});
});
</script>