Add image loading=lazy data: and Blob URL WPTs

R=sclittle@chromium.org

Bug: 1047909
Change-Id: I71ca1728a4cc148587e12fce98841488591e869a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2299475
Commit-Queue: Dominic Farolino <dom@chromium.org>
Reviewed-by: Scott Little <sclittle@chromium.org>
Cr-Commit-Position: refs/heads/master@{#789176}

third_party/blink/web_tests/android/ClankWPTOverrideExpectations

@@ -2573,7 +2573,6 @@ crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-iframe-elemen
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_anchor_download_allow_downloads.sub.tentative.html [ Timeout ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_navigation_download_block_downloads.sub.tentative.html [ Failure ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-iframe-element/srcdoc_change_hash.html [ Timeout ]
-crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/below-viewport-image-loading-lazy-load-event.html [ Timeout ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/decode/image-decode-iframe.html [ Timeout ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/decode/image-decode-path-changes.html [ Failure ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/decode/image-decode-svg.tentative.html [ Failure ]
@@ -2584,7 +2583,6 @@ crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/i
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-below-viewport-dynamic.html [ Failure ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-in-script-disabled-iframe.html [ Failure ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-in-viewport-dynamic.html [ Failure ]
-crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-load-event.html [ Timeout ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-move-document.html [ Failure ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-to-eager.html [ Timeout ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/img.complete.html [ Failure ]

third_party/blink/web_tests/android/WeblayerWPTOverrideExpectations

@@ -2453,7 +2453,6 @@ crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-iframe-elemen
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_navigate_history_go_back.html [ Failure ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_navigate_history_go_forward.html [ Failure ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_navigation_download_block_downloads.sub.tentative.html [ Failure ]
-crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/below-viewport-image-loading-lazy-load-event.html [ Timeout ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/decode/image-decode-iframe.html [ Timeout ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/decode/image-decode-path-changes.html [ Failure ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/decode/image-decode-svg.tentative.html [ Failure ]
@@ -2464,7 +2463,6 @@ crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/i
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-below-viewport-dynamic.html [ Failure ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-in-script-disabled-iframe.html [ Failure ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-in-viewport-dynamic.html [ Failure ]
-crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-load-event.html [ Timeout ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-move-document.html [ Failure ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-to-eager.html [ Timeout ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/img.complete.html [ Failure ]

third_party/blink/web_tests/android/WebviewWPTOverrideExpectations

@@ -2675,7 +2675,6 @@ crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-iframe-elemen
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_allow_top_navigation-3.html [ Failure Timeout ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_navigation_download_block_downloads.sub.tentative.html [ Failure ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-iframe-element/sandbox_002.htm [ Timeout ]
-crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/below-viewport-image-loading-lazy-load-event.html [ Timeout ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/decode/image-decode-iframe.html [ Timeout ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/decode/image-decode-path-changes.html [ Failure ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/decode/image-decode-svg.tentative.html [ Failure ]
@@ -2685,7 +2684,6 @@ crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/i
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-below-viewport-dynamic.html [ Failure ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-in-script-disabled-iframe.html [ Failure ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-in-viewport-dynamic.html [ Failure ]
-crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-load-event.html [ Timeout ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-move-document.html [ Failure ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-to-eager.html [ Timeout ]
 crbug.com/1050754 external/wpt/html/semantics/embedded-content/the-img-element/img.complete.html [ Failure ]

third_party/blink/web_tests/external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-expected.txt

+This is a testharness.js-based test.
+PASS In-viewport loading=lazy images load immediately but do not block the window load event
+PASS Below-viewport loading=lazy images only load when in the viewport and do not block the window load event
+FAIL Below-viewport data:url images only load when in the viewport and do not block the window load event assert_true: Below-viewport loading=lazy data: url images images only load when scrolled into view expected true got false
+FAIL Below-viewport blob URL images only load when in the viewport and do not block the window load event assert_true: Below-viewport loading=lazy blob url images images only load when scrolled into view expected true got false
+Harness: the test ran to completion.
+

third_party/blink/web_tests/external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-load-event.html

-<!DOCTYPE html>
-<head>
-  <title>In-viewport loading=lazy images do not block the window load event</title>
-  <link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
-  <link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
-  <script src="/resources/testharness.js"></script>
-  <script src="/resources/testharnessreport.js"></script>
-  <script src="../resources/common.js"></script>
-</head>
-
-<body>
-  <!-- This image blocks the window load event for 1 second -->
-  <img src="resources/image.png?window-load-blocking&pipe=trickle(d1)">
-
-  <!-- These images must load because they intersect the viewport, but they must
-       not block the window load event, because they are loading=lazy -->
-  <img id="visible"
-       src="resources/image.png?visible&pipe=trickle(d3)" loading="lazy"
-       onload="visible_img.resolve();" onerror="visible_img.reject();">
-  <img id="visibility_hidden" style="visibility:hidden;"
-       src="resources/image.png?visibility_hidden&pipe=trickle(d3)" loading="lazy"
-       onload="visibility_hidden_img.resolve();" onerror="visibility_hidden_img.reject();">
-</body>
-
-<script>
-  const visible_img = new ElementLoadPromise("visible");
-  const visibility_hidden_img = new ElementLoadPromise("visibility_hidden");
-
-  async_test(t => {
-
-    let has_window_loaded = false;
-    window.addEventListener("load", t.step_func(() => {
-      has_window_loaded = true;
-    }));
-
-    Promise.all([visible_img.promise, visibility_hidden_img.promise])
-      .then(t.step_func_done(() => {
-        assert_true(has_window_loaded,
-                    "The window load event should fire before the " +
-                    "in-viewport loading=lazy images load");
-        assert_true(visible_img.element().complete,
-                    "The in-viewport loading=lazy visible image is complete");
-        assert_true(visibility_hidden_img.element().complete,
-                    "The in-viewport loading=lazy visibility:hidden image is " +
-                    "complete");
-      }))
-      .catch(t.unreached_func("The images should load successfully"));
-
-  }, "In-viewport loading=lazy images do not block the window load event");
-</script>
-

third_party/blink/web_tests/external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy.html

 <!DOCTYPE html>
 <head>
   <title>Images with loading='lazy' load only when in the viewport</title>
-  <link rel="author" title="Scott Little" href="mailto:sclittle@chromium.org">
   <link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
+  <link rel="author" title="Scott Little" href="mailto:sclittle@chromium.org">
   <link rel="help" href="https://github.com/scott-little/lazyload">
   <script src="/resources/testharness.js"></script>
   <script src="/resources/testharnessreport.js"></script>
 </head>
 
 <script>
-  const t = async_test("Images with loading='lazy' load only when in the viewport");
+  const in_viewport_test =
+    async_test("In-viewport loading=lazy images load immediately but do not " +
+               "block the window load event");
+  const below_viewport_test =
+    async_test("Below-viewport loading=lazy images only load when in the " +
+               "viewport and do not block the window load event");
+  const below_viewport_data_url_test =
+    async_test("Below-viewport data:url images only load when in the " +
+               "viewport and do not block the window load event");
+  const below_viewport_blob_url_test =
+    async_test("Below-viewport blob URL images only load when in the " +
+               "viewport and do not block the window load event");
+
+  document.addEventListener('DOMContentLoaded', e => {
+    const img = document.querySelector('#below_viewport_blob_url');
+
+    // Blob URL helper.
+    // Source: https://bl.ocks.org/nolanlawson/0eac306e4dac2114c752.
+    function fixBinary(bin) {
+      const length = bin.length;
+      const buf = new ArrayBuffer(length);
+      const arr = new Uint8Array(buf);
+      for (var i = 0; i < length; i++) {
+        arr[i] = bin.charCodeAt(i);
+      }
+
+      return buf;
+    }
+
+    const base64 =
+      "R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA";
+    const binary = fixBinary(atob(base64));
+    const blob = new Blob([binary], {type: 'image/png'});
+    const url = URL.createObjectURL(blob);
+    img.src = url;
+  }) // DOMContentLoaded.
 
-  let has_in_viewport_loaded = false;
   let has_window_load_fired = false;
+  let has_in_viewport_loaded = false;
+
+  window.onload = e => {
+    has_window_load_fired = true;
+  }
+
+  // Helper assertion messages for the below tests.
+  const kScrollAssertion = "images only load when scrolled into view";
+  const kWindowLoadAssertion = "images do not block the load event";
 
-  const in_viewport_img_onload = t.step_func(() => {
-    assert_false(has_in_viewport_loaded,
-                 "The in_viewport element should load only once.");
+  const in_viewport_img_onload = in_viewport_test.step_func_done(() => {
     has_in_viewport_loaded = true;
-    assert_true(document.getElementById("in_viewport").complete);
-    document.getElementById("below_viewport").scrollIntoView();
+    document.querySelector('#bottom').scrollIntoView();
+    assert_true(has_window_load_fired,
+                "In-viewport loading=lazy images do not block the window " +
+                "load event");
   });
 
-  window.addEventListener("load", t.step_func(() => {
-    has_window_load_fired = true;
-  }));
-
-  const below_viewport_img_onload = t.step_func_done(() => {
+  const below_viewport_img_onload = below_viewport_test.step_func_done(() => {
     assert_true(has_in_viewport_loaded,
-                "The below-viewport image should not load until it has been " +
-                "scrolled into viewport, after the in-viewport image loads");
+                "Below-viewport loading=lazy images only load once loaded " +
+                "into the viewport");
     assert_true(has_window_load_fired,
                 "Below-viewport loading=lazy images should not block the " +
-                "window load event from firing");
+                "window load event");
+  });
+
+  const below_viewport_data_url_img_onload = below_viewport_data_url_test.step_func_done(() => {
+    assert_true(has_in_viewport_loaded,
+                "Below-viewport loading=lazy data: url images " +
+                kScrollAssertion);
+    assert_true(has_window_load_fired,
+                "Below-viewport loading=lazy data: url images " +
+                kWindowLoadAssertion);
+  });
+
+  const below_viewport_blob_url_img_onload = below_viewport_blob_url_test.step_func_done(() => {
+    assert_true(has_in_viewport_loaded,
+                "Below-viewport loading=lazy blob url images " +
+                kScrollAssertion);
+    assert_true(has_window_load_fired,
+                "Below-viewport loading=lazy blob url images " +
+                kWindowLoadAssertion);
   });
 </script>
 
@@ -41,8 +98,15 @@
        support lazy loading, |below_viewport| finishes before |in_viewport|, and
        the test will dependably fail without relying on a timeout. -->
   <img id="in_viewport" loading="lazy" src="resources/image.png?first&pipe=trickle(d2)"
-       onload="in_viewport_img_onload();">
+       onload="in_viewport_img_onload()">
   <div style="height:1000vh;"></div>
   <img id="below_viewport" loading="lazy" src="resources/image.png?second"
-       onload="below_viewport_img_onload();">
+       onload="below_viewport_img_onload()">
+  <img id="below_viewport_data_url" loading="lazy"
+       src="data:image/png;base64,R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA"
+       onload="below_viewport_data_url_img_onload()">
+  <!-- This image has its `src` set to a blob URL dynamically above -->
+  <img id="below_viewport_blob_url" loading="lazy"
+       onload="below_viewport_blob_url_img_onload()">
+  <div id="bottom"></div>
 </body>