<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>CSS Test: 'Background-position' with three and four values</title>
        <link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
        <link rel="help" href="http://www.w3.org/TR/css3-background/#background-position" />
        <meta name="flags" content="" />
        <meta name="assert" content="If three or four values are given to 'background-position', then each percentage or length value represents an offset from the edge specified by the keyword." />
        <style type="text/css">
            div
            {
                width: 3in;
                height: 2in;
                border: thick solid black;
                margin: 10px;
                background-image: url("support/blue_color.png");
                background-repeat: no-repeat;
            }
            .reference
            {
                background-position: right center;
            }
            .test1
            {
                background-position: left 2in center;
            }
            .test2
            {
                background-position: left 2in top 50%;
            }
        </style>
    </head>
    <body>
        <p>Test passes if the content of the three black boxes is identical.</p>
        <div class="reference"></div>
        <div class="test1"></div>
        <div class="test2"></div>
    </body>
</html>