Base: Add background-position-x/y test page

This commit is contained in:
MacDue 2023-04-02 23:02:43 +01:00 committed by Andreas Kling
parent bed55ac669
commit 0abd469d24
2 changed files with 26 additions and 0 deletions

View file

@ -0,0 +1,25 @@
<style>
.example {
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid black;
background-repeat: no-repeat;
background-size: 30px 30px;
background-image: linear-gradient(red, red);
}
</style>
<b>background-position-x</b><br>
<div class="example" style="background-position-x: left"></div>
<div class="example" style="background-position-x: center"></div>
<div class="example" style="background-position-x: 25%"></div>
<div class="example" style="background-position-x: 2rem"></div>
<div class="example" style="background-position-x: right 32px"></div>
<br>
<br>
<b>background-position-y</b><br>
<div class="example" style="background-position-y: top"></div>
<div class="example" style="background-position-y: center"></div>
<div class="example" style="background-position-y: 25%"></div>
<div class="example" style="background-position-y: 2rem"></div>
<div class="example" style="background-position-y: bottom 32px"></div>

View file

@ -114,6 +114,7 @@
<li><a href="backdrop-filter.html">backdrop-filter</a></li>
<li><a href="backgrounds.html">Backgrounds</a></li>
<li><a href="background-repeat-test.html">Background-repeat</a></li>
<li><a href="background-position-xy.html">Background-position-x/y</a></li>
<li><a href="box-shadow.html">Box-shadow</a></li>
<li><a href="text-shadow.html">Text-shadow</a></li>
<li><a href="opacity.html">Opacity</a></li>