image-object-fit-with-background-1.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'. 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>

  <head>

    <meta charset="utf-8">

    <style type="text/css">

      .test {

        background: salmon;

        object-fit: none;

        width: 40px;

        height: 40px;

        display: block;

        margin-bottom: 2px;

    </style>

  </head>

  <body>

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

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

    <object class="test"   data="blue-32x32.png"></object>

    <video  class="test" poster="blue-32x32.png"></video>

  </body>

</html>