mirror of
https://github.com/fergalmoran/ladybird.git
synced 2025-12-26 11:20:03 +00:00
19b22fbb4a
This adds test pages for border-radius, CSS custom properties and flexboxes to the default page in the Browser. I used those files to develop said features and they can be of use when debugging in the future or just to showcase those features.
231 lines
5.0 KiB
HTML
231 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<style>
|
|
.box {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
.box-1 {
|
|
border: 1px solid black;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.box-1-1 {
|
|
border: 1px solid black;
|
|
border-radius: 5px 10px 15px 20px;
|
|
}
|
|
|
|
.box-1-5 {
|
|
border: 1px solid black;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.box-1-6 {
|
|
border: 1px solid black;
|
|
border-top-width: 1px;
|
|
border-right-width: 5px;
|
|
border-bottom-width: 10px;
|
|
border-left-width: 12px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.box-2 {
|
|
border: 1px solid black;
|
|
border-top-left-radius: 10px;
|
|
}
|
|
|
|
.box-1-7 {
|
|
border: 5px solid black;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.box-1-8 {
|
|
border: 20px solid black;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.box-1-9 {
|
|
border: 20px inset black;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.box-1-10 {
|
|
border: 20px outset black;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.box-3 {
|
|
border: 1px solid black;
|
|
border-top-right-radius: 10px;
|
|
}
|
|
|
|
.box-4 {
|
|
border: 1px solid black;
|
|
border-bottom-right-radius: 10px;
|
|
}
|
|
|
|
.box-5 {
|
|
border: 1px solid black;
|
|
border-bottom-left-radius: 10px;
|
|
}
|
|
|
|
.box-6 {
|
|
width: 200px;
|
|
height: 200px;
|
|
border: 1px solid black;
|
|
border-radius: 75px;
|
|
}
|
|
|
|
.box-7 {
|
|
background-color: magenta;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.box-7-1 {
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: magenta;
|
|
border-radius: 25px 50px 75px 100px;
|
|
}
|
|
|
|
.box-7-2 {
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: magenta;
|
|
border-radius: 100px 75px 50px 25px;
|
|
}
|
|
|
|
.box-8 {
|
|
background-color: magenta;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.box-9 {
|
|
background-color: magenta;
|
|
border-top-left-radius: 10px;
|
|
}
|
|
|
|
.box-10 {
|
|
background-color: magenta;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.box-11 {
|
|
background-color: magenta;
|
|
border-top-right-radius: 10px;
|
|
}
|
|
|
|
.box-12 {
|
|
background-color: magenta;
|
|
border-bottom-right-radius: 10px;
|
|
}
|
|
|
|
.box-13 {
|
|
background-color: magenta;
|
|
border-bottom-left-radius: 10px;
|
|
}
|
|
|
|
.box-14 {
|
|
background-color: lime;
|
|
border: 1px solid black;
|
|
border-radius: 500px;
|
|
}
|
|
|
|
.box-15 {
|
|
background-color: red;
|
|
border: 1px solid black;
|
|
border-radius: 500px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h3>Border-radius</h3>
|
|
<p>The boxes are 50x50px and have a background-color</p>
|
|
<em>All round 10px</em>
|
|
<div class="box box-7"></div>
|
|
<br>
|
|
<em>All round 25,50,75,100px</em>
|
|
<div class="box box-7-1"></div>
|
|
<br>
|
|
<em>All round 100,75,50,25px</em>
|
|
<div class="box box-7-2"></div>
|
|
<br>
|
|
<em>All round 20px</em>
|
|
<div class="box box-8"></div>
|
|
<br>
|
|
<em>All round 15px 5px thick</em>
|
|
<div class="box box-9"></div>
|
|
<br>
|
|
<em>top-left 10px</em>
|
|
<div class="box box-10"></div>
|
|
<br>
|
|
<em>top-right 10px</em>
|
|
<div class="box box-11"></div>
|
|
<br>
|
|
<em>bottom-right 10px</em>
|
|
<div class="box box-12"></div>
|
|
<br>
|
|
<em>bottom-left 10px</em>
|
|
<div class="box box-13"></div>
|
|
<br>
|
|
<br>
|
|
|
|
<p>The boxes are 50x50px</p>
|
|
<em>All round 10px</em>
|
|
<div class="box box-1"></div>
|
|
<br>
|
|
<em>All round 5,10,15,20px</em>
|
|
<div class="box box-1-1"></div>
|
|
<br>
|
|
<em>All round 20px</em>
|
|
<div class="box box-1-5"></div>
|
|
<br>
|
|
<em>All round 20px, border widths 1px 5px 10px 12px</em>
|
|
<div class="box box-1-6"></div>
|
|
<br>
|
|
<em>All round 15px 5px thick</em>
|
|
<div class="box box-1-7"></div>
|
|
<br>
|
|
<em>All round 10px 20px thick</em>
|
|
<div class="box box-1-8"></div>
|
|
<br>
|
|
<em>All round 10px 20px thick inset</em>
|
|
<div class="box box-1-9"></div>
|
|
<br>
|
|
<em>All round 10px 20px thick outset</em>
|
|
<div class="box box-1-10"></div>
|
|
<br>
|
|
<em>top-left 10px</em>
|
|
<div class="box box-2"></div>
|
|
<br>
|
|
<em>top-right 10px</em>
|
|
<div class="box box-3"></div>
|
|
<br>
|
|
<em>bottom-right 10px</em>
|
|
<div class="box box-4"></div>
|
|
<br>
|
|
<em>bottom-left 10px</em>
|
|
<div class="box box-5"></div>
|
|
<br>
|
|
<br>
|
|
|
|
<p>200px box, 75px radius</p>
|
|
<div class="box box-6"></div>
|
|
<br>
|
|
<br>
|
|
|
|
<p>Test truncation:</p>
|
|
<em>Box is 50x50, border-radius is 500px</em>
|
|
<div class="box box-14"></div>
|
|
<div class="box box-15"></div>
|
|
<br>
|
|
<br>
|
|
|
|
</body>
|
|
|
|
</html>
|