mirror of
https://github.com/RGBCube/serenity
synced 2025-07-26 08:27:45 +00:00
Tests/LibWeb: Add object-{fit,position} test
This commit is contained in:
Tobias Christiansen
Andreas Kling
parent
3b1083c4cb
commit
3c41ac5ae4
3 changed files with 311 additions and 0 deletions
296
Tests/LibWeb/Ref/object-fit-position.html
Normal file
296
Tests/LibWeb/Ref/object-fit-position.html
Normal 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
BIN
Tests/LibWeb/Ref/reference/images/object-fit-position.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 685 KiB |
15
Tests/LibWeb/Ref/reference/object-fit-position-ref.html
Normal file
15
Tests/LibWeb/Ref/reference/object-fit-position-ref.html
Normal 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">
|
||||||
Loading…
Add table
Add a link
Reference in a new issue