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

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

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

58
Tests/LibWeb/Layout/input/grid/gap.html
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>

24
Tests/LibWeb/Layout/input/grid/grid-gap-1.html Normal file
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>

13
Tests/LibWeb/Layout/input/grid/grid-gap-2.html Normal file
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>

13
Tests/LibWeb/Layout/input/grid/grid-gap-3.html Normal file
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>