| <!DOCTYPE html> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/feature-policy/experimental-features/resources/common.js"></script> |
| <style> |
| html, body { |
| height: 100%; |
| width: 100%; |
| } |
| |
| iframe { |
| width: 400px; |
| height: 400px; |
| margin: 10px; |
| } |
| |
| .spacer { |
| width: 100%; |
| height: 300%; |
| } |
| </style> |
| <div class="spacer"></div> |
| <script> |
| let cross_origin_url = |
| "http://{{hosts[alt][www]}}:{{ports[http][0]}}/" + |
| "feature-policy/experimental-features/resources/lazyload-contents.html"; |
| |
| let load_timeout = 100; // ms |
| let expected_timeout_msg = false; |
| |
| window.scrollTo(0, 0); |
| |
| // Sanity-check: Make sure lazyload='on' works as intended. |
| promise_test(async(t) => { |
| // Add a frame with lazyload="on". |
| let frame_on = createIframe(document.body, { |
| id: "ON", |
| lazyload: "on", |
| src: `${cross_origin_url}?id=ON` |
| }); |
| // Sanity-check: The frame is not visible. |
| assert_greater_than( |
| frame_on.getBoundingClientRect().top, |
| window.innerHeight * 2, |
| "Unexpected position for <iframe> with ID 'ON'."); |
| let msg_or_timeout_attr_on = |
| await waitForMessageOrTimeout(t, "ON", load_timeout); |
| assert_equals(msg_or_timeout_attr_on, |
| expected_timeout_msg, |
| "With lazyload='on', the frame should not load."); |
| }, "Sanity-check: Contents do not load immediately (no eager-loading) " + |
| "when the lazyload attribute is 'on' and frame is in viewport."); |
| |
| |
| // Verify that when 'lazyload' policy is disabled, lazyload='off' and |
| // lazyload='auto' behave the same. |
| promise_test(async(t) => { |
| // Add a frame with lazyload="off". |
| let frame_on = createIframe(document.body, { |
| id: "OFF", |
| lazyload: "off", |
| src: `${cross_origin_url}?id=OFF` |
| }); |
| // Sanity-check: The frame is not visible. |
| assert_greater_than( |
| frame_on.getBoundingClientRect().top, |
| window.innerHeight * 2, |
| "Unexpected position for <iframe> with ID 'OFF'."); |
| let msg_or_timeout_attr_off = |
| await waitForMessageOrTimeout(t, "OFF", load_timeout); |
| |
| // Now do the same for lazyload='auto'. |
| let frame_auto = createIframe(document.body, { |
| id: "AUTO", |
| lazyload: "auto", |
| src: `${cross_origin_url}?id=AUTO` |
| }); |
| // Sanity-check: The frame is not visible. |
| assert_greater_than( |
| frame_on.getBoundingClientRect().top, |
| window.innerHeight * 2, |
| "Unexpected position for <iframe> with ID 'AUTO'."); |
| let msg_or_timeout_attr_auto = |
| await waitForMessageOrTimeout(t, "AUTO", load_timeout); |
| |
| // The result should be the same. |
| assert_equals( |
| msg_or_timeout_attr_off, |
| msg_or_timeout_attr_auto, |
| "lazyload='off' not treated as 'auto'."); |
| }, "When 'lazyload' feature is disabled, a frame cannot avoid lazyloading " + |
| "by setting 'lazyload' attribute to 'off'"); |
| </script> |
