Check for first frame in CreateImageBitmap

HTMLVideoElement::CreateImageBitmap is currently rejecting valid calls,
when we have an available first frame, but the ready state hasn't been
updated.

This CL updates CreateImageBitmap to check for a valid frame, which
amounts to having a first frame available.

This CL also updates some WPTs to use preload=auto, to allow video
elements to load without being visible, and yield expected results when
calling CreateImageBitmap.

Bug: 1090960
Change-Id: I21302a9c3433bf8218a75c3f6918bc20f4d36ca3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2231453
Auto-Submit: Thomas Guilbert <tguilbert@chromium.org>
Reviewed-by: Kenneth Russell <kbr@chromium.org>
Commit-Queue: Thomas Guilbert <tguilbert@chromium.org>
Cr-Commit-Position: refs/heads/master@{#775670}

third_party/blink/renderer/core/html/media/html_video_element.cc

@@ -654,7 +654,7 @@ ScriptPromise HTMLVideoElement::CreateImageBitmap(
         "The provided element has not retrieved data.");
     return ScriptPromise();
   }
-  if (getReadyState() <= HTMLMediaElement::kHaveMetadata) {
+  if (!HasAvailableVideoFrame()) {
     exception_state.ThrowDOMException(
         DOMExceptionCode::kInvalidStateError,
         "The provided element's player has no current data.");

third_party/blink/web_tests/external/wpt/html/canvas/resources/canvas-tests.js

@@ -144,6 +144,7 @@ function forEachCanvasSource(crossOriginUrl, sameOriginUrl, callback) {
         return new Promise((resolve, reject) => {
           const video = document.createElement("video");
           video.oncanplaythrough = () => resolve(video);
+          video.preload = "auto";
           video.onerror = reject;
           video.src = getVideoURI(crossOriginUrl + "/media/movie_300");
         });
@@ -156,6 +157,7 @@ function forEachCanvasSource(crossOriginUrl, sameOriginUrl, callback) {
         return new Promise((resolve, reject) => {
           const video = document.createElement("video");
           video.oncanplaythrough = () => resolve(video);
+          video.preload = "auto";
           video.onerror = reject;
           video.src = "/common/redirect.py?location=" + getVideoURI(crossOriginUrl + "/media/movie_300");
         });
@@ -168,6 +170,7 @@ function forEachCanvasSource(crossOriginUrl, sameOriginUrl, callback) {
         return new Promise((resolve, reject) => {
           const video = document.createElement("video");
           video.oncanplaythrough = () => resolve(video);
+          video.preload = "auto";
           video.onerror = reject;
           video.src = crossOriginUrl + "/common/redirect.py?location=" + getVideoURI(sameOriginUrl + "/media/movie_300");
         });