<!DOCTYPE html>
<style>
    body {
        margin: 0;
        overflow: hidden;
    }

    div {
        background-image:
            url(resources/SquirrelFish.svg),
            url(../../block/positioning/resources/icon-gold.png),
            url(resources/flower.jpg),
            linear-gradient(to bottom right, black, transparent, black);
        background-repeat: no-repeat;
        border: solid;
        margin: 2px;
        float: left;
        background-color: lightblue;
    }

    div.landscape {
        width: 390px;
        height: 140px;
    }

    div.portrait {
        width: 190px;
        height: 290px;
    }

    div.contain {
        background-size: contain;
    }

    div.cover {
        background-size: cover;
    }

    div.contain-cover {
        background-size: contain, cover;
    }

    div.cover-contain {
        background-size: cover, contain;
    }

</style>
<div class="landscape contain"></div>
<div class="landscape contain-cover"></div>
<div class="landscape cover"></div>
<div class="landscape cover-contain"></div>
<div class="portrait contain"></div>
<div class="portrait contain-cover"></div>
<div class="portrait cover"></div>
<div class="portrait cover-contain"></div>

<script>
    if (window.testRunner) {
        for (var i = 0; i < 3; ++i)
            testRunner.zoomPageOut();
    } else {
        document.body.style.zoom = 2/3;
    }
</script>