beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-22 23:50:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6
ladybird/Base/res/html/misc/display-grid.html

605 lines
18 KiB
HTML
Raw Normal View History

Base: Add display grid test page
2022-08-13 10:05:27 +00:00
<style>
.grid-container {
display: grid;
background-color: lightsalmon;
}
.grid-item {
background-color: lightblue;
}
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 16:40:24 +00:00
.with-border {
border: 1px solid black;
}
Base: Add display grid test page
2022-08-13 10:05:27 +00:00
</style>
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 16:40:24 +00:00
<body style="margin-bottom: 2rem;">
Base: Add display grid test page
2022-08-13 10:05:27 +00:00
<!-- 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>
Base: Add more tests for display: grid
2022-09-07 12:52:13 +00:00
LibWeb+Base: Deal with column-spans greater than implicit grid When the indicated column-span is greater than the implicit grid (like in cases when the grid has the default size of 1x1, and the column is supposed to span any number greater than that), then previously were crashing.
2022-10-08 12:46:21 +00:00
<p>Start of crash tests</p>
Base: Add more tests for display: grid
2022-09-07 12:52:13 +00:00
<!-- 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>
Base+LibWeb: Stub out negative spans Ensure that when a grid item is passed with a span and a fixed end position, that if the resulting start of this item is less than 0 then it won't throw. This is a temporary measure until the correct functionality is implemented.
2022-09-26 09:41:59 +00:00
<!-- 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>
Base+LibWeb: Make sure grid positions don't cause out of bounds Add some tests to the test page to make sure that different combinations of GridTrackPlacement don't cause out of bounds issues.
2022-09-26 12:04:05 +00:00
<div class="grid-item" style="grid-column-end: 1; grid-row-end: 1;">6</div>
Base+LibWeb: Stub out negative spans Ensure that when a grid item is passed with a span and a fixed end position, that if the resulting start of this item is less than 0 then it won't throw. This is a temporary measure until the correct functionality is implemented.
2022-09-26 09:41:59 +00:00
</div>
Base+LibWeb: Make sure grid positions don't cause out of bounds Add some tests to the test page to make sure that different combinations of GridTrackPlacement don't cause out of bounds issues.
2022-09-26 12:04:05 +00:00
<!-- 0 positioned grid items and similar inputs -->
LibWeb+Base: Add grid repeat() functionality Add ability to use values passed to grid-template-columns and grid-template-rows for CSS Grid layout within a repeat() function. E.g. grid-template-columns: repeat(2, 50px); means to have two columns of 50px width each.
2022-10-08 12:05:31 +00:00
<div class="grid-container" style="grid-template-rows: repeat(4,[row-start] 1fr [row-end]);">
Base+LibWeb: Make sure grid positions don't cause out of bounds Add some tests to the test page to make sure that different combinations of GridTrackPlacement don't cause out of bounds issues.
2022-09-26 12:04:05 +00:00
<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>
Base+LibWeb: Deal with zero-positioned grid items If a grid item has as its position value a 0 then it should be invalidated.
2022-10-01 11:49:01 +00:00
</div>
LibWeb+Base: Deal with column-spans greater than implicit grid When the indicated column-span is greater than the implicit grid (like in cases when the grid has the default size of 1x1, and the column is supposed to span any number greater than that), then previously were crashing.
2022-10-08 12:46:21 +00:00
<!-- 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>
Base: Update display grid test page Update the tests after adding minmax(), auto-fill and auto-fit functionality to the LibWeb implementation of the CSS Grid.
2022-10-15 11:26:12 +00:00
<!-- 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>
LibWeb+Base: Deal with column-spans greater than implicit grid When the indicated column-span is greater than the implicit grid (like in cases when the grid has the default size of 1x1, and the column is supposed to span any number greater than that), then previously were crashing.
2022-10-08 12:46:21 +00:00
LibWeb+Base: Use line names for positioning grid items When there are grid tracks with line names, use these to resolve line-names passed to positioned grid items.
2022-10-30 12:49:47 +00:00
<!-- 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>
Base: Add tests for grid gap
2022-11-06 12:53:19 +00:00
<!-- 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>
Base: Add test for grid-gap and auto-fit
2022-11-14 21:31:45 +00:00
<!-- 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>
Base: Add test for multiple line names in CSS Grid
2022-11-21 18:47:31 +00:00
<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>
LibWeb: Clamp {row,column} spans if outside of grid A bug was found where grid items were being drawn outside of the grid if the item had a large span and the grid was defined as having gaps between the rows/columns. This was caused by an erroneous calculation of the {row,column}_{start,span} properties.
2022-12-26 08:49:54 +00:00
<!-- 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>
LibWeb: Don't expand grid for {row,column} spans Fixes a bug where when you had spans that that were bigger than the grid, would create enough tracks to accomodate them. When a fixed position is given, there should be at a minimum a row/column available for the track. The span will be truncated if there is no space for it later.
2022-12-28 09:13:37 +00:00
<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>
LibWeb+Base: Deal with column-spans greater than implicit grid When the indicated column-span is greater than the implicit grid (like in cases when the grid has the default size of 1x1, and the column is supposed to span any number greater than that), then previously were crashing.
2022-10-08 12:46:21 +00:00
<p>End of crash tests</p>
Base: Add more tests for display: grid
2022-09-07 12:52:13 +00:00
<!-- 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>
LibWeb+Base: Re-implement grid track span Implement span correctly when indicated in the grid-column-start, grid-row-start, etc. CSS properties. Previously it had been implemented as if span was something that went alongside the position property, but actually it seems like if you do 'span 3' in the grid-column-start property, for example, this means it literally spans 3 blocks, and the 3 has nothing to do with position.
2022-09-17 16:09:35 +00:00
<!-- Using grid-row and grid-column -->
<p>Should render a full-width 4x4 grid with:
LibWeb+Base: Add grid repeat() functionality Add ability to use values passed to grid-template-columns and grid-template-rows for CSS Grid layout within a repeat() function. E.g. grid-template-columns: repeat(2, 50px); means to have two columns of 50px width each.
2022-10-08 12:05:31 +00:00
<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>
Base: Update display grid test page Update the tests after adding minmax(), auto-fill and auto-fit functionality to the LibWeb implementation of the CSS Grid.
2022-10-15 11:26:12 +00:00
<!-- 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>
LibWeb+Base: Use line names for positioning grid items When there are grid tracks with line names, use these to resolve line-names passed to positioned grid items.
2022-10-30 12:49:47 +00:00
<!-- 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>
Base: Add test for sizing children of grid
2022-11-05 18:19:15 +00:00
<!-- 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=">
Base: Add tests for grid gap
2022-11-06 12:53:19 +00:00
</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>
Base: Add test for sizing children of grid
2022-11-05 18:19:15 +00:00
</div>
LibWeb: Include tests for grid track spans Include tests for grid track spans when given for automatically-placed grid tracks in the grid-*-end properties.
2022-11-29 18:02:11 +00:00
<!-- 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>
LibWeb: Don't expand grid for {row,column} spans Fixes a bug where when you had spans that that were bigger than the grid, would create enough tracks to accomodate them. When a fixed position is given, there should be at a minimum a row/column available for the track. The span will be truncated if there is no space for it later.
2022-12-28 09:13:37 +00:00
<!-- 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>
Base: Add tests for grid-template-areas and min/max-content
2023-01-17 13:32:55 +00:00
<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>
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 16:40:24 +00:00
<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 Copy permalink