<!DOCTYPE html>
<html>
<title>Test that the timeline thumb is displayed when the timeline is focused.</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"></video>
<script>
async_test(t => {
  const video = document.querySelector('video');
  const timeline = timelineElement(video);
  const thumb = timelineThumb(video);
  enableTestMode(video);

  video.addEventListener('loadedmetadata', t.step_func(() => {
    timeline.focus();
    setTimeout(t.step_func_done(() => {
      const thumbStyle = getComputedStyle(thumb);
      assert_equals(thumbStyle.opacity, '1', 'The thumb should be visible');
    }));
  }));

  video.load();
});
</script>
</html>