Quellcode durchsuchen

LibWeb: Fix inline-block percentage height calculation

If an inline-block has a percentage height that relies on the auto
height of the containing block, it should always resolve to the
automatic height of the box, regardless of the percentage value. This
change may seem confusing, but it aligns with the behavior of other
engines.
Aliaksandr Kalenik vor 2 Jahren
Ursprung
Commit
07f451044b

+ 11 - 0
Tests/LibWeb/Layout/expected/block-and-inline/inline-block-with-percentage-height-and-auto-height-of-containing-block.txt

@@ -0,0 +1,11 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x33.46875 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
+      BlockContainer <div.pure-menu-list> at (8,8) content-size 784x17.46875 children: inline
+        line 0 width: 36.453125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+          frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 36.453125x17.46875]
+        BlockContainer <div.pure-menu-item> at (8,8) content-size 36.453125x17.46875 inline-block [BFC] children: inline
+          line 0 width: 36.453125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 4, rect: [8,8 36.453125x17.46875]
+              "docs"
+          TextNode <#text>

+ 12 - 0
Tests/LibWeb/Layout/input/block-and-inline/inline-block-with-percentage-height-and-auto-height-of-containing-block.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<style>
+    .pure-menu-list {
+        background-color: blueviolet;
+    }
+    .pure-menu-item {
+        display: inline-block;
+        background-color: chartreuse;
+        height: 5%;
+    }
+</style>
+<div class="pure-menu-list"><div class="pure-menu-item">docs</div></div>

+ 1 - 1
Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp

@@ -165,7 +165,7 @@ void InlineFormattingContext::dimension_box_on_line(Box const& box, LayoutMode l
     auto independent_formatting_context = layout_inside(box, layout_mode, box_state.available_inner_space_or_constraints_from(*m_available_space));
 
     auto const& height_value = box.computed_values().height();
-    if (height_value.is_auto()) {
+    if (should_treat_height_as_auto(box, *m_available_space)) {
         // FIXME: (10.6.6) If 'height' is 'auto', the height depends on the element's descendants per 10.6.7.
         parent().compute_height(box, AvailableSpace(AvailableSize::make_indefinite(), AvailableSize::make_indefinite()));
     } else {