HTML: test <video posterloading=lazy>

See whatwg/html#8428
web-platform-tests · Oct 28, 2022 · 214315a · 214315a
1 parent 40772b8
commit 214315a
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 0 deletions.
diff --git a/...ed-content/the-video-element/posterloading/posterloading-lazy-below-viewport-dynamic.html b/...ed-content/the-video-element/posterloading/posterloading-lazy-below-viewport-dynamic.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<head>
+  <title>Below viewport poster images with posterloading='lazy' and changed to
+         loading='eager' load and do not block the window load event</title>
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+</head>
+
+<script>
+  const t = async_test();
+
+  let has_below_viewport_loaded = false;
+  let has_window_loaded = false;
+
+  window.addEventListener("load", t.step_func(function() {
+    assert_false(has_window_loaded,
+                 "The window load event should only fire once.");
+    has_window_loaded = true;
+  }));
+
+  const below_viewport_img_onload = t.step_func_done(function() {
+    assert_false(has_below_viewport_loaded,
+               "The in_viewport element should load only once.");
+    assert_true(has_window_loaded,
+                "The window load event should have fired before " +
+                "below_viewport loaded.");
+    has_below_viewport_loaded = true;
+  });
+</script>
+
+<body>
+  <div style="height:10000px;"></div>
+  <video id="below_viewport" poster="/images/blue.png?below-viewport-dynamic&pipe=trickle(d2)"
+       posterloading="lazy"></video>
+  <script>
+    const ro = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        const cr = entry.contentRect;
+        if (cr.width === 300 && cr.height === 150)
+          continue;
+        else
+          below_viewport_img_onload();
+      }
+    });
+
+    ro.observe(document.getElementById('below_viewport'));
+
+    assert_false(has_window_loaded,
+                "The window load event should not fire before " +
+                "changing below_viewport to loading='eager'.");
+    document.getElementById("below_viewport").posterloading = 'eager';
+  </script>
+</body>
diff --git a/...embedded-content/the-video-element/posterloading/posterloading-lazy-scroll-into-view.html b/...embedded-content/the-video-element/posterloading/posterloading-lazy-scroll-into-view.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<head>
+  <title>Below viewport poster images with posterloading='lazy' load when scrolled into view</title>
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+</head>
+
+<script>
+  const t = async_test();
+
+  let has_below_viewport_loaded = false;
+  let has_window_loaded = false;
+
+  window.addEventListener("load", t.step_func(function() {
+    assert_false(has_window_loaded,
+                 "The window load event should only fire once.");
+    has_window_loaded = true;
+    assert_false(has_below_viewport_loaded, 'Lazy poster image should not have loaded when the window load event fires.');
+    document.getElementById('below_viewport').scrollIntoView();
+  }));
+
+  const below_viewport_img_onload = t.step_func_done(function() {
+    assert_false(has_below_viewport_loaded,
+               "The below_viewport element should load only once.");
+    has_below_viewport_loaded = true;
+  });
+</script>
+
+<body>
+  <div style="height:10000px;"></div>
+  <video id="below_viewport" poster="/images/blue.png?posterloading-lazy-below-viewport"
+       posterloading="lazy"></video>
+  <script>
+    const ro = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        const cr = entry.contentRect;
+        if (cr.width === 300 && cr.height === 150)
+          continue;
+        else
+          below_viewport_img_onload();
+      }
+    });
+
+    ro.observe(document.getElementById('below_viewport'));
+  </script>
+</body>