blob: 49defbcd7ca181865b692b426b0ac58ae3e7448d [file] [log] [blame]
<!DOCTYPE html>
<!--
| Tests that opaque images render correctly and exercises an optimization
| code path where a background color does not need to be rendered if an
| opaque image covers an element's frame instead.
-->
<html>
<head>
<style>
div {
width: 300px;
height: 80px;
background-color: #f88;
background-repeat: no-repeat;
}
</style>
<script>
if (window.testRunner) {
window.testRunner.waitUntilDone();
}
var image = new Image();
var image_name = 'cobalt_opaque.jpg';
image.onload = function() {
var image_elements = document.getElementsByClassName('image');
for (var i = 0; i < image_elements.length; ++i) {
image_elements[i].style.backgroundImage =
'url(' + image_name + ')';
}
if (window.testRunner) {
window.testRunner.notifyDone();
}
}
image.src = image_name;
</script>
</head>
<body>
<div class='image' style="background-repeat: repeat;"></div>
<div class='image' style="width: 100px; background-size: cover;"></div>
<div class='image' style="background-size: contain;"></div>
<!-- Matches the image's dimensions exactly. -->
<div class='image'
style="width: 87px; height: 100px; background-size: contain;"></div>
</body>
</html>