summaryrefslogtreecommitdiff
path: root/Tests/LibWeb/Layout
diff options
context:
space:
mode:
Diffstat (limited to 'Tests/LibWeb/Layout')
-rw-r--r--Tests/LibWeb/Layout/expected/grid/grid-template-areas-basics.txt19
-rw-r--r--Tests/LibWeb/Layout/expected/grid/template-areas.txt83
-rw-r--r--Tests/LibWeb/Layout/expected/grid/template-lines-and-areas.txt14
-rw-r--r--Tests/LibWeb/Layout/expected/grid/valid-grid-areas-1.txt9
-rw-r--r--Tests/LibWeb/Layout/input/grid/grid-template-areas-basics.html29
-rw-r--r--Tests/LibWeb/Layout/input/grid/template-areas.html59
-rw-r--r--Tests/LibWeb/Layout/input/grid/template-lines-and-areas.html21
-rw-r--r--Tests/LibWeb/Layout/input/grid/valid-grid-areas-1.html14
-rwxr-xr-xTests/LibWeb/Layout/layout_test.sh2
9 files changed, 107 insertions, 143 deletions
diff --git a/Tests/LibWeb/Layout/expected/grid/grid-template-areas-basics.txt b/Tests/LibWeb/Layout/expected/grid/grid-template-areas-basics.txt
new file mode 100644
index 0000000000..c3701400b9
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/grid/grid-template-areas-basics.txt
@@ -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>
diff --git a/Tests/LibWeb/Layout/expected/grid/template-areas.txt b/Tests/LibWeb/Layout/expected/grid/template-areas.txt
deleted file mode 100644
index ff752eaff5..0000000000
--- a/Tests/LibWeb/Layout/expected/grid/template-areas.txt
+++ /dev/null
@@ -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>
diff --git a/Tests/LibWeb/Layout/expected/grid/template-lines-and-areas.txt b/Tests/LibWeb/Layout/expected/grid/template-lines-and-areas.txt
new file mode 100644
index 0000000000..a94c806bd8
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/grid/template-lines-and-areas.txt
@@ -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>
diff --git a/Tests/LibWeb/Layout/expected/grid/valid-grid-areas-1.txt b/Tests/LibWeb/Layout/expected/grid/valid-grid-areas-1.txt
new file mode 100644
index 0000000000..4e26284f6e
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/grid/valid-grid-areas-1.txt
@@ -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>
diff --git a/Tests/LibWeb/Layout/input/grid/grid-template-areas-basics.html b/Tests/LibWeb/Layout/input/grid/grid-template-areas-basics.html
new file mode 100644
index 0000000000..208ab690d6
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/grid-template-areas-basics.html
@@ -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> \ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/template-areas.html b/Tests/LibWeb/Layout/input/grid/template-areas.html
deleted file mode 100644
index aa5ab44103..0000000000
--- a/Tests/LibWeb/Layout/input/grid/template-areas.html
+++ /dev/null
@@ -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> \ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/template-lines-and-areas.html b/Tests/LibWeb/Layout/input/grid/template-lines-and-areas.html
new file mode 100644
index 0000000000..02f616812e
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/template-lines-and-areas.html
@@ -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> \ No newline at end of file
diff --git a/Tests/LibWeb/Layout/input/grid/valid-grid-areas-1.html b/Tests/LibWeb/Layout/input/grid/valid-grid-areas-1.html
new file mode 100644
index 0000000000..ce6611aac7
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/grid/valid-grid-areas-1.html
@@ -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> \ No newline at end of file
diff --git a/Tests/LibWeb/Layout/layout_test.sh b/Tests/LibWeb/Layout/layout_test.sh
index e52103ac49..ddc2855783 100755
--- a/Tests/LibWeb/Layout/layout_test.sh
+++ b/Tests/LibWeb/Layout/layout_test.sh
@@ -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"/}