mirror of
https://github.com/SerenityOS/serenity
synced 2024-10-06 16:09:30 +00:00
Tests/LibWeb: Add border-radius
ref test
This is based on the border-radius.html demo page with text and most assets removed. This has to be a screenshot based test as there's not really something else that can be used for comparison. This also makes the test a little incomplete as things like text overflow clipping are not tested, but I'd like to avoid this test being too brittle.
This commit is contained in:
parent
1c012f0a4a
commit
f0be812fc2
BIN
Tests/LibWeb/Ref/assets/car.png
Normal file
BIN
Tests/LibWeb/Ref/assets/car.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 52 KiB |
324
Tests/LibWeb/Ref/border-radius.html
Normal file
324
Tests/LibWeb/Ref/border-radius.html
Normal file
|
@ -0,0 +1,324 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel="match" href="reference/border-radius-ref.html" />
|
||||
<head>
|
||||
<style>
|
||||
.box {
|
||||
width: 50px;
|
||||
height: 50px
|
||||
}
|
||||
|
||||
.box-1 {
|
||||
border: 1px solid #000;
|
||||
border-radius: 10px
|
||||
}
|
||||
|
||||
.box-1-1 {
|
||||
border: 1px solid #000;
|
||||
border-radius: 5px 10px 15px 20px
|
||||
}
|
||||
|
||||
.box-1-5 {
|
||||
border: 1px solid #000;
|
||||
border-radius: 20px
|
||||
}
|
||||
|
||||
.box-1-6 {
|
||||
border: 1px solid #000;
|
||||
border-top-width: 1px;
|
||||
border-right-width: 5px;
|
||||
border-bottom-width: 10px;
|
||||
border-left-width: 12px;
|
||||
border-radius: 20px
|
||||
}
|
||||
|
||||
.box-2 {
|
||||
border: 1px solid #000;
|
||||
border-top-left-radius: 10px
|
||||
}
|
||||
|
||||
.box-1-7 {
|
||||
border: 5px solid #000;
|
||||
border-radius: 15px
|
||||
}
|
||||
|
||||
.box-1-8 {
|
||||
border: 20px solid #000;
|
||||
border-radius: 10px
|
||||
}
|
||||
|
||||
.box-1-9 {
|
||||
border: 20px inset #000;
|
||||
border-radius: 10px
|
||||
}
|
||||
|
||||
.box-1-10 {
|
||||
border: 20px outset #000;
|
||||
border-radius: 10px
|
||||
}
|
||||
|
||||
.box-1-11 {
|
||||
border-top: 20px solid #000;
|
||||
border-radius: 10px
|
||||
}
|
||||
|
||||
.box-1-12 {
|
||||
border-radius: 20px;
|
||||
border-top: 5px solid red;
|
||||
border-right: 10px solid #ff0;
|
||||
border-bottom: 15px solid #0f0;
|
||||
border-left: 20px solid #00f
|
||||
}
|
||||
|
||||
.box-1-13 {
|
||||
border-radius: 15px;
|
||||
border-color: #000;
|
||||
border: 3px solid #000;
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0
|
||||
}
|
||||
|
||||
.box-1-14 {
|
||||
border-radius: 15px;
|
||||
border-color: #000;
|
||||
border: 3px solid #000;
|
||||
border-left-width: 0;
|
||||
border-right-width: 0
|
||||
}
|
||||
|
||||
.box-3 {
|
||||
border: 1px solid #000;
|
||||
border-top-right-radius: 10px
|
||||
}
|
||||
|
||||
.box-4 {
|
||||
border: 1px solid #000;
|
||||
border-bottom-right-radius: 10px
|
||||
}
|
||||
|
||||
.box-5 {
|
||||
border: 1px solid #000;
|
||||
border-bottom-left-radius: 10px
|
||||
}
|
||||
|
||||
.box-6 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 75px
|
||||
}
|
||||
|
||||
.box-7 {
|
||||
background-color: #ff00ff;
|
||||
border-radius: 10px
|
||||
}
|
||||
|
||||
.box-7-1 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: #ff00ff;
|
||||
border-radius: 25px 50px 75px 100px
|
||||
}
|
||||
|
||||
.box-7-2 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: #ff00ff;
|
||||
border-radius: 100px 75px 50px 25px
|
||||
}
|
||||
|
||||
.box-8 {
|
||||
background-color: #ff00ff;
|
||||
border-radius: 20px
|
||||
}
|
||||
|
||||
.box-9 {
|
||||
background-color: #ff00ff;
|
||||
border-radius: 15px
|
||||
}
|
||||
|
||||
.box-10 {
|
||||
background-color: #ff00ff;
|
||||
border-top-left-radius: 10px
|
||||
}
|
||||
|
||||
.box-11 {
|
||||
background-color: #ff00ff;
|
||||
border-top-right-radius: 10px
|
||||
}
|
||||
|
||||
.box-12 {
|
||||
background-color: #ff00ff;
|
||||
border-bottom-right-radius: 10px
|
||||
}
|
||||
|
||||
.box-13 {
|
||||
background-color: #ff00ff;
|
||||
border-bottom-left-radius: 10px
|
||||
}
|
||||
|
||||
.box-14 {
|
||||
background-color: #0f0;
|
||||
border: 1px solid #000;
|
||||
border-radius: 500px
|
||||
}
|
||||
|
||||
.box-15 {
|
||||
background-color: red;
|
||||
border: 1px solid #000;
|
||||
border-radius: 500px
|
||||
}
|
||||
|
||||
.rect {
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
background-color: red
|
||||
}
|
||||
|
||||
.rect-1 {
|
||||
border-radius: 50%
|
||||
}
|
||||
|
||||
.rect-2 {
|
||||
border-radius: 50% 20%/10% 40%;
|
||||
width: 280px;
|
||||
height: 215px;
|
||||
background-color: #5b6dcd
|
||||
}
|
||||
|
||||
.rect-3 {
|
||||
border-top-left-radius: 50%
|
||||
}
|
||||
|
||||
.rect-4 {
|
||||
border-top-right-radius: 50%
|
||||
}
|
||||
|
||||
.rect-5 {
|
||||
border-bottom-left-radius: 50%
|
||||
}
|
||||
|
||||
.rect-6 {
|
||||
border-bottom-right-radius: 50%
|
||||
}
|
||||
|
||||
.rect-7 {
|
||||
border-radius: 10px 100px/120px;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
border: 1px solid #000;
|
||||
background-color: transparent
|
||||
}
|
||||
|
||||
.nut {
|
||||
width: 220px;
|
||||
height: 180px;
|
||||
background-size: 220px 180px;
|
||||
border-radius: 70% 30% 30% 70%/60% 40% 60% 40%;
|
||||
background-image: url(assets/car.png)
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background-image: url(assets/car.png)
|
||||
}
|
||||
|
||||
.rounded-image {
|
||||
background-image: url(assets/car.png);
|
||||
background-repeat: repeat;
|
||||
border-radius: 20px;
|
||||
width: 150px;
|
||||
height: 100px
|
||||
}
|
||||
|
||||
.solid-color {
|
||||
background: red content-box
|
||||
}
|
||||
|
||||
.image {
|
||||
background: center/contain url(car.png) content-box
|
||||
}
|
||||
|
||||
.image-layers {
|
||||
background: center/contain url(car.png) content-box, center/contain url(assets/car.png)
|
||||
}
|
||||
|
||||
.box-background-clip {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 10px solid #000;
|
||||
border-radius: 50px;
|
||||
padding: 10px
|
||||
}
|
||||
|
||||
.positioned {
|
||||
background-color: red;
|
||||
position: relative
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
div {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box box-7"></div>
|
||||
<div class="box box-7-1"></div>
|
||||
<div class="box box-7-2"></div>
|
||||
<div class="box box-8"></div>
|
||||
<div class="box box-9"></div>
|
||||
<div class="box box-10"></div>
|
||||
<div class="box box-11"></div>
|
||||
<div class="box box-12"></div>
|
||||
<div class="box box-13"></div>
|
||||
<div class="rect rect-1"></div>
|
||||
<div class="rect rect-2"></div>
|
||||
<div class="rect rect-3"></div>
|
||||
<div class="rect rect-4"></div>
|
||||
<div class="rect rect-5"></div>
|
||||
<div class="rect rect-6"></div>
|
||||
<div class="rect rect-7"></div>
|
||||
<div class="nut"></div>
|
||||
<div class="screenshot"></div>
|
||||
<div class="rounded-image"></div>
|
||||
<img src="assets/car.png" style="border-radius: 20px; width: 200px">
|
||||
<div class="box-background-clip solid-color"></div>
|
||||
<div class="box-background-clip image"></div>
|
||||
<div class="box-background-clip image-layers"></div>
|
||||
<a style="display: inline-block; border-radius: 50%; overflow: hidden; width: 100px; height: 100px;">
|
||||
<img src="assets/car.png" style="width: 100px; height: 100px">
|
||||
</a>
|
||||
<div class="box" style="border-radius: 10px; overflow: hidden;">
|
||||
<div class="box positioned"></div>
|
||||
</div>
|
||||
<div class="box" style="border-radius: 10px; overflow: hidden;">
|
||||
<div class="box" style="background-color: blue;"></div>
|
||||
</div>
|
||||
<img src="assets/car.png" style="border-radius: 100%; border: 10px solid limegreen;">
|
||||
<div class="box box-1"></div>
|
||||
<div class="box box-1-1"></div>
|
||||
<div class="box box-1-5"></div>
|
||||
<div class="box box-1-6"></div>
|
||||
<div class="box box-1-7"></div>
|
||||
<div class="box box-1-8"></div>
|
||||
<div class="box box-1-9"></div>
|
||||
<div class="box box-1-10"></div>
|
||||
<div class="box box-1-11"></div>
|
||||
<div class="box box-1-12"></div>
|
||||
<div class="box box-1-13"></div>
|
||||
<div class="box box-1-14"></div>
|
||||
<div class="box box-2"></div>
|
||||
<div class="box box-3"></div>
|
||||
<div class="box box-4"></div>
|
||||
<div class="box box-5"></div>
|
||||
<div class="box box-6"></div>
|
||||
<div class="box box-14"></div>
|
||||
<div class="box box-15"></div>
|
||||
</body>
|
||||
</html>
|
15
Tests/LibWeb/Ref/reference/border-radius-ref.html
Normal file
15
Tests/LibWeb/Ref/reference/border-radius-ref.html
Normal file
|
@ -0,0 +1,15 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- To rebase:
|
||||
1. Open border-radius.html in Ladybird
|
||||
2. Resize the window just above the width of the largest element
|
||||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/border-radius-ref.png">
|
BIN
Tests/LibWeb/Ref/reference/images/border-radius-ref.png
Normal file
BIN
Tests/LibWeb/Ref/reference/images/border-radius-ref.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 288 KiB |
Loading…
Reference in a new issue