image-object-position-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 offset from the container via 'object-position'. 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-position" offsets the image from its container's content-box, 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-position: 5px 5px;

        width: 32px;

        height: 32px;

        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>