Bug 1603994 [wpt PR 20778] - [Lazyload]: De-flake loading/lazyload/invisble-image.tentative.html, a=testonly
authorDominic Farolino <domfarolino@gmail.com>
Fri, 20 Dec 2019 11:38:46 +0000
changeset 508259 4216abe682b017c50571ab0f98db6ba6f6a434a0
parent 508258 a6bdcf3878f60c75eaa46c5c2acabb2de3b3452f
child 508260 4e98417d371fab2c91e8549bdfd11823df19fcbc
push id103869
push userwptsync@mozilla.com
push dateMon, 23 Dec 2019 11:18:28 +0000
treeherderautoland@e2bc90bd87b8 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1603994, 20778
milestone73.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1603994 [wpt PR 20778] - [Lazyload]: De-flake loading/lazyload/invisble-image.tentative.html, a=testonly Automatic update from web-platform-tests [Lazyload]: De-flake loading/lazyload/invisble-image.tentative.html (#20778) -- wpt-commits: 68d25dbace7150fc242e55547d04a5da2d546d0d wpt-pr: 20778
testing/web-platform/tests/loading/lazyload/invisible-image.tentative.html
--- a/testing/web-platform/tests/loading/lazyload/invisible-image.tentative.html
+++ b/testing/web-platform/tests/loading/lazyload/invisible-image.tentative.html
@@ -1,60 +1,85 @@
 <!DOCTYPE html>
 <head>
   <title>Test that below-viewport invisible images that are not marked
          loading=lazy still load, and 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="common.js"></script>
 </head>
 
 <body>
-  <img id="expected" src='resources/image.png?1'>
-  <div style="height:10000px;"></div>
-  <img id="visibility_hidden" style="visibility:hidden;" src='resources/image.png?2'>
+  <div style="height:1000vh;"></div>
+  <img id="visibility_hidden" style="visibility:hidden;" src='resources/image.png?1'>
+  <img id="visibility_hidden_explicit_eager" style="visibility:hidden;" src='resources/image.png?2'
+       loading="eager">
+
   <img id="display_none" style="display:none;" src='resources/image.png?3'>
-  <img id="attribute_hidden" hidden src='resources/image.png?4'>
-  <img id="js_display_none" src='resources/image.png?5'>.
+  <img id="display_none_explicit_eager" style="display:none;" src='resources/image.png?4'
+       loading="eager">
+
+  <img id="attribute_hidden" hidden src='resources/image.png?5'>
+  <img id="attribute_hidden_explicit_eager" hidden src='resources/image.png?6'
+       loading="eager">
+
+  <img id="js_display_none" src='resources/image.png?7'>
+  <img id="js_display_none_explicit_eager" src='resources/image.png?8'
+       loading="eager">
   <script>
     document.getElementById("js_display_none").style = 'display:none;';
   </script>
 </body>
 
 <!--
 Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
 -->
 
 <script>
-  const expected = document.getElementById("expected");
   const visibility_hidden_element = document.getElementById("visibility_hidden");
+  const visibility_hidden_element_explicit_eager =
+    document.getElementById("visibility_hidden_explicit_eager");
+
   const display_none_element = document.getElementById("display_none");
-  const attribute_hidden_element = document.getElementById("attribute_hidden");
-  const js_display_none_element = document.getElementById("js_display_none");
+  const display_none_element_explicit_eager =
+    document.getElementById("display_none_explicit_eager");
 
-  let has_window_loaded = false;
+  const attribute_hidden_element = document.getElementById("attribute_hidden");
+  const attribute_hidden_element_explicit_eager =
+    document.getElementById("attribute_hidden_explicit_eager");
 
-  async_test(function(t) {
-    window.addEventListener("load", t.step_func(function() {
-      has_window_loaded = true;
-    }));
+  const js_display_none_element = document.getElementById("js_display_none");
+  const js_display_none_element_explicit_eager =
+    document.getElementById("js_display_none_explicit_eager");
 
+  let have_images_loaded = false;
+
+  async_test(t => {
     let image_fully_loaded_promise = (element) => {
       return new Promise(resolve => {
-        element.addEventListener("load",
-          t.step_func(() => {
-            assert_true(is_image_fully_loaded(element, expected));
-            assert_false(has_window_loaded);
-            resolve();
-        }));
+        element.addEventListener("load", t.step_func(resolve));
       });
     }
-    Promise.all([image_fully_loaded_promise(visibility_hidden_element),
+
+    Promise.all([
+      image_fully_loaded_promise(visibility_hidden_element),
+      image_fully_loaded_promise(visibility_hidden_element_explicit_eager),
       image_fully_loaded_promise(display_none_element),
+      image_fully_loaded_promise(display_none_element_explicit_eager),
       image_fully_loaded_promise(attribute_hidden_element),
-      image_fully_loaded_promise(js_display_none_element)]).then(() => {
-        t.done();
-    });
+      image_fully_loaded_promise(attribute_hidden_element_explicit_eager),
+      image_fully_loaded_promise(js_display_none_element),
+      image_fully_loaded_promise(js_display_none_element_explicit_eager)
+    ]).then(t.step_func(() => {
+      have_images_loaded = true;
+    })).catch(t.unreached_func("All images should load correctly"));
+
+    window.addEventListener("load", t.step_func_done(() => {
+      assert_true(have_images_loaded,
+                  "The images should block the window load event.");
+    }));
+
   }, "Test that below-viewport invisible images that are not marked " +
      "loading=lazy still load, and block the window load event");
 </script>