1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 07:37:35 +00:00

LibWeb: Add tests for flex formatting context

This commit is contained in:
Aliaksandr Kalenik 2023-02-08 01:40:38 +03:00 committed by Andreas Kling
parent 9be9bf3379
commit 92cb32b905
30 changed files with 785 additions and 0 deletions

View file

@ -0,0 +1,23 @@
<style>
body {
font-family: 'SerenitySans';
}
.container {
display: flex;
border: 1px solid salmon;
flex-flow: row nowrap;
width: 500px;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<div class="container">
<div class="box" style="flex: auto;">1</div>
<div class="box" style="flex: auto;">2</div>
<div class="box" style="flex: auto;">3</div>
</div>

View file

@ -0,0 +1,25 @@
<style>
body {
font-family: 'SerenitySans';
}
.container {
display: flex;
border: 1px solid salmon;
flex-direction: column;
height: 250px;
width: 250px;
flex-wrap: wrap;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<div class="container column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>

View file

@ -0,0 +1,24 @@
<style>
body {
font-family: 'SerenitySans';
}
.container {
display: flex;
border: 1px solid salmon;
flex-direction: column;
height: 250px;
flex-wrap: nowrap;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<div class="container column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>

View file

@ -0,0 +1,24 @@
<style>
body {
font-family: 'SerenitySans';
}
.container {
display: flex;
border: 1px solid salmon;
flex-direction: column;
height: 250px;
width: 250px;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<div class="container column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>

View file

@ -0,0 +1,23 @@
<style>
body {
font-family: 'SerenitySans';
}
.container {
display: flex;
border: 1px solid salmon;
flex-direction: column;
height: 250px;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>

View file

@ -0,0 +1,23 @@
<style>
body {
font-family: 'SerenitySans';
}
.container {
display: flex;
border: 1px solid salmon;
width: 250px;
flex-wrap: nowrap;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>

View file

@ -0,0 +1,23 @@
<style>
body {
font-family: 'SerenitySans';
}
.container {
display: flex;
border: 1px solid salmon;
width: 250px;
flex-wrap: wrap;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>

View file

@ -0,0 +1,22 @@
<style>
body {
font-family: 'SerenitySans';
}
.container {
display: flex;
border: 1px solid salmon;
width: 250px;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<div class="container width-constrained">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>

View file

@ -0,0 +1,23 @@
<style>
body {
font-family: 'SerenitySans';
}
.container {
display: flex;
border: 1px solid salmon;
width: 500px;
flex-direction: column;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<div class="container">
<div class="box" style="flex: 0 0 0;">1</div>
<div class="box" style="flex: 0 0 0;">2</div>
<div class="box" style="flex: 0 0 0;">3</div>
</div>

View file

@ -0,0 +1,22 @@
<style>
body {
font-family: 'SerenitySans';
}
.container {
display: flex;
border: 1px solid salmon;
width: 500px;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<div class="container">
<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>

View file

@ -0,0 +1,22 @@
<style>
body {
font-family: 'SerenitySans';
}
.container {
display: flex;
border: 1px solid salmon;
width: 500px;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<div class="container">
<div class="box" style="flex: 1;">1</div>
<div class="box" style="flex: 2;">2</div>
<div class="box" style="flex: 3;">3</div>
</div>

View file

@ -0,0 +1,21 @@
<style>
body {
font-family: 'SerenitySans';
}
.container {
display: flex;
border: 1px solid salmon;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>

View file

@ -0,0 +1,22 @@
<style>
body {
font-family: 'SerenitySans';
}
.container {
display: flex;
border: 1px solid salmon;
width: 250px;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<div class="container">
<div class="box" style="flex-shrink: 4;">1 I shrink the most</div>
<div class="box" style="flex-shrink: 2;">2 I shrink</div>
<div class="box" style="flex-shrink: 0;">3 I don't</div>
</div>

View file

@ -0,0 +1,22 @@
<style>
body {
font-family: 'SerenitySans';
}
.container {
display: flex;
border: 1px solid salmon;
width: 500px;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<div class="container">
<div class="box" style="flex: 80% 0 3;">1</div>
<div class="box" style="flex: 80% 0 2;">2</div>
<div class="box" style="flex: 80% 0 1;">3</div>
</div>

View file

@ -0,0 +1,22 @@
<style>
body {
font-family: 'SerenitySans';
}
.container {
display: flex;
border: 1px solid salmon;
width: 500px;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<div class="container">
<div class="box" style="flex: auto 0 1;">1</div>
<div class="box" style="flex: auto 0 2;">2</div>
<div class="box" style="flex: auto 0 3;">3</div>
</div>