mirror of
https://github.com/RGBCube/serenity
synced 2025-05-22 16:05:08 +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.
230 lines
5 KiB
HTML
230 lines
5 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>
|