controls-layout-in-different-size.html

<!DOCTYPE html>
<html>
<title>Media Controls: Test controls layout correctly in different small sizes.</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></video>
<script>
async_test(t => {
  const video = document.querySelector('video');
  video.src = '../content/test.ogv';

  video.onloadedmetadata = t.step_func(() => {
    // We are testing the changing of sizes instead of single test cases
    // because the layout flilkering issue typically happen when changing
    // from small size to big size.
    const testCases = [ 400, 100, 180, 200, 100, 200, 100, 250, 100, 300 ];
    const buttonPanel = buttonPanelElement(video);
    const overflowBtn = overflowButton(video);

    runTestCase(0);

    function runTestCase(index) {
      let test = testCases[index];
      video.width = test;
      runAfterLayoutAndPaint(t.step_func(() => {
        expectLayoutCorrectly();

        assert_not_equals(getComputedStyle(overflowBtn), 'none',
                          'Overflow button should always be visible');

        let nextIndex = index + 1;
        if (nextIndex === testCases.length) {
          testLayoutWhilePlaying();
          return;
        }
        runTestCase(nextIndex);
      }));
    }

    function testLayoutWhilePlaying() {
      video.width = 400;

      // Start playing video and wait for controls to hide
      video.addEventListener('playing', t.step_func(() => {
        runAfterHideMediaControlsTimerFired(t.step_func(() => {
          assert_false(isControlsPanelVisible(video), 'controls should not be shown');

          // Change width to 80 and check layout
          video.width = 80;
          runAfterLayoutAndPaint(t.step_func(() => {

            // Hover to show the controls
            hoverOverControl(video, t.step_func_done(() => {
              expectLayoutCorrectly();
            }));
          }));
        }), video);
      }), {once: true});
      video.play();
    }

    function expectLayoutCorrectly() {
      let totalWidth = 0;
      let children = buttonPanel.children;
      for (let i = 0; i < children.length; i++) {
        let child = children[i];
        if (getComputedStyle(child).display != 'none')
          totalWidth += child.getBoundingClientRect().width;
      }

      assert_true(buttonPanel.getBoundingClientRect().width > 0, 'control panel width should always be positive when we testing');
      assert_true(totalWidth <= buttonPanel.getBoundingClientRect().width,
                  'All element should fit in button panel');
    }
  });
});
</script>
</html>
chromium/third_party/blink/web_tests/media/controls/controls-layout-in-different-size.html
