From 892a72815d8574b81a3fd6b369737bc91ff151b7 Mon Sep 17 00:00:00 2001
From: Dominic Farolino <domfarolino@gmail.com>
Date: Fri, 26 Jun 2020 10:16:55 -0500
Subject: [PATCH 1/2] Augment iframe lazyload tests for srcdoc

---
 common/square.png                             | Bin 0 -> 18299 bytes
 .../iframe-loading-lazy.tentative.html        |  75 +++++++++++++++---
 2 files changed, 64 insertions(+), 11 deletions(-)
 create mode 100644 common/square.png

diff --git a/common/square.png b/common/square.png
new file mode 100644
index 0000000000000000000000000000000000000000..01c9666a8de9d5535615aff830810e5df4b2156f
GIT binary patch
literal 18299
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
bDgs((CoOJ&@$4~l+kmsZyIqm(x-I_(KvUo&

literal 0
HcmV?d00001

diff --git a/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy.tentative.html b/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy.tentative.html
index 0a882ef25bc19a..4d7c7e659af407 100644
--- a/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy.tentative.html
+++ b/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy.tentative.html
@@ -2,52 +2,105 @@
 <head>
   <title>Iframes with loading='lazy' load when in the viewport</title>
   <link rel="author" title="Scott Little" href="mailto:sclittle@chromium.org">
-  <link rel="help" href="https://github.com/scott-little/lazyload">
+  <link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
+  <link rel="help" href="https://github.com/whatwg/html/pull/5579">
   <script src="/resources/testharness.js"></script>
   <script src="/resources/testharnessreport.js"></script>
 </head>
 
 <script>
-  const t = async_test("Test that iframes with loading='lazy' load once they " +
-                       "enter the viewport.");
+  const t = async_test();
 
   let has_window_loaded = false;
   let has_in_viewport_loaded = false;
+  let has_in_viewport_srcdoc_loaded = false;
+  let has_below_viewport_loaded = false;
+  let has_below_viewport_srcdoc_loaded = false;
+  let has_below_viewport_srcdoc_subresource_loaded = false;
 
   const in_viewport_iframe_onload = t.step_func(() => {
     assert_false(has_in_viewport_loaded,
-                 "The in_viewport element should load only once.");
+                 "The in_viewport iframe should load only once.");
     has_in_viewport_loaded = true;
   });
 
+  const in_viewport_srcdoc_iframe_onload = t.step_func(() => {
+    assert_false(has_in_viewport_srcdoc_loaded,
+                 "The in_viewport iframe should load only once.");
+    has_in_viewport_srcdoc_loaded = true;
+  });
+
   window.addEventListener("load", t.step_func(() => {
     assert_true(has_in_viewport_loaded,
-                "The in_viewport element should have loaded before " +
+                "The in_viewport iframe should have loaded before " +
+                "window.load().");
+    assert_true(has_in_viewport_srcdoc_loaded,
+                "The in_viewport srcdoc iframe should have loaded before " +
                 "window.load().");
-    assert_false(has_window_loaded,
-                 "The window.load() event should only fire once.");
+
     has_window_loaded = true;
-    document.getElementById("below_viewport").scrollIntoView();
+    document.getElementById("below_viewport_srcdoc").scrollIntoView();
   }));
 
-  const below_viewport_iframe_onload = t.step_func_done(() => {
+  const below_viewport_iframe_onload = t.step_func(() => {
     assert_true(has_window_loaded,
                 "The window.load() event should have fired before " +
                 "below_viewport loaded.");
+    has_below_viewport_loaded = true;
+    check_if_done();
+  });
+
+  const below_viewport_srcdoc_iframe_onload = t.step_func(() => {
+    assert_true(has_window_loaded,
+                "The window.load() event should have fired before " +
+                "below_viewport srcdoc loaded.");
+    has_below_viewport_srcdoc_loaded = true;
+    check_if_done();
   });
+
+  // Must make this accessible to the srcdoc iframe's body.
+  window.below_viewport_srcdoc_iframe_subresource_onload = t.step_func(() => {
+    assert_true(has_window_loaded,
+                "The window.load() event should have fired before " +
+                "below_viewport srcdoc subresource loaded.");
+
+    has_below_viewport_srcdoc_subresource_loaded = true;
+    check_if_done();
+  });
+
+  // This method gets called once for each below-viewport iframe load. The
+  // second time it is called, the test finished.
+  function check_if_done() {
+    if (has_below_viewport_loaded && has_below_viewport_srcdoc_loaded &&
+        has_below_viewport_srcdoc_subresource_loaded) {
+      t.done();
+    }
+  }
+
 </script>
 
 <body>
   <iframe id="in_viewport" src="resources/subframe.html?in-viewport"
           loading="lazy" width="200px" height="100px"
           onload="in_viewport_iframe_onload();"></iframe>
-  <div style="height:1000vh;"></div>
+  <iframe id="in_viewport_srcdoc"
+          srcdoc="<body><img src='/common/square.png?in-viewport'></body>"
+          loading="lazy" width="200px" height="100px"
+          onload="in_viewport_srcdoc_iframe_onload();"></iframe>
+
+  <div style="height:2000vh;"></div>
   <iframe id="below_viewport" src="resources/subframe.html?below-viewport"
           loading="lazy" width="200px" height="100px"
           onload="below_viewport_iframe_onload();"></iframe>
+  <iframe id="below_viewport_srcdoc"
+          srcdoc="<body><img src='/common/square.png?below-viewport'
+                  onload='parent.below_viewport_srcdoc_iframe_subresource_onload();'></body>"
+          loading="lazy" width="200px" height="100px"
+          onload="below_viewport_srcdoc_iframe_onload();"></iframe>
+
 
   <!-- This async script loads very slowly in order to ensure that, if the
-       below_viewport element has started loading, it has a chance to finish
+       below_viewport* elements have started loading, it has a chance to finish
        loading before window.load() happens, so that the test will dependably
        fail in that case instead of potentially passing depending on how long
        different resource fetches take. -->

From 44cf68340e296adb5c26167d32ba759b89f5bde4 Mon Sep 17 00:00:00 2001
From: Dominic Farolino <domfarolino@gmail.com>
Date: Fri, 26 Jun 2020 10:33:20 -0500
Subject: [PATCH 2/2] Refactor to multiple tests

---
 .../iframe-loading-lazy.tentative.html        | 70 ++++++-------------
 1 file changed, 23 insertions(+), 47 deletions(-)

diff --git a/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy.tentative.html b/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy.tentative.html
index 4d7c7e659af407..1a5f8f7407e340 100644
--- a/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy.tentative.html
+++ b/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy.tentative.html
@@ -9,74 +9,50 @@
 </head>
 
 <script>
-  const t = async_test();
+  const t_in_viewport =
+    async_test('In-viewport iframes load eagerly');
+  const t_in_viewport_srcdoc=
+    async_test('In-viewport srcdoc iframes load eagerly');
+  const t_below_viewport =
+    async_test('Below-viewport iframes load lazily');
+  const t_below_viewport_srcdoc =
+    async_test('Below-viewport srcdoc iframes load lazily');
 
   let has_window_loaded = false;
-  let has_in_viewport_loaded = false;
-  let has_in_viewport_srcdoc_loaded = false;
-  let has_below_viewport_loaded = false;
-  let has_below_viewport_srcdoc_loaded = false;
-  let has_below_viewport_srcdoc_subresource_loaded = false;
 
-  const in_viewport_iframe_onload = t.step_func(() => {
-    assert_false(has_in_viewport_loaded,
-                 "The in_viewport iframe should load only once.");
-    has_in_viewport_loaded = true;
+  const in_viewport_iframe_onload = t_in_viewport.step_func_done(() => {
+    assert_false(has_window_loaded,
+      "The in_viewport iframe should not block the load event");
   });
 
-  const in_viewport_srcdoc_iframe_onload = t.step_func(() => {
-    assert_false(has_in_viewport_srcdoc_loaded,
-                 "The in_viewport iframe should load only once.");
-    has_in_viewport_srcdoc_loaded = true;
+  const in_viewport_srcdoc_iframe_onload = t_in_viewport_srcdoc.step_func_done(() => {
+    assert_false(has_window_loaded,
+      "The in_viewport srcdoc iframe should not block the load event");
   });
 
-  window.addEventListener("load", t.step_func(() => {
-    assert_true(has_in_viewport_loaded,
-                "The in_viewport iframe should have loaded before " +
-                "window.load().");
-    assert_true(has_in_viewport_srcdoc_loaded,
-                "The in_viewport srcdoc iframe should have loaded before " +
-                "window.load().");
-
+  window.addEventListener("load", () => {
     has_window_loaded = true;
     document.getElementById("below_viewport_srcdoc").scrollIntoView();
-  }));
+  });
 
-  const below_viewport_iframe_onload = t.step_func(() => {
+  const below_viewport_iframe_onload = t_below_viewport.step_func_done(() => {
     assert_true(has_window_loaded,
                 "The window.load() event should have fired before " +
-                "below_viewport loaded.");
-    has_below_viewport_loaded = true;
-    check_if_done();
+                "the below-viewport iframe loads");
   });
 
-  const below_viewport_srcdoc_iframe_onload = t.step_func(() => {
+  // Must make this accessible to the srcdoc iframe's body.
+  window.below_viewport_srcdoc_iframe_subresource_onload = t_below_viewport_srcdoc.step_func(() => {
     assert_true(has_window_loaded,
                 "The window.load() event should have fired before " +
-                "below_viewport srcdoc loaded.");
-    has_below_viewport_srcdoc_loaded = true;
-    check_if_done();
+                "the below-viewport srcdoc iframe's subresource loads");
   });
 
-  // Must make this accessible to the srcdoc iframe's body.
-  window.below_viewport_srcdoc_iframe_subresource_onload = t.step_func(() => {
+  const below_viewport_srcdoc_iframe_onload = t_below_viewport_srcdoc.step_func_done(() => {
     assert_true(has_window_loaded,
                 "The window.load() event should have fired before " +
-                "below_viewport srcdoc subresource loaded.");
-
-    has_below_viewport_srcdoc_subresource_loaded = true;
-    check_if_done();
+                "the below-viewport srcdoc iframe loads");
   });
-
-  // This method gets called once for each below-viewport iframe load. The
-  // second time it is called, the test finished.
-  function check_if_done() {
-    if (has_below_viewport_loaded && has_below_viewport_srcdoc_loaded &&
-        has_below_viewport_srcdoc_subresource_loaded) {
-      t.done();
-    }
-  }
-
 </script>
 
 <body>