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

LibWeb: Add display grid automated tests

This commit is contained in:
martinfalisse 2023-04-01 20:00:56 +02:00 committed by Andreas Kling
parent 7028f75779
commit 57cdb0c972
24 changed files with 1287 additions and 0 deletions

View file

@ -0,0 +1,22 @@
<style>
body {
font-family: 'SerenitySans';
}
.grid-container {
display: grid;
background-color: lightsalmon;
}
.grid-item {
background-color: lightblue;
}
</style>
<div class="grid-container" style="
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>

View file

@ -0,0 +1,22 @@
<style>
body {
font-family: 'SerenitySans';
}
.grid-container {
display: grid;
background-color: lightsalmon;
}
.grid-item {
background-color: lightblue;
}
</style>
<div class="grid-container" style="
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>

View file

@ -0,0 +1,22 @@
<style>
body {
font-family: 'SerenitySans';
}
.grid-container {
display: grid;
background-color: lightsalmon;
}
.grid-item {
background-color: lightblue;
}
</style>
<!-- Should render a 2x2 grid -->
<div class="grid-container" style="grid-template-columns: auto auto;">
<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>

View file

@ -0,0 +1,24 @@
<style>
body {
font-family: 'SerenitySans';
}
.grid-container {
display: grid;
background-color: lightsalmon;
}
.grid-item {
background-color: lightblue;
}
</style>
<!-- Should render a 2x2 grid with columns 50px and 50% -->
<div class="grid-container" style="
grid-template-columns: 50px 50%;
grid-template-rows: auto auto;">
<div class="grid-item" style="grid-column: 1 / 1; grid-row: 1 / 1">1</div>
<div class="grid-item" style="grid-column: 2 / 2; grid-row: 1 / 1">2</div>
<div class="grid-item" style="grid-column: 1 / 1; grid-row: 2 / 2">3</div>
<div class="grid-item" style="grid-column: 2 / 2; grid-row: 2 / 2">4</div>
</div>

View file

@ -0,0 +1,62 @@
<style>
body {
font-family: 'SerenitySans';
}
.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>

View file

@ -0,0 +1,32 @@
<style>
body {
font-family: 'SerenitySans';
}
.grid-container {
display: grid;
background-color: lightsalmon;
}
.grid-item {
background-color: lightblue;
}
</style>
<!-- Should render a 64px wide image -->
<div class="grid-container" style="
grid-template-columns: auto 0 minmax(0, 100%);
">
<div class="wrapper" style="width: 100%;">
<img style="width: 100%;" src="data:image/jpeg;base64,
/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDADIiJSwlHzIsKSw4NTI7S31RS0VFS5ltc1p9tZ++u7Kf
r6zI4f/zyNT/16yv+v/9////////wfD/////////////2wBDATU4OEtCS5NRUZP/zq/O////////
////////////////////////////////////////////////////////////wAARCAAYAEADAREA
AhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAAQIR
AAMSITEEEyJBgTORUWFx/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAA
AAD/2gAMAwEAAhEDEQA/AOgM52xQDrjvAV5Xv0vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4
MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4UyRHvjrAkC9KhpLMClQntlqFc2
X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1eAzU/HX80YBYy
JLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2rK5VR0YH/9k=">
</div>
</div>

View file

@ -0,0 +1,23 @@
<style>
body {
font-family: 'SerenitySans';
}
.grid-container {
display: grid;
background-color: lightsalmon;
}
.grid-item {
background-color: lightblue;
}
</style>
<div class="grid-container" style="
grid-template-columns: min-content max-content 1fr;
grid-template-areas: 'one two three';
">
<div class="grid-item" style="grid-area: one; min-width: 25%; max-width: 50%;">min-content</div>
<div class="grid-item" style="grid-area: two;">max-content</div>
<div class="grid-item" style="grid-area: three;">1fr</div>
</div>

View file

@ -0,0 +1,75 @@
<style>
body {
font-family: 'SerenitySans';
}
.grid-container {
display: grid;
background-color: lightsalmon;
}
.grid-item {
background-color: lightblue;
}
</style>
<!-- Basic minmax(): Should render 2 items side by side, each with a minimum width of 150px, If there is enough space,
they will expand up to 300px each. -->
<div class="grid-container" style="grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
</div>
<!-- Basic minmax vertical
Since there is no vertical limit, the two rows should be 50px high each. -->
<div class="grid-container" style="
grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
grid-template-rows: minmax(25px, 50px) minmax(25px, 50px);
">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
</div>
<!-- Invalid minmax value as can't have a flexible length as a minimum value.
Should render 2 items with no grid formatting (one on top of the other) -->
<div class="grid-container" style="grid-template-columns: minmax(1fr, 100px) 1fr 1fr;">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
</div>
<!-- Invalid minmax value in repeat as can't have a flexible length as a minimum value
Should render 2 items with no grid formatting (one on top of the other) -->
<div class="grid-container" style="grid-template-columns: repeat(3, minmax(1fr, 100px));">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
</div>
<!-- Basic minmax vertical
Since there is a height limit, the rows should be 25px high each. -->
<div class="grid-container" style="
height: 50px;
grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
grid-template-rows: minmax(25px, 50px) minmax(25px, 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>
<!-- Minmax horizontal with maximum as flex
3 columns with minimum 200px and maximum 100%. -->
<div class="grid-container" style="
grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr);
">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
<!-- Article layout: small margins on mobile, large on desktop. Centered column with 70ch width maximum -->
<div class="grid-container" style="grid-template-columns: minmax(1rem, 1fr) minmax(auto, 70ch) minmax(1rem, 1fr);">
<div class="grid-item">1</div>
<div class="grid-item">Article content</div>
<div class="grid-item">3</div>
</div>

View file

@ -0,0 +1,62 @@
<style>
body {
font-family: 'SerenitySans';
}
.grid-container {
display: grid;
background-color: lightsalmon;
}
.grid-item {
background-color: lightblue;
}
</style>
<!-- Should render a 2 columned grid -->
<div class="grid-container" style="
grid-template-columns:
[a] auto
[b] auto;
">
<div class="grid-item" style="grid-column-start: a;">1</div>
<div class="grid-item" style="grid-column-start: b;">2</div>
</div>
<!-- Example from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines-->
<!-- Named tracks there should be 4 grid items in a circle with a space in the middle -->
<div class="grid-container" style="
grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
grid-template-rows: [main-start] 25px [content-start] 25px [content-end] 25px [main-end];
">
<div class="grid-item" style="
grid-column-start: main-start;
grid-row-start: main-start;
grid-row-end: main-end;
">1</div>
<div class="grid-item" style="
grid-column-start: content-end;
grid-row-start: main-start;
grid-row-end: content-end;
">2</div>
<div class="grid-item" style="
grid-column-start: content-start;
grid-row-start: main-start;
">3</div>
<div class="grid-item" style="
grid-column-start: content-start;
grid-column-end: main-end;
grid-row-start: content-end;
">4</div>
</div>
<!-- Named lines inside repeat -->
<!-- Should render 2 50px columns and 2 100px columns, with grid-item 1 starting at column 2 -->
<div class="grid-container" style="
grid-template-columns: repeat(2, [name1] 50px [name2] 100px);
">
<div class="grid-item" style="grid-column-start: name2;">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>

View file

@ -0,0 +1,67 @@
<style>
body {
font-family: 'SerenitySans';
}
.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>

View file

@ -0,0 +1,41 @@
<style>
body {
font-family: 'SerenitySans';
}
.grid-container {
display: grid;
background-color: lightsalmon;
}
.grid-item {
background-color: lightblue;
}
</style>
<!-- Should render a full-width 4x4 grid with:
- one large column on the left
- one large column on the right, being split in half vertically, with the number 2 in the top half,
and numbers 3, 4, 5, and 6 in the bottom -->
<div class="grid-container" style="
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(2, 25px 25px 25px 25px );
">
<div class="grid-item" style="grid-row: 1 / -1; grid-column: span 4;">1</div>
<div class="grid-item" style="grid-row: 1 / 5; grid-column: 5 / -1;">2</div>
<div class="grid-item" style="grid-column: span 2; grid-row: span 2;">3</div>
<div class="grid-item" style="grid-column: span 2 / -1; grid-row: span 2;">4</div>
<div class="grid-item" style="grid-column: span 2; grid-row: 7 / span 100;">5</div>
<div class="grid-item" style="grid-column: 7 / span 2; grid-row: span 2 / -1;">6</div>
</div>
<!-- Multiple repeats -->
<!-- Should render 2 50px columns and 2 100px columns -->
<div class="grid-container" style="
grid-template-columns: repeat(2, 50px) repeat(2, 100px)
">
<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>

View file

@ -0,0 +1,63 @@
<style>
body {
font-family: 'SerenitySans';
}
.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>