diff options
| author | martinfalisse <martinmotteditfalisse@gmail.com> | 2022-11-06 13:53:19 +0100 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2022-11-07 10:06:07 +0100 |
| commit | 0586730a923bfdae76163214016e06032638b586 (patch) | |
| tree | 5e1cc969f93ca8786f68ac7d1700846f0ed28d17 /Base/res | |
| parent | 188856c5ebbe813c147439ed7dd3f17a43952495 (diff) | |
| download | serenity-0586730a923bfdae76163214016e06032638b586.zip | |
Base: Add tests for grid gap
Diffstat (limited to 'Base/res')
| -rw-r--r-- | Base/res/html/misc/display-grid.html | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/Base/res/html/misc/display-grid.html b/Base/res/html/misc/display-grid.html index c46ddbe518..03f5a41b97 100644 --- a/Base/res/html/misc/display-grid.html +++ b/Base/res/html/misc/display-grid.html @@ -108,6 +108,19 @@ that I don't quite understand. --> <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> + <p>End of crash tests</p> <!-- Different column sizes --> @@ -351,4 +364,31 @@ length value, and as a minimum two lengths with an auto. --> 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> |