2 年之前 · 0ef07383e5
--- 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
@@ -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>
			
--- 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
@@ -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>
			
--- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
@@ -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;
			
 
				     }