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

LibWeb+Base: Use line names for positioning grid items

Browse source 
When there are grid tracks with line names, use these to resolve
line-names passed to positioned grid items.
This commit is contained in:
martinfalisse 2022-10-30 13:49:47 +01:00 • committed by Andreas Kling
parent 829f56572d
commit 937fcfc75c
3 changed files with 211 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -80,6 +80,34 @@
style="grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)));">
</div>
<!-- Invalid template columns definition. Fixme: There seems to be some handling of this in other browsers
that I don't quite understand. -->
<div
class="grid-container"
style="
grid-template-columns: [name1] [name1] [name2] 50px;
">
<div class="grid-item" style="grid-column-start: name1;">1</div>
</div>
<!-- Missing grid track between line name declarations -->
<div
class="grid-container"
style="
grid-template-rows: [name1] 50px [name2] [name3];
">
<div class="grid-item" style="grid-row-start: name2;">1</div>
</div>
<!-- Missing grid track between line name declarations -->
<div
class="grid-container"
style="
grid-template-rows: [name1] 1fr [name2];
">
<div class="grid-item" style="grid-row: notfound;">1</div>
</div>
<p>End of crash tests</p>
<!-- Different column sizes -->
@ -228,3 +256,79 @@ length value, and as a minimum two lengths with an auto. -->
<div class="grid-item">Article content</div>
<div class="grid-item">3</div>
</div>
<!-- Example from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines-->
<p>Named tracks there should be 4 grid items in a circle with a space in the middle</p>
<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>
<p>Should render a 2 columned grid</p>
<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>
<!-- Multiple repeats -->
<p>Should render 2 50px columns and 2 100px columns</p>
<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>
<!-- Named lines inside repeat -->
<p>Should render 2 50px columns and 2 100px columns, with grid-item 1 starting at column 2</p>
<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>