image-loading-lazy-negative-margin.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/embedded-content/the-img-element/image-loading-lazy-negative-margin.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<head>

  <title>Images with loading='lazy' defers images in a hidden area as a result

         of negative margins</title>

  <link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">

  <link rel="help" href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes">

  <script src="/resources/testharness.js"></script>

  <script src="/resources/testharnessreport.js"></script>

</head>

<body>

  <script>

    window.negative_margin_test =

      async_test("A loading=lazy image that is pulled into an `overflow: hidden` " +

                 "area by a negative margin will not load because " +

                 "IntersectionObserver sees it as non-intersecting");

    // If the `negative_margin` image in the DOM loads, the test should fail

    // immediately.

    window.negative_margin_onload =

      negative_margin_test.step_func_done(

        negative_margin_test.unreached_func("The image with a negative margin " +

                                            "should never load"));

  </script>

  <div style="width: 200px; height: 200px; overflow: hidden;">

    <img id="negative_margin" width="5px"; style="margin-left: -10000vw;"

         loading="lazy" src="resources/image.png?loading-lazy-negative-margin"

         onload="window.negative_margin_onload()">

  </div>

  <script>

    const intersection_observer_promise = new Promise(resolve => {

      function io_callback(entries) {

        assert_equals(entries.length, 1);

        resolve(entries[0].isIntersecting);

      const options = {

        root: document,

        rootMargin: '0px',

        threshold: 1.0,

      const observer = new IntersectionObserver(io_callback, options);

      observer.observe(document.querySelector('#negative_margin'));

});

    const timeout_promise = new Promise(resolve => {

      window.negative_margin_test.step_timeout(resolve, 500);

});

    Promise.all([intersection_observer_promise, timeout_promise]).then(

      window.negative_margin_test.step_func_done(values => {

        assert_equals(values.length, 2);

        assert_equals(values[0], false, "The IntersectionObserver sees that " +

                                        "the image does not intersect the " +

                                        "viewport");

      }));

  </script>

</body>