mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 05:47:35 +00:00
Base: Add CSS background test page
Also organized the welcome page list slightly.
This commit is contained in:
Sam Atkins
Andreas Kling
parent
532f1e859d
commit
368595d850
2 changed files with 218 additions and 3 deletions
214
Base/res/html/misc/backgrounds.html
Normal file
214
Base/res/html/misc/backgrounds.html
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
<!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') padding-box content-box</code>
|
||||
<div class="box" style="background: url('background-repeat.png') padding-box content-box"></div>
|
||||
</div>
|
||||
<div class="example">
|
||||
<code>
|
||||
background-image: url('background-repeat.png');<br/>
|
||||
background-origin: padding-box;<br/>
|
||||
background-clip: content-box;
|
||||
</code>
|
||||
<div class="box" style="background-image: url('background-repeat.png'); 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>
|
||||
|
||||
<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>
|
||||
|
|
@ -77,6 +77,8 @@
|
|||
<li><h3>CSSOM</h3></li>
|
||||
<li><a href="computed-style.html">Computed style</a></li>
|
||||
<li><a href="supports.html">CSS.supports() and @supports</a></li>
|
||||
<li><a href="attributes.html">Attributes</a></li>
|
||||
<li><a href="class-list.html">Class List</a></li>
|
||||
<li><h3>Selectors</h3></li>
|
||||
<li><a href="selectors.html">Selectors</a></li>
|
||||
<li><a href="attrselectors.html">Attribute selectors</a></li>
|
||||
|
|
@ -92,6 +94,8 @@
|
|||
<li><a href="not-selector.html">:not</a></li>
|
||||
<li><a href="hover.html">:hover</a></li>
|
||||
<li><h3>Properties</h3></li>
|
||||
<li><a href="backgrounds.html">Backgrounds</a></li>
|
||||
<li><a href="background-repeat-test.html">Background-repeat</a></li>
|
||||
<li><a href="box-shadow.html">Box-shadow</a></li>
|
||||
<li><a href="opacity.html">Opacity</a></li>
|
||||
<li><a href="text-decoration.html">Text-decoration</a></li>
|
||||
|
|
@ -110,8 +114,6 @@
|
|||
<li><a href="float-3.html">Floating boxes with overflow=hidden</a></li>
|
||||
<li><a href="clear-1.html">Float clearing</a></li>
|
||||
<li><a href="overflow.html">Overflow</a></li>
|
||||
<li><a href="attributes.html">Attributes</a></li>
|
||||
<li><a href="class-list.html">Class List</a></li>
|
||||
<li><h3>Features</h3></li>
|
||||
<li><a href="css.html">Basic functionality</a></li>
|
||||
<li><a href="colors.html">css colors</a></li>
|
||||
|
|
@ -122,7 +124,6 @@
|
|||
<li><a href="margin-collapse-1.html">margin collapsing 1</a></li>
|
||||
<li><a href="margin-collapse-2.html">margin collapsing 2</a></li>
|
||||
<li><a href="position-absolute-from-edges.html">position: absolute, offset from edges</a></li>
|
||||
<li><a href="background-repeat-test.html">background image with repetition rules</a></li>
|
||||
<li><a href="link-over-zindex-block.html">link elements with background box placed with z-index</a></li>
|
||||
<li><a href="percent-css.html">Percentage values</a></li>
|
||||
<li><a href="position-absolute-top-left.html">position: absolute; for top and left</a></li>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue