mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
Base: Add additional test cases to backgrounds.html
- Add background color to `background-clip` test - Add a mixed `background-repeat: space round` test
This commit is contained in:
parent
05682f8c66
commit
cf89f86dbd
|
@ -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">
|
||||
|
|
Loading…
Reference in a new issue