Skip to content

Commit

Permalink
Browser: Add various test pages to welcome
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@TobyAsE @linusg
TobyAsE authored and linusg committed Jun 6, 2021
1 parent f290048 commit 19b22fb
Show file tree
Hide file tree
Showing 4 changed files with 495 additions and 26 deletions.
230 changes: 230 additions & 0 deletions Base/res/html/misc/border-radius.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,230 @@
<!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>
68 changes: 68 additions & 0 deletions Base/res/html/misc/custom-properties.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html>

<head>
<title>Custom Properties</title>
<style>
:root {
--my-color: purple;
}

div {
margin: 20px;
}

.test {
background: var(--my-color);
}

.test-parent {
--my-color: pink;
border: 1px solid black;
}

.box {
width: 150px;
height: 150px;
border: 1px solid black;
}
</style>
</head>

<body>
<h1>CSS Custom Properties</h1>
<pre>
:root {
--my-color: purple;
}

.test {
background: var(--my-color);
}

.test-parent {
--my-color: pink;
}

</pre>
<div class="box test">
<pre>
.test
</pre>
This should be purple
</div>

<div class="test-parent">
<pre>
.test-parent
</pre>
<div class="box test">
<pre>
.test
</pre>
This should be pink
</div>
</div>
</body>

</html>
Loading

0 comments on commit 19b22fb

Please sign in to comment.