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

Base: Add tests for grid-template-areas and min/max-content

Browse source
This commit is contained in:
martinfalisse 2023-01-17 14:32:55 +01:00 • committed by Andreas Kling
parent fa2c3b7c3d
commit 173cc5e6e0
1 changed files with 70 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

70
Base/res/html/misc/display-grid.html
View file

@ -518,3 +518,73 @@ length value, and as a minimum two lengths with an auto. -->
">1</div> ">1</div>
<div class="grid-item">1</div> <div class="grid-item">1</div>
</div> </div>
<p>Grid template areas basics</p>
<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 -->
<p>There should be a left-aligned column taking up 1 / 3 of the grid</p>
<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 -->
<p>Column taking up 50% width</p>
<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 -->
<p>Left-aligned column taking up 25% width</p>
<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 -->
<p>Left-aligned column taking up 25% width</p>
<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>
<p>Min-content / Max-content / 1fr column widths</p>
<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>