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>
|
