mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-01-23 17:52:26 -05:00
Browser: Add various test pages to welcome
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.
This commit is contained in:
Tobias Christiansen
Linus Groh
parent
f290048662
commit
19b22fbb4a
Notes:
sideshowbarker
2024-07-18 12:46:38 +09:00
Author: https://github.com/TobyAsE Commit: https://github.com/SerenityOS/serenity/commit/19b22fbb4a5 Pull-request: https://github.com/SerenityOS/serenity/pull/7827 Reviewed-by: https://github.com/linusg
4 changed files with 495 additions and 26 deletions
230
Base/res/html/misc/border-radius.html
Normal file
230
Base/res/html/misc/border-radius.html
Normal file
|
|
@ -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
Base/res/html/misc/custom-properties.html
Normal file
68
Base/res/html/misc/custom-properties.html
Normal file
|
|
@ -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>
|
||||
159
Base/res/html/misc/flex.html
Normal file
159
Base/res/html/misc/flex.html
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Flex</title>
|
||||
<style>
|
||||
.my-container {
|
||||
display: flex;
|
||||
border: 1px solid salmon;
|
||||
}
|
||||
|
||||
.width-constrained {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.height-constrained {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>FlexBox Tests</h1>
|
||||
<p>The boxes are width and height 100px.</p>
|
||||
<h2>Row</h2>
|
||||
<h3>Width unconstrained</h3>
|
||||
<p>Default</p>
|
||||
<div class="my-container">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
<h3>Width 250px</h3>
|
||||
<p>Default</p>
|
||||
<div class="my-container width-constrained">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
<p>Flex-wrap: nowrap</p>
|
||||
<div class="my-container width-constrained" style="flex-wrap: nowrap;">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
<p>Flex-wrap: wrap</p>
|
||||
<div class="my-container width-constrained" style="flex-wrap: wrap;">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
<p>Flex-wrap: wrap-reverse</p>
|
||||
<div class="my-container width-constrained" style="flex-wrap: wrap-reverse;">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
|
||||
<h4>Flex-flow shorthand</h4>
|
||||
|
||||
<p>flex-flow: row nowrap;</p>
|
||||
<div class="my-container width-constrained" style="flex-flow: row nowrap;">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
|
||||
<p>flex-flow: row wrap;</p>
|
||||
<div class="my-container width-constrained" style="flex-flow: row wrap;">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
|
||||
<h2>Column</h2>
|
||||
<h3>Height/Width unconstrained</h3>
|
||||
<p>Default</p>
|
||||
<div class="my-container column">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
<h3>Height 250px</h3>
|
||||
<p>Default</p>
|
||||
<div class="my-container column height-constrained">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
<h4>Also Width 250px</h4>
|
||||
<p>Default</p>
|
||||
<div class="my-container width-constrained column height-constrained">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
<p>Flex-wrap: nowrap</p>
|
||||
<div class="my-container column width-constrained height-constrained" style="flex-wrap: nowrap;">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
<p>Flex-wrap: wrap</p>
|
||||
<div class="my-container column width-constrained height-constrained" style="flex-wrap: wrap;">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
<p>Flex-wrap: wrap-reverse</p>
|
||||
<div class="my-container column width-constrained height-constrained" style="flex-wrap: wrap-reverse;">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
|
||||
<h4>Flex-flow shorthand</h4>
|
||||
|
||||
<p>flex-flow: column nowrap;</p>
|
||||
<div class="my-container width-constrained height-constrained" style="flex-flow: column nowrap;">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
|
||||
<p>flex-flow: column wrap;</p>
|
||||
<div class="my-container width-constrained height-constrained" style="flex-flow: column wrap;">
|
||||
<div class="box">1</div>
|
||||
<div class="box">2</div>
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
|
||||
<h2>Grow/Shrink</h2>
|
||||
<p>Container has width of 500px</p>
|
||||
<p>flex-grow: 4/2/0</p>
|
||||
<div class="my-container" style="flex-flow: row nowrap; width: 500px;">
|
||||
<div class="box" style="flex-grow: 4;">1 I grow the most</div>
|
||||
<div class="box" style="flex-grow: 2;">2 I grow</div>
|
||||
<div class="box" style="flex-grow: 0;">3 I don't</div>
|
||||
</div>
|
||||
<p>Container has width of 250px</p>
|
||||
<p>flex-shrink: 4/1/0</p>
|
||||
<div class="my-container" style="flex-flow: row nowrap; width: 250px;">
|
||||
<div class="box" style="flex-shrink: 4;">1 I shrink the most</div>
|
||||
<div class="box" style="flex-shrink: 1;">2 I shrink</div>
|
||||
<div class="box" style="flex-shrink: 0;">3 I don't</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,36 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html contenteditable="true">
|
||||
|
||||
<head>
|
||||
<title>Welcome!</title>
|
||||
<!-- this is a comment -->
|
||||
<style type="text/css">
|
||||
/* css comment */
|
||||
body {
|
||||
background-color: #000;
|
||||
color: #fff; /* another css comment */
|
||||
}
|
||||
/* lol
|
||||
<title>Welcome!</title>
|
||||
<!-- this is a comment -->
|
||||
<style type="text/css">
|
||||
/* css comment */
|
||||
body {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
/* another css comment */
|
||||
}
|
||||
|
||||
/* lol
|
||||
a
|
||||
css
|
||||
comment */
|
||||
h1 {
|
||||
color: #a00;
|
||||
}
|
||||
a {
|
||||
color: #ae7250;
|
||||
}
|
||||
a:hover {
|
||||
color: #f4cca0;
|
||||
}
|
||||
span#ua {
|
||||
color: red;
|
||||
}
|
||||
span#loadtime {
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
<script src="welcome.js"></script>
|
||||
h1 {
|
||||
color: #a00;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ae7250;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #f4cca0;
|
||||
}
|
||||
|
||||
span#ua {
|
||||
color: red;
|
||||
}
|
||||
|
||||
span#loadtime {
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
<script src="welcome.js"></script>
|
||||
</head>
|
||||
|
||||
<body link="#44f" vlink="#c4c" background="90s-bg.png">
|
||||
<h1>Welcome to the Serenity Browser!</h1>
|
||||
<p>This is a very simple browser built on the LibWeb and LibJS engines.</p>
|
||||
|
|
@ -38,6 +46,9 @@ span#loadtime {
|
|||
<p>This page loaded in <b><span id="loadtime"></span></b> ms</p>
|
||||
<p>Some small test pages:</p>
|
||||
<ul>
|
||||
<li><a href="border-radius.html">Border-Radius</a></li>
|
||||
<li><a href="custom-properties.html">Custom Properties</a></li>
|
||||
<li><a href="flex.html">Flexboxes</a></li>
|
||||
<li><a href="mandelbrot-wasm.html">WebAssembly Mandelbrot Rendering Demo</a></li>
|
||||
<li><a href="ddssuite.html">DDS test suite</a></li>
|
||||
<li><a href="websocket.html">WebSocket API Test</a></li>
|
||||
|
|
@ -123,4 +134,5 @@ span#loadtime {
|
|||
document.getElementById("loadtime").innerHTML = performance.now();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue