<!DOCTYPE html>
<title>Overflow menu updates properly.</title>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
<script src='../../../media-resources/media-controls.js'></script>
<script src='../../../media-resources/overflow-menu.js'></script>

<!--Padding ensures the overflow menu is visible for the tests. -->
<body style='padding-top: 200px; padding-left: 100px'>
<video controls></video>
<script>
async_test(t => {
  assert_true('internals' in window, 'window.internals must be available');

  // Set up video
  var video = document.querySelector('video');
  video.src = '../resources/test.ogv';
  video.setAttribute('width', '60');
  // Add captions
  var trackElement = document.createElement('track');
  video.appendChild(trackElement);
  // Pretend we have a cast device
  internals.mediaPlayerRemoteRouteAvailabilityChanged(video, true);

  video.onloadeddata = t.step_func(_ => {
    var overflowList = getOverflowList(video);

    // Remove cast device and ensure the overflow menu updates as expected
    // Cast option in overflow should no longer be visible, but the other
    // options should all be.
    var buttonsWithoutCast = overflowButtonsCSS;
    buttonsWithoutCast[OverflowMenuButtons.CAST] = undefined;
    internals.mediaPlayerRemoteRouteAvailabilityChanged(video, false);

    var children = overflowList.children;
    // Ensure that all of the buttons are visible in the right order
    for (var i = 0; i < children.length; i++) {
      var child = children[i];
      if (buttonsWithoutCast[i])
        assert_not_equals(getComputedStyle(child).display, 'none');
      else
        assert_equals(getComputedStyle(child).display, 'none');
    }
    internals.mediaPlayerRemoteRouteAvailabilityChanged(video, true);
    assert_not_equals(getComputedStyle(children[OverflowMenuButtons.CAST]).display, 'none');

    // Removing closed captions hides button in overflow menu
    assert_not_equals(getComputedStyle(children[OverflowMenuButtons.CLOSED_CAPTIONS]).display, 'none');
    video.removeChild(trackElement);

    // The controls are updated asynchronously.
    setTimeout(t.step_func_done(_ => {
      assert_equals(getComputedStyle(children[OverflowMenuButtons.CLOSED_CAPTIONS]).display, 'none');
    }));
  });
});
</script>
</body>