mirror of
https://github.com/RGBCube/serenity
synced 2025-10-29 10:22:06 +00:00
e537035cc6
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.
123 lines
4.2 KiB
HTML
123 lines
4.2 KiB
HTML
<style>
|
|
.grid-container {
|
|
display: grid;
|
|
background-color: lightsalmon;
|
|
}
|
|
.grid-item {
|
|
background-color: lightblue;
|
|
}
|
|
</style>
|
|
|
|
<!-- 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">
|
|
<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>
|
|
|
|
<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: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
grid-template-rows: 25px 25px 25px 25px 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>
|