1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 15:17:36 +00:00

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

The file gap.html, which previously had multiple grid tests, has now
been divided into smaller files, each containing only one grid test.
It is going to make it easier to identify what inputs have been
affected by changes in layout code.
This commit is contained in:
Aliaksandr Kalenik 2023-05-08 23:52:12 +03:00 committed by Andreas Kling
parent bb90bf0141
commit 0dcc93ed3d
8 changed files with 97 additions and 160 deletions

View file

@ -1,58 +0,0 @@
<style>
.grid-container {
display: grid;
background-color: lightsalmon;
}
.grid-item {
background-color: lightblue;
}
</style>
<!-- There should be a large (50px) column gap and small (10px) row gap -->
<div class="grid-container" style="
grid-template-columns: auto auto;
gap: 10px 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>
<!-- There should be a Z-shaped gap (with both vertical and horizontal gap) -->
<div class="grid-container" style="
grid-template-columns: auto auto;
gap: calc(1vh + 10px) calc(10% - 10px);
">
<div class="grid-item" style="grid-column: 2 / span 1">1</div>
<div class="grid-item">2</div>
</div>
<!-- Column-gaps with overflowing column spans -->
<!-- There should be 1 column that starts at column 2 and spans until the end. -->
<div class="grid-container" style="
grid-column-gap: 16px;
grid-template-columns: 1fr 1fr;
">
<div class="grid-item" style="grid-column: 2 / span 5;">1</div>
</div>
<!-- Column-gaps with overflowing column spans and row spans -->
<!-- There should be 1 column that starts at column 2 and spans until the end. -->
<div class="grid-container" style="
grid-column-gap: 16px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 20px;
">
<div class="grid-item" style="grid-column: 2 / span 5; grid-row: span 4">1</div>
</div>
<!-- Bug with column gaps - grid items should have normal height -->
<div class="grid-container with-border" style="
grid-column-gap: 10px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
">
<div class="grid-item with-border">left side text</div>
<div class="grid-item with-border">right side text right side text right side text</div>
</div>

View file

@ -0,0 +1,24 @@
<style>
.grid-container {
display: grid;
background-color: lightsalmon;
grid-template-columns: auto auto;
gap: 50px 100px;
}
.one {
background-color: lightblue;
}
.two {
background-color: yellowgreen;
}
.three {
background-color: palevioletred;
}
.four {
background-color: lightseagreen;
}
</style><div class="grid-container"><div class="one">1</div><div class="two">2</div><div class="three">3</div><div class="four">4</div></div>

View file

@ -0,0 +1,13 @@
<style>
.container {
display: grid;
background-color: lightsalmon;
grid-template-columns: auto auto;
gap: calc(1vh + 10px) calc(10% - 10px);
}
.item {
background-color: palevioletred;
}
</style>
<div class="container"><div class="item" style="grid-column: 2 / span 1">1</div><div class="item">2</div></div>

View file

@ -0,0 +1,13 @@
<style>
.container {
display: grid;
background-color: lightsalmon;
grid-column-gap: 20px;
grid-template-columns: 1fr 1fr;
}
.item {
background-color: palevioletred;
grid-column: 2;
}
</style><div class="container"><div class="item">1</div></div>