diff options
Diffstat (limited to 'Tests/LibWeb/Layout')
| -rw-r--r-- | Tests/LibWeb/Layout/expected/grid/minmax-1.txt | 14 | ||||
| -rw-r--r-- | Tests/LibWeb/Layout/expected/grid/minmax-2.txt | 14 | ||||
| -rw-r--r-- | Tests/LibWeb/Layout/expected/grid/minmax-3.txt | 19 | ||||
| -rw-r--r-- | Tests/LibWeb/Layout/expected/grid/minmax-invalid-1.txt | 14 | ||||
| -rw-r--r-- | Tests/LibWeb/Layout/expected/grid/minmax.txt | 168 | ||||
| -rw-r--r-- | Tests/LibWeb/Layout/input/grid/minmax-1.html | 15 | ||||
| -rw-r--r-- | Tests/LibWeb/Layout/input/grid/minmax-2.html | 17 | ||||
| -rw-r--r-- | Tests/LibWeb/Layout/input/grid/minmax-3.html | 19 | ||||
| -rw-r--r-- | Tests/LibWeb/Layout/input/grid/minmax-invalid-1.html | 18 | ||||
| -rw-r--r-- | Tests/LibWeb/Layout/input/grid/minmax.html | 71 |
10 files changed, 130 insertions, 239 deletions
diff --git a/Tests/LibWeb/Layout/expected/grid/minmax-1.txt b/Tests/LibWeb/Layout/expected/grid/minmax-1.txt new file mode 100644 index 0000000000..2bf71efa74 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/minmax-1.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.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> diff --git a/Tests/LibWeb/Layout/expected/grid/minmax-2.txt b/Tests/LibWeb/Layout/expected/grid/minmax-2.txt new file mode 100644 index 0000000000..5c8b5715ee --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/minmax-2.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 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> diff --git a/Tests/LibWeb/Layout/expected/grid/minmax-3.txt b/Tests/LibWeb/Layout/expected/grid/minmax-3.txt new file mode 100644 index 0000000000..793f8fc988 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/minmax-3.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 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> diff --git a/Tests/LibWeb/Layout/expected/grid/minmax-invalid-1.txt b/Tests/LibWeb/Layout/expected/grid/minmax-invalid-1.txt new file mode 100644 index 0000000000..b4e82b511e --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/minmax-invalid-1.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 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> diff --git a/Tests/LibWeb/Layout/expected/grid/minmax.txt b/Tests/LibWeb/Layout/expected/grid/minmax.txt deleted file mode 100644 index 25afce72a9..0000000000 --- a/Tests/LibWeb/Layout/expected/grid/minmax.txt +++ /dev/null @@ -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> diff --git a/Tests/LibWeb/Layout/input/grid/minmax-1.html b/Tests/LibWeb/Layout/input/grid/minmax-1.html new file mode 100644 index 0000000000..1ad6f3128c --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/minmax-1.html @@ -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>
\ No newline at end of file diff --git a/Tests/LibWeb/Layout/input/grid/minmax-2.html b/Tests/LibWeb/Layout/input/grid/minmax-2.html new file mode 100644 index 0000000000..3f0b214aea --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/minmax-2.html @@ -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>
\ No newline at end of file diff --git a/Tests/LibWeb/Layout/input/grid/minmax-3.html b/Tests/LibWeb/Layout/input/grid/minmax-3.html new file mode 100644 index 0000000000..2a1bf08c8d --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/minmax-3.html @@ -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>
\ No newline at end of file diff --git a/Tests/LibWeb/Layout/input/grid/minmax-invalid-1.html b/Tests/LibWeb/Layout/input/grid/minmax-invalid-1.html new file mode 100644 index 0000000000..563617a177 --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/minmax-invalid-1.html @@ -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>
\ No newline at end of file diff --git a/Tests/LibWeb/Layout/input/grid/minmax.html b/Tests/LibWeb/Layout/input/grid/minmax.html deleted file mode 100644 index 56cc996fd8..0000000000 --- a/Tests/LibWeb/Layout/input/grid/minmax.html +++ /dev/null @@ -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>
\ No newline at end of file |