<!DOCTYPE html>
<html>
<title>Test that when a video has multiple text tracks with the same label we show a kind indicator.</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-controls.js"></script>
<video controls width=500 preload=none src="../content/60_sec_video.webm">
<track id="captions" kind="captions" label="English">
<track id="subtitles" kind="subtitles" label="English">
<track id="unique" kind="captions" label="French">
</video>
<script>
async_test(t => {
const video = document.querySelector('video');
enableTestMode(video);
video.addEventListener('loadedmetadata', t.step_func(() => {
clickCaptionButton(video, t.step_func_done(() => {
const captions = textTrackListItemAtIndex(video, 0);
const captionsIndicator = textTrackListItemInnerKindIndicator(captions);
assert_not_equals(null, captionsIndicator, 'captions should have an indicator');
assert_equals('-internal-media-controls-text-track-list-kind-captions',
internals.shadowPseudoId(captionsIndicator),
'the captions indicator should be the right type');
assert_not_equals(getComputedStyle(captionsIndicator)['background-image'], 'none',
'the captions indicator should have a background image')
const subtitles = textTrackListItemAtIndex(video, 1);
const subtitlesIndicator = textTrackListItemInnerKindIndicator(subtitles);
assert_not_equals(null, subtitlesIndicator, 'subtitles should have an indicator');
assert_equals('-internal-media-controls-text-track-list-kind-subtitles',
internals.shadowPseudoId(subtitlesIndicator),
'the subtitles indicator should be the right type');
assert_not_equals(getComputedStyle(subtitlesIndicator)['background-image'], 'none',
'the subtitles indicator should have a background image')
const unique = textTrackListItemAtIndex(video, 2);
const uniqueIndicator = textTrackListItemInnerKindIndicator(unique);
assert_equals(null, uniqueIndicator, 'unique should not have an indicator');
}));
}), { once: true });
video.load();
});
</script>
</html>