| <!DOCTYPE html> |
| <link rel="help" href="https://html.spec.whatwg.org/#lazy-load-root-margin"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <style> |
| #scroller { |
| width: 100px; |
| height: 100px; |
| overflow: scroll; |
| background-color: gray; |
| } |
| |
| #scroller2 { |
| width: 110px; |
| height: 110px; |
| overflow: scroll; |
| } |
| |
| #scroller3 { |
| width: 120px; |
| height: 120px; |
| overflow: scroll; |
| } |
| |
| #spacer { |
| width: 100px; |
| height: 100px; |
| } |
| |
| #target { |
| width: 100px; |
| height: 100px; |
| } |
| </style> |
| |
| <div id=scroller3> |
| <div id=scroller2> |
| <div id="scroller"> |
| <div id="spacer"></div> |
| <img |
| id="target" |
| src="resources/green.png" |
| loading="lazy" |
| onload="img_onload();" |
| > |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| const t = async_test( |
| "Test that lazy-loaded images load when near viewport." |
| ); |
| |
| function img_onload() { |
| t.done(); |
| } |
| |
| t.step_timeout(() => { |
| t.unreached_func( |
| "Timed out while waiting for image to load." |
| )(); |
| }, 2000); |
| </script> |