image-object-fit-with-background-2.html

Enable keyboard shortcuts

<!DOCTYPE html>

<!--

     Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/

-->

<!--

     This testcase ensures that we paint the background around an opaque image,

     when the image is kept from filling the container via 'object-fit' (and

     the img element is fragmented). This is an interesting case because, by

     default, images fill their container, which means we can often optimize

     away the background completely. BUT, if "object-fit" prevents the image

     from filling its container, we can't optimize away the background; it need

     to be painted in the uncovered area.

-->

<html class="reftest-paged">

  <head>

    <meta charset="utf-8">

    <style type="text/css">

      img.test {

        background: salmon;

        object-fit: none;

        width: 32px;

        /* We make the height 6in larger than the image's intrinsic height,

         * which gives us the following happy results:

         *  (1) the <img> will split over several 3in tall reftest-paged cards

         *      (so, we get to test fragmentation).

         *  (2) the image pixels end up on the second fragment (not the first),

         *      so we get to test image-data painting on later fragments.

         *  (3) the reference case can easily match us using a simple img

         *      with 3in-tall divs before & after it.

*/

        height: calc(32px + 6in);

        display: block; /* Required for fragmentation */

    </style>

  </head>

  <body>

    <img class="test" src="blue-32x32.png">

  </body>

</html>