mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 13:47:35 +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:
parent
3af92a76be
commit
bb90bf0141
9 changed files with 107 additions and 143 deletions
|
@ -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>
|
|
@ -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
21
Tests/LibWeb/Layout/input/grid/template-lines-and-areas.html
Normal 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
14
Tests/LibWeb/Layout/input/grid/valid-grid-areas-1.html
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue