ErisCyan / minerva
Transfer to URL with SHA Find file
Newer
Older
minerva / Base / res / html / misc / backgrounds.html
@minerva minerva on 13 Jul 9 KB Initial commit
Raw Blame History 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>CSS Background Tests</title>
    <style>
        .example {
            width: 45%;
            display: inline-block;
        }

        .box {
            width: 180px;
            height: 160px;
            border: 1px solid black;
            padding: 5px 10px 15px 20px;
            overflow: auto;
        }

        .force-scroll {
            width: 500px;
            height: 500px;
        }

        code {
            display: block;
        }
    </style>
</head>
<body>
    <h1>CSS Background Tests</h1>
    <p>These are in no way exhaustive, but they cover a variety of different features.</p>
    <p>The left and right columns should look identical - left uses a single background shorthand, and right uses separate properties.</p>

    <h2>Attachment</h2>
    <h3>Should remain motionless relative to the browser window</h3>
    <div class="example">
        <code>background: url('background-repeat.png') fixed</code>
        <div class="box" style="background: url('background-repeat.png') fixed">
            <div class="force-scroll"></div>
        </div>
    </div>
    <div class="example">
        <code>
            background-image: url('background-repeat.png');<br/>
            background-attachment: fixed;
        </code>
        <div class="box" style="background-image: url('background-repeat.png'); background-attachment: fixed;">
            <div class="force-scroll"></div>
        </div>
    </div>

    <h3>Should scroll with box content</h3>
    <div class="example">
        <code>background: url('background-repeat.png') local</code>
        <div class="box" style="background: url('background-repeat.png') local">
            <div class="force-scroll"></div>
        </div>
    </div>
    <div class="example">
        <code>
            background-image: url('background-repeat.png');<br/>
            background-attachment: local;
        </code>
        <div class="box" style="background-image: url('background-repeat.png'); background-attachment: local">
            <div class="force-scroll"></div>
        </div>
    </div>

    <h3>Should remain motionless relative to the box</h3>
    <div class="example">
        <code>background: url('background-repeat.png') scroll</code>
        <div class="box" style="background: url('background-repeat.png') scroll">
            <div class="force-scroll"></div>
        </div>
    </div>
    <div class="example">
        <code>
            background-image: url('background-repeat.png');<br/>
            background-attachment: scroll;
        </code>
        <div class="box" style="background-image: url('background-repeat.png'); background-attachment: scroll">
            <div class="force-scroll"></div>
        </div>
    </div>

    <h2>Position</h2>
    <div class="example">
        <code>background: url('background-repeat.png') bottom 5% right 10px no-repeat</code>
        <div class="box" style="background: url('background-repeat.png') bottom 5% right 10px no-repeat"></div>
    </div>
    <div class="example">
        <code>
            background-image: url('background-repeat.png');<br/>
            background-position: bottom 5% right 10px no;<br/>
            background-repeat: no-repeat;
        </code>
        <div class="box" style="background-image: url('background-repeat.png'); background-position: bottom 5% right 10px; background-repeat: no-repeat"></div>
    </div>

    <h2>Clip and Origin</h2>

    <h3>Images should fill the content-box, with padding on each side. (5px, 10px, 15px, 20px) and aligned so their top-left corner will be at the top-left of the box. This produces clipping.</h3>
    <div class="example">
        <code>background: url('background-repeat.png') yellow padding-box content-box</code>
        <div class="box" style="background: url('background-repeat.png') yellow padding-box content-box"></div>
    </div>
    <div class="example">
        <code>
            background-image: url('background-repeat.png');<br/>
            background-color: yellow;<br/>
            background-origin: padding-box;<br/>
            background-clip: content-box;
        </code>
        <div class="box" style="background-image: url('background-repeat.png'); background-color: yellow; background-origin: padding-box; background-clip: content-box"></div>
    </div>

    <h2>Size</h2>
    <h3>Image should be stretched as large as the box, without distorting or clipping</h3>
    <div class="example">
        <code>background: url('background-repeat.png') center / contain</code>
        <div class="box" style="background: url('background-repeat.png') center / contain"></div>
    </div>
    <div class="example">
        <code>
            background-image: url('background-repeat.png');<br/>
            background-position: center;<br/>
            background-size: contain;
        </code>
        <div class="box" style="background-image: url('background-repeat.png'); background-position: center; background-size: contain"></div>
    </div>

    <h3>Image should be stretched so that the whole box is covered, without distorting</h3>
    <div class="example">
        <code>background: url('background-repeat.png') center / cover</code>
        <div class="box" style="background: url('background-repeat.png') center / cover"></div>
    </div>
    <div class="example">
        <code>
            background-image: url('background-repeat.png');
            background-position: center;
            background-size: cover;
        </code>
        <div class="box" style="background-image: url('background-repeat.png'); background-position: center; background-size: cover"></div>
    </div>

    <h3>Images should be squashed and repeated</h3>
    <div class="example">
        <code>background: url('background-repeat.png') top / 50% 25px</code>
        <div class="box" style="background: url('background-repeat.png') top / 50% 25px"></div>
    </div>
    <div class="example">
        <code>
            background-image: url('background-repeat.png');
            background-position: top;
            background-size: 50% 25px;
        </code>
        <div class="box" style="background-image: url('background-repeat.png'); background-position: top; background-size: 50% 25px"></div>
    </div>

    <h2>Repeat</h2>
    <p>See <a href="background-repeat-test.html">here</a> for in-depth background-repeat tests.</p>
    <h3>Images should all be whole, and be spaced apart to fill the box</h3>
    <div class="example">
        <code>background: url('background-repeat.png') space</code>
        <div class="box" style="background: url('background-repeat.png') space"></div>
    </div>
    <div class="example">
        <code>
            background-image: url('background-repeat.png');
            background-repeat: space;
        </code>
        <div class="box" style="background-image: url('background-repeat.png'); background-repeat: space"></div>
    </div>

    <h3>Images should all be whole, and be distorted to fill the box</h3>
    <div class="example">
        <code>background: url('background-repeat.png') round</code>
        <div class="box" style="background: url('background-repeat.png') round"></div>
    </div>
    <div class="example">
        <code>
            background-image: url('background-repeat.png');<br/>
            background-repeat: round;
        </code>
        <div class="box" style="background-image: url('background-repeat.png'); background-repeat: round"></div>
    </div>

    <h3>Images should all be whole, and be shrunk and spaced to fill the box</h3>
    <div class="example">
        <code>background: url('background-repeat.png') space round</code>
        <div class="box" style="background: url('background-repeat.png') space round"></div>
    </div>
    <div class="example">
        <code>
            background-image: url('background-repeat.png');<br/>
            background-repeat: space round;
        </code>
        <div class="box" style="background-image: url('background-repeat.png'); background-repeat: space round"></div>
    </div>

    <h2>Multiple backgrounds</h2>
    <h3>Should have one smiley face in each corner and one in the center</h3>
    <div class="example">
        <code>
            background: url('background-repeat.png') no-repeat top 5px left 5px,<br/>
                url('background-repeat.png') no-repeat top 5px right 5px,<br/>
                url('background-repeat.png') no-repeat bottom 5px left 5px,<br/>
                url('background-repeat.png') no-repeat bottom 5px right 5px,<br/>
                url('background-repeat.png') no-repeat center cyan;
        </code>
        <div class="box" style="background: url('background-repeat.png') no-repeat top 5px left 5px, url('background-repeat.png') no-repeat top 5px right 5px, url('background-repeat.png') no-repeat bottom 5px left 5px, url('background-repeat.png') no-repeat bottom 5px right 5px, url('background-repeat.png') no-repeat center cyan"></div>
    </div>
    <div class="example">
        <code>
            background-color: cyan;<br/>
            background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;<br/>
            background-position: top 5px left 5px, top 5px right 5px, bottom 5px left 5px, bottom 5px right 5px, center;<br/>
            background-image: url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png');
        </code>
        <div class="box" style="background-color: cyan;
            background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
            background-position: top 5px left 5px, top 5px right 5px, bottom 5px left 5px, bottom 5px right 5px, center;
            background-image: url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png');"></div>
    </div>
</body>

</html>