| <!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> |
