﻿<!DOCTYPE html>
<html>
    <head>
        <script>
            if (window.layoutTestController)
            layoutTestController.dumpAsText();
        </script>
        <style>
            #a {
                background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
                -webkit-background-size: auto 50px;
                -webkit-box-sizing: border-box;
                border: 1px solid black;
                width: 100px;
                height: 2px;
            }
            #b {
                background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
                -webkit-background-size: 50px auto;
                -webkit-box-sizing: border-box;
                border: 1px solid black;
                width: 2px;
                height: 100px;
            }
            #c {
                background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
                -webkit-background-size: contain;
                -webkit-box-sizing: border-box;
                border: 1px solid black;
                width: 2px;
                height: 100px;
            }
            #d {
                background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
                -webkit-background-size: contain;
                -webkit-box-sizing: border-box;
                border: 1px solid black;
                width: 100px;
                height: 2px;
            }
        </style>
    </head>
    <body>
        <p>Test of some edge cases for background fills with generated images. Test passed if it rendered and there was no division by zero.</p>
        <div id="a"></div>
        <div id="b"></div>
        <div id="c"></div>
        <div id="d"></div>
    </body>
</html>