Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/svg/as-background-image/background-image-preserveaspectRatio-support.html 

<!DOCTYPE html>
<html>
<head>
    <title>preserveAspectRatio test for background-image</title>
    <style>
        th {
            background-color: #dd9;
            font-family: sans-serif;
        }

        img, div {
            /* background-color: #EBF; */
            border: 2px dashed maroon;
            height: 50px;
            left: 100px;
            overflow: visible;
            padding: 3px;
            top: 20px;
            width: 200px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>
                viewBox?
            </th>
            <th>
                preserve&shy;Aspect&shy;Ratio
            </th>
            <th>
                &lt;img&gt;
            </th>
            <th>
                &lt;div&gt;
            </th>
        </tr>
        <tr>
            <th rowspan=4>
                No viewBox
            </th>
            <th>
            </th>
            <td>
                <img src="../as-image/resources/circle-default-default.svg" />
            </td>
            <td>
                <div style="background: url(../as-image/resources/circle-default-default.svg)"></div>
            </td>
        </tr>
        <tr>
            <th>
                none
            </th>
            <td>
                <img src="../as-image/resources/circle-default-none.svg" />
            </td>
            <td>
                <div style="background: url(../as-image/resources/circle-default-none.svg)"></div>
            </td>
        </tr>
        <tr>
            <th>
                meet
            </th>
            <td>
                <img src="../as-image/resources/circle-default-meet.svg" />
            </td>
            <td>
                <div style="background: url(../as-image/resources/circle-default-meet.svg)"></div>
            </td>
        </tr>
        <tr>
            <th>
                slice
            </th>
            <td>
                <img src="../as-image/resources/circle-default-slice.svg" />
            </td>
            <td>
                <div style="background: url(../as-image/resources/circle-default-slice.svg)"></div>
            </td>
        </tr>
        <tr>
            <th rowspan=4>
                viewBox
            </th>
            <th>
            </th>
            <td>
                <img src="../as-image/resources/circle-viewbox-default.svg" />
            </td>
            <td>
                <div style="background: url(../as-image/resources/circle-viewbox-default.svg)"></div>
            </td>
        </tr>
        <tr>
            <th>
                none
            </th>
            <td>
                <img src="../as-image/resources/circle-viewbox-none.svg" />
            </td>
            <td>
                <div style="background: url(../as-image/resources/circle-viewbox-none.svg)"></div>
            </td>
        </tr>
        <tr>
            <th>
                meet
            </th>
            <td>
                <img src="../as-image/resources/circle-viewbox-meet.svg" />
            </td>
            <td>
                <div style="background: url(../as-image/resources/circle-viewbox-meet.svg)"></div>
            </td>
        </tr>
        <tr>
            <th>
                slice
            </th>
            <td>
                <img src="../as-image/resources/circle-viewbox-slice.svg" />
            </td>
            <td>
                <div style="background: url(../as-image/resources/circle-viewbox-slice.svg)"></div>
            </td>
        </tr>
    </table>
</body>
</html>