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

LibWeb: Add display grid automated tests

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

62
Tests/LibWeb/Layout/input/grid/gap.html Normal file
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>