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.
author: Tobias Christiansen <tobi@tobyase.de> 2021-06-06 00:08:54 +0200
committer: Linus Groh <mail@linusgroh.de> 2021-06-06 11:33:18 +0100
commit: 19b22fbb4a5c01ea2d38551541aa3125eed59188 (patch)
tree: 76d513e1ba3819d73ce91d666013a4292f068f0f /Base
parent: f290048662d077d843079ff21277d77bf0f79341 (diff)
download: serenity-19b22fbb4a5c01ea2d38551541aa3125eed59188.zip
4 files changed, 495 insertions, 26 deletions
diff --git a/Base/res/html/misc/border-radius.html b/Base/res/html/misc/border-radius.html
new file mode 100644
index 0000000000..afa8223509
--- /dev/null
+++ b/Base/res/html/misc/border-radius.html
@@ -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>
diff --git a/Base/res/html/misc/custom-properties.html b/Base/res/html/misc/custom-properties.html
new file mode 100644
index 0000000000..87c341e85c
--- /dev/null
+++ b/Base/res/html/misc/custom-properties.html
@@ -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>
diff --git a/Base/res/html/misc/flex.html b/Base/res/html/misc/flex.html
new file mode 100644
index 0000000000..33b380f43f
--- /dev/null
+++ b/Base/res/html/misc/flex.html
@@ -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>
diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html
index 26ed468e6f..ef7ce95b87 100644
--- a/Base/res/html/misc/welcome.html
+++ b/Base/res/html/misc/welcome.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>
author	Tobias Christiansen <tobi@tobyase.de>	2021-06-06 00:08:54 +0200
committer	Linus Groh <mail@linusgroh.de>	2021-06-06 11:33:18 +0100
commit	19b22fbb4a5c01ea2d38551541aa3125eed59188 (patch)
tree	76d513e1ba3819d73ce91d666013a4292f068f0f /Base
parent	f290048662d077d843079ff21277d77bf0f79341 (diff)
download	serenity-19b22fbb4a5c01ea2d38551541aa3125eed59188.zip