summaryrefslogtreecommitdiff
path: root/Base/res
diff options
context:
space:
mode:
authorSam Atkins <atkinssj@serenityos.org>2021-11-15 21:08:49 +0000
committerAndreas Kling <kling@serenityos.org>2021-11-17 22:20:01 +0100
commitcf89f86dbd592ea46697bfabd309d9651a7f5324 (patch)
treef00912971d6e573e72ed2f530665ee15b50f4f88 /Base/res
parent05682f8c6632cb4e6eb2b83b3398f08ffa35a41b (diff)
downloadserenity-cf89f86dbd592ea46697bfabd309d9651a7f5324.zip
Base: Add additional test cases to backgrounds.html
- Add background color to `background-clip` test - Add a mixed `background-repeat: space round` test
Diffstat (limited to 'Base/res')
-rw-r--r--Base/res/html/misc/backgrounds.html20
1 files changed, 17 insertions, 3 deletions
diff --git a/Base/res/html/misc/backgrounds.html b/Base/res/html/misc/backgrounds.html
index 7103b56756..b7880314f5 100644
--- a/Base/res/html/misc/backgrounds.html
+++ b/Base/res/html/misc/backgrounds.html
@@ -102,16 +102,17 @@
<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>
+ <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-origin: padding-box; background-clip: content-box"></div>
+ <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>
@@ -185,6 +186,19 @@
<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">