mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
cf89f86dbd
- Add background color to `background-clip` test - Add a mixed `background-repeat: space round` test
229 lines
9.8 KiB
HTML
229 lines
9.8 KiB
HTML
<!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>
|