mirror of
https://github.com/RGBCube/serenity
synced 2025-05-28 02:35:09 +00:00
97130a4e66
The refactor of the border painting mainly to handle: 1. Single border with minor border radius. 2. Different border widths and border colors joined situations. This refactor only apply to solid border. The main differece is to use Path.fill to paint each border, not fill_rect anymore. There's a special case need to consider. The Path.fill will leave shared edge blank between two borders. To handle this, we decide to combine the borders with same color to paint together.
448 lines
13 KiB
HTML
448 lines
13 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-1-11 {
|
|
border-top: 20px solid black;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.box-1-12 {
|
|
border-radius: 20px;
|
|
border-top: 5px solid red;
|
|
border-right: 10px solid yellow;
|
|
border-bottom: 15px solid lime;
|
|
border-left: 20px solid blue;
|
|
}
|
|
|
|
.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-radius: 15px;
|
|
}
|
|
|
|
.box-10 {
|
|
background-color: magenta;
|
|
border-top-left-radius: 10px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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 black;
|
|
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('old-computer.png');
|
|
}
|
|
|
|
.screenshot {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
background-image: url("serenity-screenshot.png");
|
|
}
|
|
|
|
.rounded-image {
|
|
background-image: url("90s-bg.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(old-computer.png);
|
|
}
|
|
|
|
.box-background-clip {
|
|
width: 100px;
|
|
height: 100px;
|
|
border: 10px solid black;
|
|
border-radius: 50px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.positioned {
|
|
background-color: red;
|
|
position: relative;
|
|
}
|
|
</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>These boxes have elliptical borders</p>
|
|
<em>All round 50%</em>
|
|
<div class="rect rect-1"></div>
|
|
<br>
|
|
<em>All round -- MDN example</em>
|
|
<div class="rect rect-2"></div>
|
|
<br>
|
|
<em>top-left 50%</em>
|
|
<div class="rect rect-3"></div>
|
|
<br>
|
|
<em>top-right 50%</em>
|
|
<div class="rect rect-4"></div>
|
|
<br>
|
|
<em>bottom-left 50%</em>
|
|
<div class="rect rect-5"></div>
|
|
<br>
|
|
<em>bottom-right 50%</em>
|
|
<div class="rect rect-6"></div>
|
|
<br>
|
|
<em>All round -- MDN example 2 -- outline</em>
|
|
<div class="rect rect-7"></div>
|
|
<br>
|
|
<br>
|
|
|
|
<p>These boxes have (rectangular) background images, that are clipped by the border radius</p>
|
|
<em>In a nutshell</em>
|
|
<div class="nut"></div>
|
|
<br>
|
|
<em>In a circle</em>
|
|
<div class="screenshot"></div>
|
|
<br>
|
|
<em>Rounded</em>
|
|
<div class="rounded-image"></div>
|
|
<br>
|
|
<br>
|
|
|
|
<p>This is an <code><img></code> tag with a border radius</p>
|
|
<img src="old-computer.png" style="border-radius: 20px; width: 200px">
|
|
<br>
|
|
<br>
|
|
|
|
<p>These use a border-radius + a background clip (the radius of the inner background should shrink)</p>
|
|
<em>Solid color</em>
|
|
<div class="box-background-clip solid-color"></div>
|
|
<br>
|
|
<em>Background image</em>
|
|
<div class="box-background-clip image"></div>
|
|
<br>
|
|
<em>Background image layers</em>
|
|
<div class="box-background-clip image-layers"></div>
|
|
<br>
|
|
<br>
|
|
|
|
<p>The all have a border-radius +/- overflow: hidden, which clips their child elements<p>
|
|
<em>Lorem ipsum, <b>without</b> overflow: hidden</em>
|
|
<div style="width: 200px; height: 200px; border-radius: 30%; background-color: brown">
|
|
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
|
|
</div>
|
|
<br>
|
|
<em>Lorem ipsum, <b>with</b> overflow: hidden</em>
|
|
<div style="width: 200px; height: 200px; border-radius: 30%; background-color: brown; overflow: hidden;">
|
|
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
|
|
</div>
|
|
<br>
|
|
<em>An image inside a inline-block <code><a></code> tag, with a border-radius of 50% and overflow: hidden</em>
|
|
<br>
|
|
(this is commonly used for avatars and occurs GitHub a few times)
|
|
<br>
|
|
<a style="display: inline-block; border-radius: 50%; overflow: hidden; width: 100px; height: 100px;">
|
|
<img src="car.png" style="width: 100px; height: 100px">
|
|
</a>
|
|
<br>
|
|
<em>A red div with position: relative within a parent with overflow: hidden + a border-radius</em><br>
|
|
<div class="box" style="border-radius: 10px; overflow: hidden;">
|
|
<div class="box positioned"></div>
|
|
</div>
|
|
<br>
|
|
<em>A blue (background) div within a parent with overflow: hidden + a border-radius</em><br>
|
|
<div class="box" style="border-radius: 10px; overflow: hidden;">
|
|
<div class="box" style="background-color: blue;"></div>
|
|
</div>
|
|
<br>
|
|
<br>
|
|
|
|
<p>All these are non-conventional elements with a border-radius :^)<p>
|
|
<em>iframe to the welcome page</em>
|
|
<br>
|
|
<iframe style="border-radius: 50%; border: none; width: 300px; height: 200px;" src="welcome.html"></iframe>
|
|
<br>
|
|
<em>Fun canvas demo</em>
|
|
<br>
|
|
<canvas id="fun-canvas" style="border-radius: 30%;" width="200" height="200"></canvas>
|
|
<script src="fun-canvas.js"></script>
|
|
<script>
|
|
makeFunCanvas("fun-canvas")
|
|
</script>
|
|
<br/>
|
|
<br/>
|
|
|
|
<p>These test the inner border-radius shrinking to accommodate the border</p>
|
|
<em>An <code><img></code> tag with a border-radius and a border</em>
|
|
<br>
|
|
<img src="car.png" style="border-radius: 100%; border: 10px solid limegreen;">
|
|
<br/>
|
|
<em>Clipping text overflow with a border-radius and a border</em>
|
|
<div style="width: 100px; height: 100px; border-radius: 30%; background-color: cyan; overflow: hidden; border: 20px solid salmon;">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</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>Single border with minor radius</em>
|
|
<div class="box box-1-11"></div>
|
|
<br>
|
|
<em>Four border with different colors</em>
|
|
<div class="box box-1-12"></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>
|