beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-22 07:30:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

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

Browse source
This commit is contained in:
MacDue 2023-04-02 23:02:43 +01:00 committed by Andreas Kling
parent bed55ac669
commit 0abd469d24
Notes: sideshowbarker 2024-07-17 02:29:45 +09:00 
Author: https://github.com/MacDue
Commit: https://github.com/SerenityOS/serenity/commit/0abd469d24
Pull-request: https://github.com/SerenityOS/serenity/pull/18157
Reviewed-by: https://github.com/AtkinsSJ
2 changed files with 26 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
Base/res/html/misc/background-position-xy.html Normal file
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>

1
Base/res/html/misc/welcome.html
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>