diff options
| author | Tom <martinmotteditfalisse@gmail.com> | 2022-12-28 10:13:37 +0100 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2022-12-28 15:04:58 +0100 |
| commit | bb062e50b071eeefeaa7e6d2d57a5a3e07238998 (patch) | |
| tree | a19479f5264faaf0a664a4ee10487b9be73d5840 /Base | |
| parent | 6e29f693f5dcc81ac56814c32b11a267469e4bc3 (diff) | |
| download | serenity-bb062e50b071eeefeaa7e6d2d57a5a3e07238998.zip | |
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.
Diffstat (limited to 'Base')
| -rw-r--r-- | Base/res/html/misc/display-grid.html | 44 |
1 files changed, 44 insertions, 0 deletions
diff --git a/Base/res/html/misc/display-grid.html b/Base/res/html/misc/display-grid.html index 89180e5325..5dd269b7f7 100644 --- a/Base/res/html/misc/display-grid.html +++ b/Base/res/html/misc/display-grid.html @@ -150,6 +150,13 @@ that I don't quite understand. --> <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 --> @@ -474,3 +481,40 @@ length value, and as a minimum two lengths with an auto. --> 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> |