overflow-menu-animation.html | Explore in Territory

<!DOCTYPE html>
<title>Media Controls: overflow menu item list animation.</title>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script src='../media-controls.js'></script>
<video controls width=400></video>
<script>
async_test(t => {
  const video = document.querySelector('video');
  enableTestMode(video);
  video.src = '../content/test.ogv';

  video.onloadedmetadata = t.step_func(() => {
    const menu = overflowMenu(video);
    const testCasesWidth = [400, 150, 100];

    runTestCase(0);

    function runTestCase(index) {
      video.width = testCasesWidth[index];
      runAfterLayoutAndPaint(t.step_func(() => {

        // Go through item list, check 'animated-##' class is presented if item is displayed
        // and check if the items' classes are in sequential order
        let id = 0;
        for (let menuItem = menu.lastChild; menuItem; menuItem = menuItem.previousElementSibling) {
          const classes = menuItem.classList;

          if (getComputedStyle(menuItem).display == 'none') {
            assert_true(classes.length < 2, 'invisible item should have 0 or 1 class');
            continue;
          }

          assert_equals(classes.length, 1, 'menu item should have exactly one class');
          assert_true(!!classes.item(0).match('animated-[0-9]+'),
                      'overflow menu item should not have classes other than animated-##')

          const currentId = classes.item(0).split('-')[1];
          assert_true(id < 7, 'we should not have more than 7 items in menu list');
          assert_true(id++ == currentId, 'animated id should be in sequential order');
        }

        let nextIndex = index + 1;
        if (nextIndex === testCasesWidth.length) {
          t.done();
          return;
        }
        runTestCase(nextIndex);
      }));
    }
  });
});
</script>
chromium/third_party/blink/web_tests/media/controls/overflow-menu-animation.html
