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:
parent
9be9bf3379
commit
92cb32b905
30 changed files with 785 additions and 0 deletions
23
Tests/LibWeb/Layout/input/flex-auto.html
Normal file
23
Tests/LibWeb/Layout/input/flex-auto.html
Normal 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
25
Tests/LibWeb/Layout/input/flex-column-constained-wrap.html
Normal 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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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
23
Tests/LibWeb/Layout/input/flex-grow-0-column.html
Normal 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
22
Tests/LibWeb/Layout/input/flex-grow-1.html
Normal 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
22
Tests/LibWeb/Layout/input/flex-grow-2.html
Normal 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
21
Tests/LibWeb/Layout/input/flex-row.html
Normal 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
22
Tests/LibWeb/Layout/input/flex-shrink-1.html
Normal 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
22
Tests/LibWeb/Layout/input/flex-shrink-2.html
Normal 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
22
Tests/LibWeb/Layout/input/flex-shrink-3.html
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue