mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-11 05:25:32 +03:00
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.
This commit is contained in:
parent
24d5a9d7df
commit
0ef07383e5
Notes:
sideshowbarker
2024-07-17 01:46:43 +09:00
Author: https://github.com/awesomekling Commit: https://github.com/SerenityOS/serenity/commit/0ef07383e5
@ -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>
|
@ -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>
|
@ -55,10 +55,11 @@ CSSPixels FlexFormattingContext::get_pixel_height(Box const& box, CSS::Size cons
|
||||
{
|
||||
auto containing_block_height = CSS::Length::make_px(containing_block_height_for(box));
|
||||
if (box.computed_values().box_sizing() == CSS::BoxSizing::BorderBox) {
|
||||
auto containing_block_width = CSS::Length::make_px(containing_block_width_for(box));
|
||||
auto border_top = box.computed_values().border_top().width;
|
||||
auto border_bottom = box.computed_values().border_bottom().width;
|
||||
auto padding_top = box.computed_values().padding().top().resolved(box, containing_block_height).to_px(box);
|
||||
auto padding_bottom = box.computed_values().padding().bottom().resolved(box, containing_block_height).to_px(box);
|
||||
auto padding_top = box.computed_values().padding().top().resolved(box, containing_block_width).to_px(box);
|
||||
auto padding_bottom = box.computed_values().padding().bottom().resolved(box, containing_block_width).to_px(box);
|
||||
return size.resolved(box, containing_block_height).to_px(box) - border_top - border_bottom - padding_top - padding_bottom;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user