diff options
| author | martinfalisse <martinmotteditfalisse@gmail.com> | 2023-04-02 16:37:14 +0200 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2023-04-02 19:08:04 +0200 |
| commit | 289285cd6ee213a8af6bca261275649448cacbff (patch) | |
| tree | f2023c7276f455d3fb981ebaaaea3ef666d4edaf /Tests/LibWeb/Layout/input | |
| parent | 6f52272d34baa4c6da2e0976a05ba71beec67eb5 (diff) | |
| download | serenity-289285cd6ee213a8af6bca261275649448cacbff.zip | |
LibWeb: Add borders functionality to CSS Grid
Diffstat (limited to 'Tests/LibWeb/Layout/input')
| -rw-r--r-- | Tests/LibWeb/Layout/input/grid/borders.html | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/Tests/LibWeb/Layout/input/grid/borders.html b/Tests/LibWeb/Layout/input/grid/borders.html new file mode 100644 index 0000000000..e43cf1fe55 --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/borders.html @@ -0,0 +1,62 @@ +<style> + body { + font-family: 'SerenitySans'; + } + + .grid-container { + display: grid; + background-color: lightsalmon; + } + + .grid-item { + background-color: lightblue; + border: 10px solid black; + } +</style> + +<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> + +<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> + +<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> + +<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> + +<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> + +<div class="grid-container" style="grid-template-rows: 20px;"> + <div class="grid-item">1</div> +</div>
\ No newline at end of file |