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

LibWeb: Add tests for flex formatting context

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

23
Tests/LibWeb/Layout/input/flex-auto.html Normal file
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>

25
Tests/LibWeb/Layout/input/flex-column-constained-wrap.html Normal file
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>

24
Tests/LibWeb/Layout/input/flex-column-constrained-nowrap.html Normal file
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>

24
Tests/LibWeb/Layout/input/flex-column-height-constrained-width-constrained.html Normal file
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>

23
Tests/LibWeb/Layout/input/flex-column-height-constrained.html Normal file
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>

23
Tests/LibWeb/Layout/input/flex-container-constrained-nowrap.html Normal file
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>

23
Tests/LibWeb/Layout/input/flex-container-constrained-wrap.html Normal file
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>

22
Tests/LibWeb/Layout/input/flex-container-width-constrained.html Normal file
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>

23
Tests/LibWeb/Layout/input/flex-grow-0-column.html Normal file
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>

22
Tests/LibWeb/Layout/input/flex-grow-1.html Normal file
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>

22
Tests/LibWeb/Layout/input/flex-grow-2.html Normal file
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>

21
Tests/LibWeb/Layout/input/flex-row.html Normal file
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>

22
Tests/LibWeb/Layout/input/flex-shrink-1.html Normal file
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>

22
Tests/LibWeb/Layout/input/flex-shrink-2.html Normal file
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>

22
Tests/LibWeb/Layout/input/flex-shrink-3.html Normal file
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>