mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 05:47:35 +00:00
Tests/LibWeb: Split input/grid/gap.html into smaller tests
The file gap.html, which previously had multiple grid tests, has now been divided into smaller files, each containing only one grid test. It is going to make it easier to identify what inputs have been affected by changes in layout code.
This commit is contained in:
Aliaksandr Kalenik
Andreas Kling
parent
bb90bf0141
commit
0dcc93ed3d
8 changed files with 97 additions and 160 deletions
|
|
@ -1,102 +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 784x150.8125 children: not-inline
|
|
||||||
Box <div.grid-container> at (8,8) content-size 784x44.9375 [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 367.140625x17.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 (425.140625,8) content-size 367x17.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: [425.140625,8 8.8125x17.46875]
|
|
||||||
"2"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (8,35.46875) content-size 367.140625x17.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: [8,35.46875 9.09375x17.46875]
|
|
||||||
"3"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (425.140625,35.46875) content-size 367x17.46875 [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: [425.140625,35.46875 7.75x17.46875]
|
|
||||||
"4"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,52.9375) content-size 784x0 children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
TextNode <#text>
|
|
||||||
Box <div.grid-container> at (8,52.9375) content-size 784x50.9375 [GFC] children: not-inline
|
|
||||||
BlockContainer <(anonymous)> at (8,52.9375) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (435.934356,52.9375) content-size 357.300018x17.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: [435.934356,52.9375 6.34375x17.46875]
|
|
||||||
"1"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,52.9375) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (8,86.40625) content-size 358.534362x17.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,86.40625 8.8125x17.46875]
|
|
||||||
"2"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,52.9375) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,103.875) content-size 784x0 children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
TextNode <#text>
|
|
||||||
TextNode <#text>
|
|
||||||
Box <div.grid-container> at (8,103.875) content-size 784x17.46875 [GFC] children: not-inline
|
|
||||||
BlockContainer <(anonymous)> at (8,103.875) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (408,103.875) content-size 384x17.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: [408,103.875 6.34375x17.46875]
|
|
||||||
"1"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,103.875) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,121.34375) content-size 784x0 children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
TextNode <#text>
|
|
||||||
TextNode <#text>
|
|
||||||
Box <div.grid-container> at (8,121.34375) content-size 784x20 [GFC] children: not-inline
|
|
||||||
BlockContainer <(anonymous)> at (8,121.34375) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item> at (408,121.34375) content-size 384x20 [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: [408,121.34375 6.34375x17.46875]
|
|
||||||
"1"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,121.34375) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,141.34375) content-size 784x0 children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
TextNode <#text>
|
|
||||||
Box <div.grid-container.with-border> at (8,141.34375) content-size 784x17.46875 [GFC] children: not-inline
|
|
||||||
BlockContainer <(anonymous)> at (8,141.34375) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item.with-border> at (8,141.34375) content-size 387x17.46875 [BFC] children: inline
|
|
||||||
line 0 width: 104.875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
|
||||||
frag 0 from TextNode start: 0, length: 14, rect: [8,141.34375 104.875x17.46875]
|
|
||||||
"left side text"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,141.34375) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <div.grid-item.with-border> at (405,141.34375) content-size 387x17.46875 [BFC] children: inline
|
|
||||||
line 0 width: 363.203125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
|
||||||
frag 0 from TextNode start: 0, length: 47, rect: [405,141.34375 363.203125x17.46875]
|
|
||||||
"right side text right side text right side text"
|
|
||||||
TextNode <#text>
|
|
||||||
BlockContainer <(anonymous)> at (8,141.34375) content-size 0x0 [BFC] children: inline
|
|
||||||
TextNode <#text>
|
|
||||||
24
Tests/LibWeb/Layout/expected/grid/grid-gap-1.txt
Normal file
24
Tests/LibWeb/Layout/expected/grid/grid-gap-1.txt
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
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 784x84.9375 children: not-inline
|
||||||
|
Box <div.grid-container> at (8,8) content-size 784x84.9375 [GFC] children: not-inline
|
||||||
|
BlockContainer <div.one> at (8,8) content-size 342.140625x17.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 (450.140625,8) content-size 342x17.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: [450.140625,8 8.8125x17.46875]
|
||||||
|
"2"
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <div.three> at (8,75.46875) content-size 342.140625x17.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: [8,75.46875 9.09375x17.46875]
|
||||||
|
"3"
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <div.four> at (450.140625,75.46875) content-size 342x17.46875 [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: [450.140625,75.46875 7.75x17.46875]
|
||||||
|
"4"
|
||||||
|
TextNode <#text>
|
||||||
14
Tests/LibWeb/Layout/expected/grid/grid-gap-2.txt
Normal file
14
Tests/LibWeb/Layout/expected/grid/grid-gap-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.9375 children: not-inline
|
||||||
|
Box <div.container> at (8,8) content-size 784x50.9375 [GFC] children: not-inline
|
||||||
|
BlockContainer <div.item> at (435.934356,8) content-size 357.300018x17.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: [435.934356,8 6.34375x17.46875]
|
||||||
|
"1"
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <div.item> at (8,41.46875) content-size 358.534362x17.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,41.46875 8.8125x17.46875]
|
||||||
|
"2"
|
||||||
|
TextNode <#text>
|
||||||
9
Tests/LibWeb/Layout/expected/grid/grid-gap-3.txt
Normal file
9
Tests/LibWeb/Layout/expected/grid/grid-gap-3.txt
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
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.item> at (410,8) content-size 382x17.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: [410,8 6.34375x17.46875]
|
||||||
|
"1"
|
||||||
|
TextNode <#text>
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
<style>
|
|
||||||
.grid-container {
|
|
||||||
display: grid;
|
|
||||||
background-color: lightsalmon;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-item {
|
|
||||||
background-color: lightblue;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<!-- There should be a large (50px) column gap and small (10px) row gap -->
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- There should be a Z-shaped gap (with both vertical and horizontal gap) -->
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- Column-gaps with overflowing column spans -->
|
|
||||||
<!-- There should be 1 column that starts at column 2 and spans until the end. -->
|
|
||||||
<div class="grid-container" style="
|
|
||||||
grid-column-gap: 16px;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
">
|
|
||||||
<div class="grid-item" style="grid-column: 2 / span 5;">1</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Column-gaps with overflowing column spans and row spans -->
|
|
||||||
<!-- There should be 1 column that starts at column 2 and spans until the end. -->
|
|
||||||
<div class="grid-container" style="
|
|
||||||
grid-column-gap: 16px;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
grid-template-rows: 20px;
|
|
||||||
">
|
|
||||||
<div class="grid-item" style="grid-column: 2 / span 5; grid-row: span 4">1</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Bug with column gaps - grid items should have normal height -->
|
|
||||||
<div class="grid-container with-border" style="
|
|
||||||
grid-column-gap: 10px;
|
|
||||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
||||||
">
|
|
||||||
<div class="grid-item with-border">left side text</div>
|
|
||||||
<div class="grid-item with-border">right side text right side text right side text</div>
|
|
||||||
</div>
|
|
||||||
24
Tests/LibWeb/Layout/input/grid/grid-gap-1.html
Normal file
24
Tests/LibWeb/Layout/input/grid/grid-gap-1.html
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<style>
|
||||||
|
.grid-container {
|
||||||
|
display: grid;
|
||||||
|
background-color: lightsalmon;
|
||||||
|
grid-template-columns: auto auto;
|
||||||
|
gap: 50px 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.one {
|
||||||
|
background-color: lightblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.two {
|
||||||
|
background-color: yellowgreen;
|
||||||
|
}
|
||||||
|
|
||||||
|
.three {
|
||||||
|
background-color: palevioletred;
|
||||||
|
}
|
||||||
|
|
||||||
|
.four {
|
||||||
|
background-color: lightseagreen;
|
||||||
|
}
|
||||||
|
</style><div class="grid-container"><div class="one">1</div><div class="two">2</div><div class="three">3</div><div class="four">4</div></div>
|
||||||
13
Tests/LibWeb/Layout/input/grid/grid-gap-2.html
Normal file
13
Tests/LibWeb/Layout/input/grid/grid-gap-2.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
background-color: lightsalmon;
|
||||||
|
grid-template-columns: auto auto;
|
||||||
|
gap: calc(1vh + 10px) calc(10% - 10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
background-color: palevioletred;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="container"><div class="item" style="grid-column: 2 / span 1">1</div><div class="item">2</div></div>
|
||||||
13
Tests/LibWeb/Layout/input/grid/grid-gap-3.html
Normal file
13
Tests/LibWeb/Layout/input/grid/grid-gap-3.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
background-color: lightsalmon;
|
||||||
|
grid-column-gap: 20px;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
background-color: palevioletred;
|
||||||
|
grid-column: 2;
|
||||||
|
}
|
||||||
|
</style><div class="container"><div class="item">1</div></div>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue