mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-11 05:25:32 +03:00
Tests/LibWeb: Split input/grid/template-areas.html into smaller tests
The file template-areas.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. Also this change removes parts of template-areas.html that we can't layout correctly yet.
This commit is contained in:
Aliaksandr Kalenik
Andreas Kling
parent
3af92a76be
commit
bb90bf0141
Notes:
sideshowbarker
2024-07-17 03:19:14 +09:00
Author: https://github.com/kalenikaliaksandr Commit: https://github.com/SerenityOS/serenity/commit/bb90bf0141 Pull-request: https://github.com/SerenityOS/serenity/pull/18739
@ -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 784x34.9375 children: not-inline
|
||||
Box <div.container> at (8,8) content-size 784x34.9375 [GFC] children: not-inline
|
||||
BlockContainer <div.item.right-bottom> at (400,25.46875) content-size 392x17.46875 [BFC] children: inline
|
||||
line 0 width: 99.703125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 12, rect: [400,25.46875 99.703125x17.46875]
|
||||
"right-bottom"
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item.left> at (8,8) content-size 392x34.9375 [BFC] children: inline
|
||||
line 0 width: 26.25, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 4, rect: [8,8 26.25x17.46875]
|
||||
"left"
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item.right-top> at (400,8) content-size 392x17.46875 [BFC] children: inline
|
||||
line 0 width: 70.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 9, rect: [400,8 70.234375x17.46875]
|
||||
"right-top"
|
||||
TextNode <#text>
|
||||
@ -1,83 +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 784x104.8125 children: not-inline
|
||||
Box <div.grid-container> at (8,8) content-size 784x34.9375 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (400,25.46875) content-size 392x17.46875 [BFC] children: inline
|
||||
line 0 width: 99.703125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 1, length: 12, rect: [400,25.46875 99.703125x17.46875]
|
||||
"right-bottom"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (8,8) content-size 392x34.9375 [BFC] children: inline
|
||||
line 0 width: 26.25, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 4, rect: [8,8 26.25x17.46875]
|
||||
"left"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (400,8) content-size 392x17.46875 [BFC] children: inline
|
||||
line 0 width: 70.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 9, rect: [400,8 70.234375x17.46875]
|
||||
"right-top"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,42.9375) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
Box <div.grid-container> at (8,42.9375) content-size 784x17.46875 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,42.9375) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (8,42.9375) content-size 261.333343x17.46875 [BFC] children: inline
|
||||
line 0 width: 21.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 3, rect: [8,42.9375 21.609375x17.46875]
|
||||
"1fr"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,42.9375) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,60.40625) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
Box <div.grid-container> at (8,60.40625) content-size 784x17.46875 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,60.40625) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (8,60.40625) content-size 392x17.46875 [BFC] children: inline
|
||||
line 0 width: 21.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 3, rect: [8,60.40625 21.609375x17.46875]
|
||||
"1fr"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,60.40625) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,77.875) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
Box <div.grid-container> at (8,77.875) content-size 784x17.46875 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,77.875) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (8,77.875) content-size 196x17.46875 [BFC] children: inline
|
||||
line 0 width: 21.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 3, rect: [8,77.875 21.609375x17.46875]
|
||||
"1fr"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,77.875) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,95.34375) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
Box <div.grid-container> at (8,95.34375) content-size 784x17.46875 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,95.34375) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.grid-item> at (8,95.34375) content-size 196x17.46875 [BFC] children: inline
|
||||
line 0 width: 21.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 3, rect: [8,95.34375 21.609375x17.46875]
|
||||
"1fr"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,95.34375) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
@ -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.grid> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
|
||||
BlockContainer <div.item-left> at (8,8) content-size 261.333343x17.46875 [BFC] children: inline
|
||||
line 0 width: 21.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 3, rect: [8,8 21.609375x17.46875]
|
||||
"1fr"
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item-right> at (530.666687,8) content-size 261.333312x17.46875 [BFC] children: inline
|
||||
line 0 width: 21.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 3, rect: [530.666687,8 21.609375x17.46875]
|
||||
"1fr"
|
||||
TextNode <#text>
|
||||
9
Tests/LibWeb/Layout/expected/grid/valid-grid-areas-1.txt
Normal file
9
Tests/LibWeb/Layout/expected/grid/valid-grid-areas-1.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.grid-container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
|
||||
BlockContainer <div.grid-item> at (8,8) content-size 392x17.46875 [BFC] children: inline
|
||||
line 0 width: 21.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 3, rect: [8,8 21.609375x17.46875]
|
||||
"1fr"
|
||||
TextNode <#text>
|
||||
@ -0,0 +1,29 @@
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
background-color: lightsalmon;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
"left right-top"
|
||||
"left right-bottom";
|
||||
}
|
||||
|
||||
.item {
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
.right-bottom {
|
||||
background-color: lightpink;
|
||||
grid-area: right-bottom / right-bottom / right-bottom / right-bottom;
|
||||
}
|
||||
|
||||
.left {
|
||||
background-color: lightgreen;
|
||||
grid-area: left;
|
||||
}
|
||||
|
||||
.right-top {
|
||||
background-color: lightgrey;
|
||||
grid-column-end: right-top;
|
||||
}
|
||||
</style><div class="container"><div class="item right-bottom">right-bottom</div><div class="item left">left</div><div class="item right-top">right-top</div></div>
|
||||
@ -1,59 +0,0 @@
|
||||
<style>
|
||||
.grid-container {
|
||||
display: grid;
|
||||
background-color: lightsalmon;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Grid template areas basics -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
'left right-top'
|
||||
'left right-bottom';
|
||||
">
|
||||
<div style="background-color: lightpink; grid-area: right-bottom / right-bottom / right-bottom / right-bottom;">
|
||||
right-bottom</div>
|
||||
<div style="background-color: lightgreen; grid-area: left;">left</div>
|
||||
<div style="background-color: lightgrey; grid-column-end: right-top;">right-top</div>
|
||||
</div>
|
||||
|
||||
<!-- Grid-lines vs. Grid template areas -->
|
||||
<!-- There should be a left-aligned column taking up 1 / 3 of the Grid -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: [c] 1fr [b] 1fr [a] 1fr;
|
||||
grid-template-areas: 'a b c';
|
||||
">
|
||||
<div class="grid-item" style="grid-column-start: a; grid-column-end: a;">1fr</div>
|
||||
</div>
|
||||
|
||||
<!-- Valid grid areas -->
|
||||
<!-- Column taking up 50% width -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-template-areas: 'one one three two' 'one one four two' 'one one four two';
|
||||
">
|
||||
<div class="grid-item" style="grid-column-start: one; grid-column-end: one;">1fr</div>
|
||||
</div>
|
||||
|
||||
<!-- Valid grid areas. This test should ideally fail differently FIXME -->
|
||||
<!-- Left-aligned column taking up 25% width -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-template-areas: 'one one three two' 'one one four one';
|
||||
">
|
||||
<div class="grid-item" style="grid-column-start: two; grid-column-end: two;">1fr</div>
|
||||
</div>
|
||||
|
||||
<!-- Valid grid areas. This test should ideally fail differently FIXME -->
|
||||
<!-- Left-aligned column taking up 25% width -->
|
||||
<div class="grid-container" style="
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-template-areas: 'one one three two' 'one one four five' 'one one four two';
|
||||
">
|
||||
<div class="grid-item" style="grid-column-start: two; grid-column-end: two;">1fr</div>
|
||||
</div>
|
||||
21
Tests/LibWeb/Layout/input/grid/template-lines-and-areas.html
Normal file
21
Tests/LibWeb/Layout/input/grid/template-lines-and-areas.html
Normal file
@ -0,0 +1,21 @@
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
background-color: lightsalmon;
|
||||
grid-template-columns: [c] 1fr [b] 1fr [a] 1fr;
|
||||
grid-template-areas: "a b c";
|
||||
}
|
||||
|
||||
.item-left {
|
||||
background-color: lightblue;
|
||||
grid-column-start: a;
|
||||
grid-column-end: a;
|
||||
}
|
||||
|
||||
/* FIXME: This item should start at [b] and end at [c]. Currently it starts at [c] and ends at [c]. */
|
||||
.item-right {
|
||||
background-color: yellowgreen;
|
||||
grid-column-start: b;
|
||||
grid-column-end: c;
|
||||
}
|
||||
</style><div class="grid"><div class="item-left">1fr</div><div class="item-right">1fr</div></div>
|
||||
14
Tests/LibWeb/Layout/input/grid/valid-grid-areas-1.html
Normal file
14
Tests/LibWeb/Layout/input/grid/valid-grid-areas-1.html
Normal file
@ -0,0 +1,14 @@
|
||||
<style>
|
||||
.grid-container {
|
||||
display: grid;
|
||||
background-color: lightsalmon;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-template-areas: "one one three two";
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: lightblue;
|
||||
grid-column-start: one;
|
||||
grid-column-end: one;
|
||||
}
|
||||
</style><div class="grid-container"><div class="grid-item">1fr</div></div>
|
||||
@ -12,7 +12,7 @@ fi
|
||||
|
||||
BROWSER_BINARY="./headless-browser"
|
||||
|
||||
find "${SCRIPT_DIR}/input/" -type f -name "*.html" -print0 | while IFS= read -r -d '' input_html_path; do
|
||||
find "${SCRIPT_DIR}/input/grid" -type f -name "*.html" -print0 | while IFS= read -r -d '' input_html_path; do
|
||||
input_html_file=${input_html_path/${SCRIPT_DIR}"/input/"/}
|
||||
input_html_file=${input_html_file/".html"/}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user