Base: Add CSS `background` test page

Also organized the welcome page list slightly.
author: Sam Atkins <atkinssj@serenityos.org> 2021-11-04 11:33:00 +0000
committer: Andreas Kling <kling@serenityos.org> 2021-11-10 14:38:49 +0100
commit: 368595d85029960a9ef2d6fe4e4afe18181b6652 (patch)
tree: 5dcb6cf382eff91a6b90969176233ccfd117d678 /Base
parent: 532f1e859da975d529ec8a6a32958472362dcc85 (diff)
download: serenity-368595d85029960a9ef2d6fe4e4afe18181b6652.zip
2 files changed, 218 insertions, 3 deletions
diff --git a/Base/res/html/misc/backgrounds.html b/Base/res/html/misc/backgrounds.html
new file mode 100644
index 0000000000..7103b56756
--- /dev/null
+++ b/Base/res/html/misc/backgrounds.html
@@ -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>
diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html
index 51aa68eb68..edecc2152d 100644
--- a/Base/res/html/misc/welcome.html
+++ b/Base/res/html/misc/welcome.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>
author	Sam Atkins <atkinssj@serenityos.org>	2021-11-04 11:33:00 +0000
committer	Andreas Kling <kling@serenityos.org>	2021-11-10 14:38:49 +0100
commit	368595d85029960a9ef2d6fe4e4afe18181b6652 (patch)
tree	5dcb6cf382eff91a6b90969176233ccfd117d678 /Base
parent	532f1e859da975d529ec8a6a32958472362dcc85 (diff)
download	serenity-368595d85029960a9ef2d6fe4e4afe18181b6652.zip