mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 11:57:35 +00:00
Tests/LibWeb: Split input/grid/minmax.html into smaller tests
This commit is contained in:
Aliaksandr Kalenik
Andreas Kling
parent
0dcc93ed3d
commit
f2323b5b99
10 changed files with 130 additions and 239 deletions
14
Tests/LibWeb/Layout/expected/grid/minmax-1.txt
Normal file
14
Tests/LibWeb/Layout/expected/grid/minmax-1.txt
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
|
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
||||||
|
BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
|
||||||
|
Box <div.container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
|
||||||
|
BlockContainer <div.one> at (8,8) content-size 300x17.46875 [BFC] children: inline
|
||||||
|
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
|
||||||
|
"1"
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <div.two> at (308,8) content-size 300x17.46875 [BFC] children: inline
|
||||||
|
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from TextNode start: 0, length: 1, rect: [308,8 8.8125x17.46875]
|
||||||
|
"2"
|
||||||
|
TextNode <#text>
|
||||||
14
Tests/LibWeb/Layout/expected/grid/minmax-2.txt
Normal file
14
Tests/LibWeb/Layout/expected/grid/minmax-2.txt
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
|
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
||||||
|
BlockContainer <body> at (8,8) content-size 784x50 children: not-inline
|
||||||
|
Box <div.container> at (8,8) content-size 784x50 [GFC] children: not-inline
|
||||||
|
BlockContainer <div.one> at (8,8) content-size 300x25 [BFC] children: inline
|
||||||
|
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
|
||||||
|
"1"
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <div.two> at (308,8) content-size 300x25 [BFC] children: inline
|
||||||
|
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from TextNode start: 0, length: 1, rect: [308,8 8.8125x17.46875]
|
||||||
|
"2"
|
||||||
|
TextNode <#text>
|
||||||
19
Tests/LibWeb/Layout/expected/grid/minmax-3.txt
Normal file
19
Tests/LibWeb/Layout/expected/grid/minmax-3.txt
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
|
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
||||||
|
BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
|
||||||
|
Box <div.container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
|
||||||
|
BlockContainer <div.one> at (8,8) content-size 292x17.46875 [BFC] children: inline
|
||||||
|
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
|
||||||
|
"1"
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <div.two> at (300,8) content-size 200x17.46875 [BFC] children: inline
|
||||||
|
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from TextNode start: 0, length: 1, rect: [300,8 8.8125x17.46875]
|
||||||
|
"2"
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <div.three> at (500,8) content-size 292x17.46875 [BFC] children: inline
|
||||||
|
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from TextNode start: 0, length: 1, rect: [500,8 9.09375x17.46875]
|
||||||
|
"3"
|
||||||
|
TextNode <#text>
|
||||||
14
Tests/LibWeb/Layout/expected/grid/minmax-invalid-1.txt
Normal file
14
Tests/LibWeb/Layout/expected/grid/minmax-invalid-1.txt
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
|
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
||||||
|
BlockContainer <body> at (8,8) content-size 784x34.9375 children: not-inline
|
||||||
|
Box <div.container> at (8,8) content-size 784x34.9375 [GFC] children: not-inline
|
||||||
|
BlockContainer <div.one> at (8,8) content-size 784x17.46875 [BFC] children: inline
|
||||||
|
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
|
||||||
|
"1"
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <div.two> at (8,25.46875) content-size 784x17.46875 [BFC] children: inline
|
||||||
|
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from TextNode start: 0, length: 1, rect: [8,25.46875 8.8125x17.46875]
|
||||||
|
"2"
|
||||||
|
TextNode <#text>
|
||||||
|
|
@ -1,168 +0,0 @@
|
||||||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|
||||||
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
|
||||||
BlockContainer <body> at (8,8) content-size 784x222.28125 children: not-inline
|
|
||||||
Box <div.grid-container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
|
|
||||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (8,8) content-size 300x17.46875 [BFC] children: inline
|
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
|
|
||||||
"1"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (308,8) content-size 300x17.46875 [BFC] children: inline
|
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [308,8 8.8125x17.46875]
|
|
||||||
"2"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,25.46875) content-size 784x0 children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
TextNode <#text>
|
|
||||||
Box <div.grid-container> at (8,25.46875) content-size 784x50 [GFC] children: not-inline
|
|
||||||
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (8,25.46875) content-size 300x25 [BFC] children: inline
|
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [8,25.46875 6.34375x17.46875]
|
|
||||||
"1"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (308,25.46875) content-size 300x25 [BFC] children: inline
|
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [308,25.46875 8.8125x17.46875]
|
|
||||||
"2"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,75.46875) content-size 784x0 children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
TextNode <#text>
|
|
||||||
Box <div.grid-container> at (8,75.46875) content-size 784x34.9375 [GFC] children: not-inline
|
|
||||||
BlockContainer <(anonymous)> at (8,75.46875) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (8,75.46875) content-size 784x17.46875 [BFC] children: inline
|
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [8,75.46875 6.34375x17.46875]
|
|
||||||
"1"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,75.46875) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (8,92.9375) content-size 784x17.46875 [BFC] children: inline
|
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [8,92.9375 8.8125x17.46875]
|
|
||||||
"2"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,75.46875) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,110.40625) content-size 784x0 children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
TextNode <#text>
|
|
||||||
Box <div.grid-container> at (8,110.40625) content-size 784x34.9375 [GFC] children: not-inline
|
|
||||||
BlockContainer <(anonymous)> at (8,110.40625) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (8,110.40625) content-size 784x17.46875 [BFC] children: inline
|
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [8,110.40625 6.34375x17.46875]
|
|
||||||
"1"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,110.40625) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (8,127.875) content-size 784x17.46875 [BFC] children: inline
|
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [8,127.875 8.8125x17.46875]
|
|
||||||
"2"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,110.40625) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,145.34375) content-size 784x0 children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
TextNode <#text>
|
|
||||||
Box <div.grid-container> at (8,145.34375) content-size 784x50 [GFC] children: not-inline
|
|
||||||
BlockContainer <(anonymous)> at (8,145.34375) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (8,145.34375) content-size 300x25 [BFC] children: inline
|
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [8,145.34375 6.34375x17.46875]
|
|
||||||
"1"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,145.34375) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (308,145.34375) content-size 300x25 [BFC] children: inline
|
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [308,145.34375 8.8125x17.46875]
|
|
||||||
"2"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,145.34375) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (8,170.34375) content-size 300x25 [BFC] children: inline
|
|
||||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [8,170.34375 9.09375x17.46875]
|
|
||||||
"3"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,145.34375) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (308,170.34375) content-size 300x25 [BFC] children: inline
|
|
||||||
line 0 width: 7.75, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [308,170.34375 7.75x17.46875]
|
|
||||||
"4"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,145.34375) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,195.34375) content-size 784x0 children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
TextNode <#text>
|
|
||||||
Box <div.grid-container> at (8,195.34375) content-size 784x17.46875 [GFC] children: not-inline
|
|
||||||
BlockContainer <(anonymous)> at (8,195.34375) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (8,195.34375) content-size 261.333343x17.46875 [BFC] children: inline
|
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [8,195.34375 6.34375x17.46875]
|
|
||||||
"1"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,195.34375) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (269.333343,195.34375) content-size 261.333343x17.46875 [BFC] children: inline
|
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [269.333343,195.34375 8.8125x17.46875]
|
|
||||||
"2"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,195.34375) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (530.666687,195.34375) content-size 261.333312x17.46875 [BFC] children: inline
|
|
||||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [530.666687,195.34375 9.09375x17.46875]
|
|
||||||
"3"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,195.34375) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,212.8125) content-size 784x0 children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
TextNode <#text>
|
|
||||||
Box <div.grid-container> at (8,212.8125) content-size 784x17.46875 [GFC] children: not-inline
|
|
||||||
BlockContainer <(anonymous)> at (8,212.8125) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (8,212.8125) content-size 56.218711x17.46875 [BFC] children: inline
|
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [8,212.8125 6.34375x17.46875]
|
|
||||||
"1"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,212.8125) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (64.218711,212.8125) content-size 671.5625x17.46875 [BFC] children: inline
|
|
||||||
line 0 width: 125.265625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
|
||||||
frag 0 from TextNode start: 0, length: 15, rect: [64.218711,212.8125 125.265625x17.46875]
|
|
||||||
"Article content"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,212.8125) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (735.781188,212.8125) content-size 56.218688x17.46875 [BFC] children: inline
|
|
||||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [735.781188,212.8125 9.09375x17.46875]
|
|
||||||
"3"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,212.8125) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
15
Tests/LibWeb/Layout/input/grid/minmax-1.html
Normal file
15
Tests/LibWeb/Layout/input/grid/minmax-1.html
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
background-color: lightsalmon;
|
||||||
|
grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.one {
|
||||||
|
background-color: lightblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.two {
|
||||||
|
background-color: yellowgreen;
|
||||||
|
}
|
||||||
|
</style><div class="container"><div class="one">1</div><div class="two">2</div></div>
|
||||||
17
Tests/LibWeb/Layout/input/grid/minmax-2.html
Normal file
17
Tests/LibWeb/Layout/input/grid/minmax-2.html
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
background-color: lightsalmon;
|
||||||
|
grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
|
||||||
|
/* FIXME: We currently does not layout this correctly. Rows take 25px even if 50px are available. */
|
||||||
|
grid-template-rows: minmax(25px, 50px) minmax(25px, 50px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.one {
|
||||||
|
background-color: lightblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.two {
|
||||||
|
background-color: yellowgreen;
|
||||||
|
}
|
||||||
|
</style><div class="container"><div class="one">1</div><div class="two">2</div></div>
|
||||||
19
Tests/LibWeb/Layout/input/grid/minmax-3.html
Normal file
19
Tests/LibWeb/Layout/input/grid/minmax-3.html
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
background-color: lightsalmon;
|
||||||
|
grid-template-columns: minmax(200px, 1fr) minmax(100px, 200px) minmax(200px, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.one {
|
||||||
|
background-color: lightblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.two {
|
||||||
|
background-color: yellowgreen;
|
||||||
|
}
|
||||||
|
|
||||||
|
.three {
|
||||||
|
background-color: palevioletred;
|
||||||
|
}
|
||||||
|
</style><div class="container"><div class="one">1</div><div class="two">2</div><div class="three">3</div></div>
|
||||||
18
Tests/LibWeb/Layout/input/grid/minmax-invalid-1.html
Normal file
18
Tests/LibWeb/Layout/input/grid/minmax-invalid-1.html
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
background-color: lightsalmon;
|
||||||
|
|
||||||
|
/* Invalid minmax value as can't have a flexible length as a minimum value. */
|
||||||
|
grid-template-columns: minmax(1fr, 100px) 1fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.one {
|
||||||
|
background-color: lightblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.two {
|
||||||
|
background-color: yellowgreen;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="container"><div class="one">1</div><div class="two">2</div></div>
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
<style>
|
|
||||||
.grid-container {
|
|
||||||
display: grid;
|
|
||||||
background-color: lightsalmon;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-item {
|
|
||||||
background-color: lightblue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<!-- Basic minmax(): Should render 2 items side by side, each with a minimum width of 150px, If there is enough space,
|
|
||||||
they will expand up to 300px each. -->
|
|
||||||
<div class="grid-container" style="grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);">
|
|
||||||
<div class="grid-item">1</div>
|
|
||||||
<div class="grid-item">2</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Basic minmax vertical
|
|
||||||
Since there is no vertical limit, the two rows should be 50px high each. -->
|
|
||||||
<div class="grid-container" style="
|
|
||||||
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>
|
|
||||||
|
|
||||||
<!-- Invalid minmax value as can't have a flexible length as a minimum value.
|
|
||||||
Should render 2 items with no grid formatting (one on top of the other) -->
|
|
||||||
<div class="grid-container" style="grid-template-columns: minmax(1fr, 100px) 1fr 1fr;">
|
|
||||||
<div class="grid-item">1</div>
|
|
||||||
<div class="grid-item">2</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Invalid minmax value in repeat as can't have a flexible length as a minimum value
|
|
||||||
Should render 2 items with no grid formatting (one on top of the other) -->
|
|
||||||
<div class="grid-container" style="grid-template-columns: repeat(3, minmax(1fr, 100px));">
|
|
||||||
<div class="grid-item">1</div>
|
|
||||||
<div class="grid-item">2</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Basic minmax vertical
|
|
||||||
Since there is a height limit, the rows should be 25px high each. -->
|
|
||||||
<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">3</div>
|
|
||||||
<div class="grid-item">4</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Minmax horizontal with maximum as flex
|
|
||||||
3 columns with minimum 200px and maximum 100%. -->
|
|
||||||
<div class="grid-container" style="
|
|
||||||
grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr);
|
|
||||||
">
|
|
||||||
<div class="grid-item">1</div>
|
|
||||||
<div class="grid-item">2</div>
|
|
||||||
<div class="grid-item">3</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Article layout: small margins on mobile, large on desktop. Centered column with 70ch width maximum -->
|
|
||||||
<div class="grid-container" style="grid-template-columns: minmax(1rem, 1fr) minmax(auto, 70ch) minmax(1rem, 1fr);">
|
|
||||||
<div class="grid-item">1</div>
|
|
||||||
<div class="grid-item">Article content</div>
|
|
||||||
<div class="grid-item">3</div>
|
|
||||||
</div>
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue