mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 15:27:35 +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:
parent
bb90bf0141
commit
0dcc93ed3d
8 changed files with 97 additions and 160 deletions
|
@ -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
24
Tests/LibWeb/Layout/input/grid/grid-gap-1.html
Normal 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
13
Tests/LibWeb/Layout/input/grid/grid-gap-2.html
Normal 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
13
Tests/LibWeb/Layout/input/grid/grid-gap-3.html
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue