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

Tests/LibWeb: Split input/grid/template-areas.html into smaller tests

The file template-areas.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.

Also this change removes parts of template-areas.html that we can't
layout correctly yet.
This commit is contained in:
Aliaksandr Kalenik 2023-05-08 23:08:22 +03:00 committed by Andreas Kling
parent 3af92a76be
commit bb90bf0141
9 changed files with 107 additions and 143 deletions

View file

@ -0,0 +1,29 @@
<style>
.container {
display: grid;
background-color: lightsalmon;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"left right-top"
"left right-bottom";
}
.item {
background-color: lightblue;
}
.right-bottom {
background-color: lightpink;
grid-area: right-bottom / right-bottom / right-bottom / right-bottom;
}
.left {
background-color: lightgreen;
grid-area: left;
}
.right-top {
background-color: lightgrey;
grid-column-end: right-top;
}
</style><div class="container"><div class="item right-bottom">right-bottom</div><div class="item left">left</div><div class="item right-top">right-top</div></div>

View file

@ -1,59 +0,0 @@
<style>
.grid-container {
display: grid;
background-color: lightsalmon;
}
.grid-item {
background-color: lightblue;
}
</style>
<!-- Grid template areas basics -->
<div class="grid-container" style="
grid-template-columns: 1fr 1fr;
grid-template-areas:
'left right-top'
'left right-bottom';
">
<div style="background-color: lightpink; grid-area: right-bottom / right-bottom / right-bottom / right-bottom;">
right-bottom</div>
<div style="background-color: lightgreen; grid-area: left;">left</div>
<div style="background-color: lightgrey; grid-column-end: right-top;">right-top</div>
</div>
<!-- Grid-lines vs. Grid template areas -->
<!-- There should be a left-aligned column taking up 1 / 3 of the Grid -->
<div class="grid-container" style="
grid-template-columns: [c] 1fr [b] 1fr [a] 1fr;
grid-template-areas: 'a b c';
">
<div class="grid-item" style="grid-column-start: a; grid-column-end: a;">1fr</div>
</div>
<!-- Valid grid areas -->
<!-- Column taking up 50% width -->
<div class="grid-container" style="
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas: 'one one three two' 'one one four two' 'one one four two';
">
<div class="grid-item" style="grid-column-start: one; grid-column-end: one;">1fr</div>
</div>
<!-- Valid grid areas. This test should ideally fail differently FIXME -->
<!-- Left-aligned column taking up 25% width -->
<div class="grid-container" style="
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas: 'one one three two' 'one one four one';
">
<div class="grid-item" style="grid-column-start: two; grid-column-end: two;">1fr</div>
</div>
<!-- Valid grid areas. This test should ideally fail differently FIXME -->
<!-- Left-aligned column taking up 25% width -->
<div class="grid-container" style="
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas: 'one one three two' 'one one four five' 'one one four two';
">
<div class="grid-item" style="grid-column-start: two; grid-column-end: two;">1fr</div>
</div>

View file

@ -0,0 +1,21 @@
<style>
.grid {
display: grid;
background-color: lightsalmon;
grid-template-columns: [c] 1fr [b] 1fr [a] 1fr;
grid-template-areas: "a b c";
}
.item-left {
background-color: lightblue;
grid-column-start: a;
grid-column-end: a;
}
/* FIXME: This item should start at [b] and end at [c]. Currently it starts at [c] and ends at [c]. */
.item-right {
background-color: yellowgreen;
grid-column-start: b;
grid-column-end: c;
}
</style><div class="grid"><div class="item-left">1fr</div><div class="item-right">1fr</div></div>

View file

@ -0,0 +1,14 @@
<style>
.grid-container {
display: grid;
background-color: lightsalmon;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas: "one one three two";
}
.grid-item {
background-color: lightblue;
grid-column-start: one;
grid-column-end: one;
}
</style><div class="grid-container"><div class="grid-item">1fr</div></div>