progress-bar-repaint-on-size-change.html

<!DOCTYPE html>
<html>
<title>Progress bar repaint on resize</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'

  const timeline = timelineElement(video);
  const thumb = timelineThumb(video);
  const segmentBefore = mediaControlsElement(internals.shadowRoot(timeline), '-internal-track-segment-highlight-before');
  if (!segmentBefore)
    throw 'Could not find segment before element';

  const testCases = [300, 800, 200];

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

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

  function progressBarShouldMeetThumb() {
    const progress = segmentBefore.getBoundingClientRect().right;
    const thumbRect = thumb.getBoundingClientRect();
    const thumbLeft = thumbRect.left;
    const thumbRight = thumbRect.right;

    assert_greater_than_equal(progress, thumbLeft, 'progress bar should reach the thumb');
    assert_less_than_equal(progress, thumbRight, 'progress bar should not go beyond the thumb');
  }

  video.onloadedmetadata = t.step_func(() => {
    const timelineBoundingRect = timeline.getBoundingClientRect();
    let x = timelineBoundingRect.right - 1;
    let y = timelineBoundingRect.top + 1;
    // Click at top right corner of timeline element,
    // thumb should moved to the end of timeline.
    singleTapAtCoordinates(x, y, t.step_func(() => {
      assert_equals(video.currentTime, video.duration, 'video should reach the end');
      runTestCase(0);
    }));
  });
});

</script>
</html>
chromium/third_party/blink/web_tests/media/controls/progress-bar-repaint-on-size-change.html
