system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-22 02:26:11 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Tests/LibWeb: Add object-{fit,position} test

Browse source
This commit is contained in:
Tobias Christiansen 2023-10-30 16:45:49 +01:00 committed by Andreas Kling
parent 3b1083c4cb
commit 3c41ac5ae4
3 changed files with 311 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

296
Tests/LibWeb/Ref/object-fit-position.html Normal file
View file

@ -0,0 +1,296 @@
<link rel="match" href="reference/object-fit-position-ref.html"/>
<style>
.images img {
border: 1px solid black;
}
.img-wrapper {
margin-left: 20px;
}
.fit-cover .images img {
object-fit: cover;
}
.fit-contain .images img {
object-fit: contain;
}
.fit-fill .images img {
object-fit: fill;
}
.fit-none .images img {
object-fit: none;
}
.wider img {
width: 100px;
height: 50px;
}
.taller img {
width: 50px;
height: 100px;
}
img.pos-left {
object-position: left;
}
img.pos-right {
object-position: right;
}
img.pos-top {
object-position: top;
}
img.pos-bottom {
object-position: bottom;
}
img.pos-center {
object-position: bottom;
}
img.pos-absolute {
object-position: 20px 30%;
}
</style>
<h2>Object-Fit: Cover</h2>
<div class="fit-cover">
<h3>Box wider</h3>
<div class="wider images">
<div class="img-wrapper">
<h6>Object-Position: Left</h6>
<img class="pos-left" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Right</h6>
<img class="pos-right" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Top</h6>
<img class="pos-top" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Bottom</h6>
<img class="pos-bottom" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Center</h6>
<img class="pos-center" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: 20px 30%</h6>
<img class="pos-absolute" src="assets/car.png">
</div>
</div>
<h3>Box taller</h3>
<div class="taller images">
<div class="img-wrapper">
<h6>Object-Position: Left</h6>
<img class="pos-left" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Right</h6>
<img class="pos-right" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Top</h6>
<img class="pos-top" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Bottom</h6>
<img class="pos-bottom" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Center</h6>
<img class="pos-center" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: 20px 30%</h6>
<img class="pos-absolute" src="assets/car.png">
</div>
</div>
</div>
<h2>Object-Fit: contain</h2>
<div class="fit-contain">
<h3>Box wider</h3>
<div class="wider images">
<div class="img-wrapper">
<h6>Object-Position: Left</h6>
<img class="pos-left" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Right</h6>
<img class="pos-right" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Top</h6>
<img class="pos-top" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Bottom</h6>
<img class="pos-bottom" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Center</h6>
<img class="pos-center" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: 20px 30%</h6>
<img class="pos-absolute" src="assets/car.png">
</div>
</div>
<h3>Box taller</h3>
<div class="taller images">
<div class="img-wrapper">
<h6>Object-Position: Left</h6>
<img class="pos-left" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Right</h6>
<img class="pos-right" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Top</h6>
<img class="pos-top" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Bottom</h6>
<img class="pos-bottom" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Center</h6>
<img class="pos-center" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: 20px 30%</h6>
<img class="pos-absolute" src="assets/car.png">
</div>
</div>
</div>
<h2>Object-Fit: fill</h2>
<div class="fit-fill">
<h3>Box wider</h3>
<div class="wider images">
<div class="img-wrapper">
<h6>Object-Position: Left</h6>
<img class="pos-left" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Right</h6>
<img class="pos-right" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Top</h6>
<img class="pos-top" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Bottom</h6>
<img class="pos-bottom" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Center</h6>
<img class="pos-center" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: 20px 30%</h6>
<img class="pos-absolute" src="assets/car.png">
</div>
</div>
<h3>Box taller</h3>
<div class="taller images">
<div class="img-wrapper">
<h6>Object-Position: Left</h6>
<img class="pos-left" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Right</h6>
<img class="pos-right" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Top</h6>
<img class="pos-top" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Bottom</h6>
<img class="pos-bottom" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Center</h6>
<img class="pos-center" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: 20px 30%</h6>
<img class="pos-absolute" src="assets/car.png">
</div>
</div>
</div>
<h2>Object-Fit: none</h2>
<div class="fit-none">
<h3>Box wider</h3>
<div class="wider images">
<div class="img-wrapper">
<h6>Object-Position: Left</h6>
<img class="pos-left" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Right</h6>
<img class="pos-right" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Top</h6>
<img class="pos-top" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Bottom</h6>
<img class="pos-bottom" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Center</h6>
<img class="pos-center" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: 20px 30%</h6>
<img class="pos-absolute" src="assets/car.png">
</div>
</div>
<h3>Box taller</h3>
<div class="taller images">
<div class="img-wrapper">
<h6>Object-Position: Left</h6>
<img class="pos-left" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Right</h6>
<img class="pos-right" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Top</h6>
<img class="pos-top" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Bottom</h6>
<img class="pos-bottom" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: Center</h6>
<img class="pos-center" src="assets/car.png">
</div>
<div class="img-wrapper">
<h6>Object-Position: 20px 30%</h6>
<img class="pos-absolute" src="assets/car.png">
</div>
</div>
</div>

BIN
Tests/LibWeb/Ref/reference/images/object-fit-position.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 685 KiB

15
Tests/LibWeb/Ref/reference/object-fit-position-ref.html Normal file
View file

@ -0,0 +1,15 @@
<style>
* {
margin: 0;
}
body {
background-color: white;
}
</style>
<!-- To rebase:
1. Open object-fit-position.html in Ladybird
2. Right click > "Take Full Screenshot"
3. Update the image below:
-->
<img src="./images/object-fit-position.png">