RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 12:47:45 +00:00
Code Issues Activity Actions

Browser: Add various test pages to welcome

Browse source 
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 2021-06-06 00:08:54 +02:00 • committed by Linus Groh
parent f290048662
commit 19b22fbb4a
4 changed files with 495 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

159
Base/res/html/misc/flex.html Normal file
View 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>