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

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

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

29
Tests/LibWeb/Layout/input/grid/grid-template-areas-basics.html Normal file
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>

59
Tests/LibWeb/Layout/input/grid/template-areas.html
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>

21
Tests/LibWeb/Layout/input/grid/template-lines-and-areas.html Normal file
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>

14
Tests/LibWeb/Layout/input/grid/valid-grid-areas-1.html Normal file
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>