mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 10:47:35 +00:00
Tests/LibWeb: Split input/grid/minmax.html into smaller tests
This commit is contained in:
parent
0dcc93ed3d
commit
f2323b5b99
10 changed files with 130 additions and 239 deletions
15
Tests/LibWeb/Layout/input/grid/minmax-1.html
Normal file
15
Tests/LibWeb/Layout/input/grid/minmax-1.html
Normal 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
17
Tests/LibWeb/Layout/input/grid/minmax-2.html
Normal 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
19
Tests/LibWeb/Layout/input/grid/minmax-3.html
Normal 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
18
Tests/LibWeb/Layout/input/grid/minmax-invalid-1.html
Normal 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>
|
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue