diff options
| author | Andreas Kling <kling@serenityos.org> | 2023-03-10 11:54:52 +0100 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2023-03-10 13:38:34 +0100 |
| commit | 0ef07383e5616e5d9bd31eb5fffdccfbc0e034ab (patch) | |
| tree | 1cd9b63a68aecabfbfc5ef41423f82ba6988b223 /Tests | |
| parent | 24d5a9d7dfaa3c075ccd1691488a8ab431051bb7 (diff) | |
| download | serenity-0ef07383e5616e5d9bd31eb5fffdccfbc0e034ab.zip | |
LibWeb: Fix bogus min/max-height for box-sizing:border-box flex items
When resolving these constraints to CSS pixel sizes, we have to resolve
padding-top and padding-bottom against the flex container's *width*,
not its height.
Diffstat (limited to 'Tests')
2 files changed, 35 insertions, 0 deletions
diff --git a/Tests/LibWeb/Layout/expected/flex-item-vertical-padding-relative-to-flex-container-width.txt b/Tests/LibWeb/Layout/expected/flex-item-vertical-padding-relative-to-flex-container-width.txt new file mode 100644 index 0000000000..41282e4fb6 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex-item-vertical-padding-relative-to-flex-container-width.txt @@ -0,0 +1,15 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer <html> at (1,1) content-size 798x30 children: not-inline + BlockContainer <body> at (10,10) content-size 780x12 children: not-inline + BlockContainer <(anonymous)> at (10,10) content-size 780x0 children: inline + TextNode <#text> + Box <div.flex-container> at (11,11) content-size 600x10 flex-container(row) children: not-inline + BlockContainer <(anonymous)> at (11,11) content-size 0x0 children: inline + TextNode <#text> + BlockContainer <div.flex-item> at (12,72) content-size 24.859375x18.000007 flex-item children: inline + line 0 width: 24.859375, height: 19.359375, bottom: 19.359375, baseline: 15.5 + frag 0 from TextNode start: 0, length: 3, rect: [12,72 24.859375x19.359375] + "foo" + TextNode <#text> + BlockContainer <(anonymous)> at (11,11) content-size 0x0 children: inline + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/flex-item-vertical-padding-relative-to-flex-container-width.html b/Tests/LibWeb/Layout/input/flex-item-vertical-padding-relative-to-flex-container-width.html new file mode 100644 index 0000000000..355b973447 --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex-item-vertical-padding-relative-to-flex-container-width.html @@ -0,0 +1,20 @@ +<style> +* { + border: 1px solid black; +} +.flex-container { + display: flex; + width: 600px; + height: 10px; +} +.flex-item { + background: orange; + box-sizing: border-box; + min-height: 200px; + padding-top: 10%; + padding-bottom: 20%; +} +</style> +<body> +<div class="flex-container"> +<div class="flex-item">foo</div> |