summaryrefslogtreecommitdiffstats
path: root/layout/reftests/image/image-object-fit-with-background-2.html
blob: e5107a2fdde75e0668c4389bea9520a2cd339b6e (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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-print">
  <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-print 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>