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

Tests/LibWeb: Split input/grid/minmax.html into smaller tests

Browse source
This commit is contained in:
Aliaksandr Kalenik 2023-05-09 00:27:17 +03:00 • committed by Andreas Kling
parent 0dcc93ed3d
commit f2323b5b99
10 changed files with 130 additions and 239 deletions
Download patch file Download diff file Expand all files Collapse all files

15
Tests/LibWeb/Layout/input/grid/minmax-1.html Normal file
View file

@ -0,0 +1,15 @@
<style>
.container {
display: grid;
background-color: lightsalmon;
grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
}
.one {
background-color: lightblue;
}
.two {
background-color: yellowgreen;
}
</style><div class="container"><div class="one">1</div><div class="two">2</div></div>

17
Tests/LibWeb/Layout/input/grid/minmax-2.html Normal file
View file

@ -0,0 +1,17 @@
<style>
.container {
display: grid;
background-color: lightsalmon;
grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
/* FIXME: We currently does not layout this correctly. Rows take 25px even if 50px are available. */
grid-template-rows: minmax(25px, 50px) minmax(25px, 50px);
}
.one {
background-color: lightblue;
}
.two {
background-color: yellowgreen;
}
</style><div class="container"><div class="one">1</div><div class="two">2</div></div>

19
Tests/LibWeb/Layout/input/grid/minmax-3.html Normal file
View file

@ -0,0 +1,19 @@
<style>
.container {
display: grid;
background-color: lightsalmon;
grid-template-columns: minmax(200px, 1fr) minmax(100px, 200px) minmax(200px, 1fr);
}
.one {
background-color: lightblue;
}
.two {
background-color: yellowgreen;
}
.three {
background-color: palevioletred;
}
</style><div class="container"><div class="one">1</div><div class="two">2</div><div class="three">3</div></div>

18
Tests/LibWeb/Layout/input/grid/minmax-invalid-1.html Normal file
View file

@ -0,0 +1,18 @@
<style>
.container {
display: grid;
background-color: lightsalmon;
/* Invalid minmax value as can't have a flexible length as a minimum value. */
grid-template-columns: minmax(1fr, 100px) 1fr 1fr;
}
.one {
background-color: lightblue;
}
.two {
background-color: yellowgreen;
}
</style>
<div class="container"><div class="one">1</div><div class="two">2</div></div>

71
Tests/LibWeb/Layout/input/grid/minmax.html
View file

@ -1,71 +0,0 @@
<style>
.grid-container {
display: grid;
background-color: lightsalmon;
}
.grid-item {
background-color: lightblue;
}
</style>
<!-- Basic minmax(): Should render 2 items side by side, each with a minimum width of 150px, If there is enough space,
they will expand up to 300px each. -->
<div class="grid-container" style="grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
</div>
<!-- Basic minmax vertical
Since there is no vertical limit, the two rows should be 50px high each. -->
<div class="grid-container" style="
grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
grid-template-rows: minmax(25px, 50px) minmax(25px, 50px);
">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
</div>
<!-- Invalid minmax value as can't have a flexible length as a minimum value.
Should render 2 items with no grid formatting (one on top of the other) -->
<div class="grid-container" style="grid-template-columns: minmax(1fr, 100px) 1fr 1fr;">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
</div>
<!-- Invalid minmax value in repeat as can't have a flexible length as a minimum value
Should render 2 items with no grid formatting (one on top of the other) -->
<div class="grid-container" style="grid-template-columns: repeat(3, minmax(1fr, 100px));">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
</div>
<!-- Basic minmax vertical
Since there is a height limit, the rows should be 25px high each. -->
<div class="grid-container" style="
height: 50px;
grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
grid-template-rows: minmax(25px, 50px) minmax(25px, 50px);
">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
<!-- Minmax horizontal with maximum as flex
3 columns with minimum 200px and maximum 100%. -->
<div class="grid-container" style="
grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr);
">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
<!-- Article layout: small margins on mobile, large on desktop. Centered column with 70ch width maximum -->
<div class="grid-container" style="grid-template-columns: minmax(1rem, 1fr) minmax(auto, 70ch) minmax(1rem, 1fr);">
<div class="grid-item">1</div>
<div class="grid-item">Article content</div>
<div class="grid-item">3</div>
</div>