system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-21 18:15:58 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity
serenity/Base/res/html/misc/display-grid.html
Tom 52e45fb6fa LibWeb+Base: Fix row-height bug in Grid when there is a column gap 
This fixes a bug in the CSS Grid when there is a column and/or row gap,
as previously it would take the index of the incorrect column when
finding the `AvailableSize`.

There is a mild complication in the GridFormattingContext as the
OccupationGrid does not take into account the gap columns and rows that
later appear in the `Vector<TemporaryTrack>` columns and rows. The
PositionedBoxes are kind of a connection between the two, and so it's
now more explicit whether you would like to refer to a column by its
position taking into the gap columns/rows or not.
2023-03-10 18:20:27 +01:00

605 lines
18 KiB
HTML
Raw Blame History

<style>
.grid-container {
display: grid;
background-color: lightsalmon;
}
.grid-item {
background-color: lightblue;
}
.with-border {
border: 1px solid black;
}
</style>
<body style="margin-bottom: 2rem;">
<!-- A basic grid -->
<p>Should render a 2x2 grid</p>
<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>
<!-- Different row heights -->
<p>Should render a 2x2 grid with the first row having a height of 50px</p>
<div
class="grid-container"
style="grid-template-columns: auto auto;">
<div class="grid-item" style="height: 50px;">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
<p>Start of crash tests</p>
<!-- Check for a bug where a github page was crashing due to the following code. -->
<div
class="grid-container"
style="
--Layout-sidebar-width:296px;
grid-template-columns: minmax(0, var(--Layout-sidebar-width));">
<div class="grid-item">1</div>
</div>
<!-- Spans causing positions outside the inherit grid. (span 2 with an end position of 1 causes the start to be -1) -->
<div class="grid-container">
<div class="grid-item" style="grid-row: span 2 / 1; grid-column: span 2 / 1;">1</div>
<div class="grid-item" style="grid-row: span 2 / 1;">2</div>
<div class="grid-item" style="grid-column: span 2 / 1;">3</div>
<div class="grid-item" style="grid-column-end: 1; grid-row-end: 1;">6</div>
</div>
<!-- 0 positioned grid items and similar inputs -->
<div class="grid-container" style="grid-template-rows: repeat(4,[row-start] 1fr [row-end]);">
<div class="grid-item" style="grid-row-end: 0;">2</div>
<div class="grid-item" style="grid-row: 0 / 0;">3</div>
<div class="grid-item" style="grid-column: 0 / 1;">4</div>
<div class="grid-item" style="grid-row: 1 / 0;">5</div>
<div class="grid-item" style="grid-row-end: 1;">1</div>
<div class="grid-item" style="grid-column-end: 1;">6</div>
</div>
<!-- Grid-column-span larger than implicit grid for row-positioned items -->
<div class="grid-container">
<div class="grid-item" style="grid-row: 1 / -1; grid-column: span 4;">1</div>
</div>
<!-- Grid-column-span larger than implicit grid for non-positioned items -->
<div class="grid-container">
<div class="grid-item" style="grid-column: span 4;">1</div>
</div>
<!-- Grid-row-span larger than implicit grid for column-positioned items -->
<div class="grid-container">
<div class="grid-item" style="grid-column: 1 / -1; grid-row: span 4;">1</div>
</div>
<!-- Grid-row-span larger than implicit grid for non-positioned items -->
<div class="grid-container">
<div class="grid-item" style="grid-row: span 4;">1</div>
</div>
<!-- Minmax parsing with calc (Another crash found thanks to Github)-->
<div
class="grid-container"
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>
<!-- Percentage gap in vertical orientation (Not yet implemented) -->
<div
class="grid-container"
style="
grid-template-columns: auto auto;
gap: calc(4% + 2px);
">
<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>
<!-- Grid gap and auto-fit -->
<div
class="grid-container"
style="
grid-column-gap: 1px;
grid-template-columns: repeat(auto-fit, 48px);
">
<div class="grid-item">1</div>
</div>
<div
class="grid-container"
style="
grid-column-gap: 1px;
grid-template-columns: [name1 name2 name3] 1fr repeat(1, [name4 name5 name6] 1fr);
">
<div class="grid-item">1</div>
</div>
<!-- Row-gaps with overflowing row spans. Github bug-->
<div
class="grid-container"
style="
grid-row-gap: 16px;
grid-template-rows: 1fr 1fr;
">
<div class="grid-item" style="grid-row: 2 / span 3;">1</div>
</div>
<div style="
display: grid;
grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto
">
<div style="grid-column: 2/span 2;"></div>
</div>
<p>End of crash tests</p>
<!-- Different column sizes -->
<p>Should render a 2x2 grid with columns 50px and 50%</p>
<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>
<!-- Using grid-row and grid-column -->
<p>Should render a full-width 4x4 grid with:
<ul>
<li>one large column on the left</li>
<li>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</li>
</ul>
<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>
<!-- Invalid minmax value as can't have a flexible length as a minimum value -->
<p>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 -->
<p>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 -->
<p>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.</p>
<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-->
<p>Since there is no vertical limit, the two rows should be 50px high each.</p>
<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>
<!-- Basic minmax vertical-->
<p>Since there is a height limit, the rows should be 25px high each.</p>
<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">2</div>
<div class="grid-item">2</div>
</div>
<!-- Minmax horizontal with maximum as flex-->
<p>3 columns with minimum 200px and maximum 100%.</p>
<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>
<!-- Auto-fill-->
<p>Auto-fill of minimum 250px, max 1fr</p>
<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>
<!-- Auto-fit-->
<p>Auto-fit of minimum 250px, max 1fr</p>
<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>
<!-- See point 12.5.1, differences between minmax sizes. For example as a max it's comparing 2 flexes with a
length value, and as a minimum two lengths with an auto. -->
<p>Article layout: small margins on mobile, large on desktop. Centered column with 70ch width maximum</p>
<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>
<!-- 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>
<!-- Sizing of children of grid -->
<p>Should render a 64px wide image</p>
<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>
<!-- Gap basics -->
<p>There should be a large (50px) column gap and small (10px) row gap</p>
<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>
<!-- Gap basics -->
<p>There should be a Z-shaped gap (with both vertical and horizontal gap)</p>
<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 end and span -->
<p>There should be a column spanning 8 units, and then one spanning 4</p>
<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 -->
<p>There should be a column spanning 4 units, and then one spanning 8</p>
<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 -->
<p>There should be a row spanning 2 units, and then one spanning 3</p>
<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>
<!-- Column-gaps with overflowing column spans -->
<p>There should be 1 column that starts at column 2 and spans until the end.</p>
<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 -->
<p>There should be 1 column that starts at column 2 and spans until the end.</p>
<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>
<!-- Grid shouldn't expand to 3 columns as having too much span doesn't change size. -->
<p>The bottom row should take up half the width of the grid.</p>
<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>
<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>
<p>Bug with column gaps - grid items should have normal height</p>
<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>
Reference in a new issue View git blame Copy permalink