negative-offset-repeat-transformed.html

<!DOCTYPE HTML>
<html>
    <meta name="fuzzy" content="maxDifference=0-48;totalPixels=0-3381">
    <style type="text/css">
    body { overflow:hidden; }

    .s300
    {
        width: 30px;
        height: 30px;
    }

    .s250
    {
        width: 25px;
        height: 25px;
    }

    .s200
    {
        width: 20px;
        height: 20px;
    }

    div
    {
        margin: 6px;
        border: 1px dotted green;
        background-image: url(resources/gradient.gif);
    }

    div
    {
        padding: 1px;
        float: left;
    }

    p
    {
        clear: both;
    }

    .negative
    {
        background-position: -13px -13px;
    }

    .positive
    {
        background-position: 13px 13px;
    }
    </style>
</head>
<body>
    <p>
        Test for <i><a href="http://bugs.webkit.org/show_bug.cgi?id=5399">http://bugs.webkit.org/show_bug.cgi?id=5399</a>
        no-repeat on negatively positioned background images are ignored</i>.
    </p>
    <p>Element with background image starting at (-13, -13) with no-repeat set:</p>
    <div class="negative s300" style="background-repeat: no-repeat;"></div>
    <div class="negative s250" style="background-repeat: no-repeat;"></div>
    <div class="negative s200" style="background-repeat: no-repeat;"></div>

    <p>Element with background image starting at (-13, -13) with repeat-y set:</p>
    <div class="negative s300" style="background-repeat: repeat-y"></div>
    <div class="negative s250" style="background-repeat: repeat-y"></div>
    <div class="negative s200" style="background-repeat: repeat-y"></div>

    <p>Element with background image starting at (-13, -13) with repeat-x set:</p>
    <div class="negative s300" style="background-repeat: repeat-x"></div>
    <div class="negative s250" style="background-repeat: repeat-x"></div>
    <div class="negative s200" style="background-repeat: repeat-x"></div>

    <p>Element with background image starting at (13, 13) with no-repeat set:</p>
    <div class="positive s300" style="background-repeat: no-repeat;"></div>
    <div class="positive s250" style="background-repeat: no-repeat;"></div>
    <div class="positive s200" style="background-repeat: no-repeat;"></div>

    <p>Element with background image starting at (13, 13) with repeat-y set:</p>
    <div class="positive s300" style="background-repeat: repeat-y"></div>
    <div class="positive s250" style="background-repeat: repeat-y"></div>
    <div class="positive s200" style="background-repeat: repeat-y"></div>

    <p>Element with background image starting at (13, 13) with repeat-x set:</p>
    <div class="positive s300" style="background-repeat: repeat-x"></div>
    <div class="positive s250" style="background-repeat: repeat-x"></div>
    <div class="positive s200" style="background-repeat: repeat-x"></div>

    <p style="position:absolute;height:5000px"></p>
    <table style="clear:both; transform: translate(650px, -150px) rotate(45deg); -webkit-transform-origin: 100% 0" border=5><tr><td>
    <div class="negative s300" style="background-repeat: no-repeat;"></div>
    <div class="negative s250" style="background-repeat: no-repeat;"></div>
    <div class="negative s200" style="background-repeat: no-repeat;"></div>

    <p>Element with background image starting at (-13, -13) with repeat-y set:</p>
    <div class="negative s300" style="background-repeat: repeat-y"></div>
    <div class="negative s250" style="background-repeat: repeat-y"></div>
    <div class="negative s200" style="background-repeat: repeat-y"></div>

    <p>Element with background image starting at (-13, -13) with repeat-x set:</p>
    <div class="negative s300" style="background-repeat: repeat-x"></div>
    <div class="negative s250" style="background-repeat: repeat-x"></div>
    <div class="negative s200" style="background-repeat: repeat-x"></div>

    <p>Element with background image starting at (13, 13) with no-repeat set:</p>
    <div class="positive s300" style="background-repeat: no-repeat;"></div>
    <div class="positive s250" style="background-repeat: no-repeat;"></div>
    <div class="positive s200" style="background-repeat: no-repeat;"></div>

    <p>Element with background image starting at (13, 13) with repeat-y set:</p>
    <div class="positive s300" style="background-repeat: repeat-y"></div>
    <div class="positive s250" style="background-repeat: repeat-y"></div>
    <div class="positive s200" style="background-repeat: repeat-y"></div>

    <p>Element with background image starting at (13, 13) with repeat-x set:</p>
    <div class="positive s300" style="background-repeat: repeat-x"></div>
    <div class="positive s250" style="background-repeat: repeat-x"></div>
    <div class="positive s200" style="background-repeat: repeat-x"></div>
</table>
</body>
</html>
chromium/third_party/blink/web_tests/fast/backgrounds/repeat/negative-offset-repeat-transformed.html
