diff options
Diffstat (limited to 'Tests/LibWeb/Layout')
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"/} |