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

Tests/LibWeb: Split grid/positions-and-spans.html into smaller tests

Browse source 
This giant grid test has been a source of problems while iterating on
GFC for a long time. Let's split it into smaller tests to make it
easier to identify issues without needing further reductions on the
test.
This commit is contained in:
Aliaksandr Kalenik 2023-08-24 18:14:36 +02:00 • committed by Andreas Kling
parent 29b2022303
commit 6267037a74
10 changed files with 163 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,18 @@
<style>
* {
border: 1px solid black;
}
.grid-container {
display: grid;
grid-template-columns: repeat(12, minmax(0, 5fr));
}
.a {
grid-column-end: span 8;
}
.b {
grid-column-end: span 4;
}
</style><div class="grid-container"><div class="a">1</div><div class="b">2</div></div>

20
Tests/LibWeb/Layout/input/grid/placement-2.html Normal file
View file

@ -0,0 +1,20 @@
<style>
* {
border: 1px solid black;
}
.grid-container {
display: grid;
grid-template-columns: repeat(12, minmax(0, 5fr));
}
.a {
grid-column-start: span 4;
grid-column-end: span 8;
}
.b {
grid-column-start: span 8;
grid-column-end: span 4;
}
</style><div class="grid-container"><div class="grid-item a">1</div><div class="grid-item b">2</div></div>

18
Tests/LibWeb/Layout/input/grid/placement-3.html Normal file
View file

@ -0,0 +1,18 @@
<style>
* {
border: 1px solid black;
}
.grid-container {
display: grid;
grid-template-rows: repeat(5, 20px);
}
.a {
grid-row-end: span 2;
}
.b {
grid-row-end: span 3;
}
</style><div class="grid-container"><div class="a">1</div><div class="b">2</div></div>

15
Tests/LibWeb/Layout/input/grid/placement-4.html Normal file
View file

@ -0,0 +1,15 @@
<style>
* {
border: 1px solid black;
grid-template-columns: 1fr 1fr;
}
.grid-container {
display: grid;
}
.a {
grid-column: 1 / span 3;
grid-row: 1;
}
</style><div class="grid-container"><div class="a">1</div><div>2</div></div>

63
Tests/LibWeb/Layout/input/grid/positions-and-spans.html
View file

@ -1,63 +0,0 @@
<style>
.grid-container {
display: grid;
background-color: lightsalmon;
}
.grid-item {
background-color: lightblue;
}
</style>
<!-- Column end and span -->
<!-- There should be a column spanning 8 units, and then one spanning 4 -->
<div class="grid-container" style="
grid-template-columns: repeat(12,minmax(0,5fr));
">
<div class="grid-item" style="
grid-column-end: span 8;
">1</div>
<div class="grid-item" style="
grid-column-end: span 4;
">2</div>
</div>
<!-- Column start span takes priority over column end span -->
<!-- There should be a column spanning 4 units, and then one spanning 8 -->
<div class="grid-container" style="
grid-template-columns: repeat(12,minmax(0,5fr));
">
<div class="grid-item" style="
grid-column-start: span 4;
grid-column-end: span 8;
">1</div>
<div class="grid-item" style="
grid-column-start: span 8;
grid-column-end: span 4;
">2</div>
</div>
<!-- Row end and span -->
<!-- There should be a row spanning 2 units, and then one spanning 3 -->
<div class="grid-container" style="
grid-template-rows: repeat(5, 20px);
">
<div class="grid-item" style="
grid-row-end: span 2;
">1</div>
<div class="grid-item" style="
grid-row-end: span 3;
">2</div>
</div>
<!-- Grid shouldn't expand to 3 columns as having too much span doesn't change size. -->
<!-- The bottom row should take up half the width of the grid. -->
<div class="grid-container" style="
grid-template-columns: 1fr 1fr;
">
<div class="grid-item" style="
grid-column: 1 / span 3;
grid-row: 1;
">1</div>
<div class="grid-item">1</div>
</div>