mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-29 08:11:13 +00:00
715f033007
This change will make it easier to disable screenshot comparison tests on a specific platform or have per-platform expectations. Additionally, it's nice to be able to tell if a ref-test uses a screenshot as an expectation by looking at the test path.
325 lines
6.7 KiB
HTML
325 lines
6.7 KiB
HTML
<!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>
|