mirror of
https://github.com/RGBCube/serenity
synced 2025-07-15 06:57:35 +00:00
84290ed7c8
Add some tests to the test page to make sure that different combinations of GridTrackPlacement don't cause out of bounds issues.
106 lines
3.6 KiB
HTML
106 lines
3.6 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>
|
|
|
|
<!-- Check for a bug where a github page was crashing due to the following code. -->
|
|
<p>If you can see this message then the test passed.</p>
|
|
<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) -->
|
|
<p>If you can see this message then the test passed.</p>
|
|
<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 -->
|
|
<p>If you can see this message then the test passed.</p>
|
|
<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>
|
|
|
|
<!-- 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>
|