We use cookies to ensure you get the best experience on our website
Home Explore Help
Register Sign In
0ct0pu5
/
ladybird
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

LibWeb: Fix overeager fallback to stretch-fit width for some flex items

If a flex item has a preferred aspect ratio and the flex basis is not
definite, we were falling back to using stretch-fit for the main size,
since that appeared to match other browsers.

However, we missed the case where we actually have a definite cross size
through which the preferred aspect ratio can be naturally resolved.
Andreas Kling 1 year ago
parent
9c02ace897
commit
db1faef786
3 changed files with 36 additions and 3 deletions
Split View Show Diff Stats
  1. 14 0
      Tests/LibWeb/Layout/expected/flex/no-stretch-fit-width-for-item-that-can-resolve-aspect-ratio-through-height.txt
  2. 19 0
      Tests/LibWeb/Layout/input/flex/no-stretch-fit-width-for-item-that-can-resolve-aspect-ratio-through-height.html
  3. 3 3
      Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp

+ 14 - 0
Tests/LibWeb/Layout/expected/flex/no-stretch-fit-width-for-item-that-can-resolve-aspect-ratio-through-height.txt
View File 

@@ -0,0 +1,14 @@
 
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
+  BlockContainer <html> at (0,0) content-size 800x36 [BFC] children: not-inline
 
+    Box <body> at (8,8) content-size 200x20 flex-container(row) [FFC] children: not-inline
 
+      SVGSVGBox <svg> at (8,8) content-size 20x20 flex-item [SVG] children: not-inline
 
+        SVGGeometryBox <rect> at (8,8) content-size 10x10 children: not-inline
 
+      BlockContainer <div> at (28,8) content-size 100x20 flex-item [BFC] children: inline
 
+        TextNode <#text>
 
+
 
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
 
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x36]
 
+    PaintableBox (Box<BODY>) [8,8 200x20]
 
+      SVGSVGPaintable (SVGSVGBox<svg>) [8,8 20x20]
 
+        SVGPathPaintable (SVGGeometryBox<rect>) [8,8 10x10]
 
+      PaintableWithLines (BlockContainer<DIV>) [28,8 100x20]

+ 19 - 0
Tests/LibWeb/Layout/input/flex/no-stretch-fit-width-for-item-that-can-resolve-aspect-ratio-through-height.html
View File 

@@ -0,0 +1,19 @@
 
+<!doctype html><style type="text/css">
 
+    * { outline: 1px solid black; }
 
+    html {
 
+        background: white;
 
+    }
 
+    body {
 
+        display: flex;
 
+        background: orange;
 
+        width: 200px;
 
+    }
 
+    svg {
 
+        background: cyan;
 
+        height: 20px;
 
+    }
 
+    div {
 
+        background: magenta;
 
+        width: 100px;
 
+    }
 
+</style><body><svg viewBox="0 0 24 24"><rect x=0 y=0 width=12 height=12></svg><div>

+ 3 - 3
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
View File 

@@ -639,10 +639,10 @@ void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size(
 
 
     // AD-HOC: This is not mentioned in the spec, but if the item has an aspect ratio,
 
     //         we may need to adjust the main size in these ways:
 
-    //         - using stretch-fit main size if the flex basis is indefinite.
 
+    //         - using stretch-fit main size if the flex basis is indefinite and there is no cross size to resolve the ratio against.
 
     //         - in response to cross size min/max constraints.
 
-    if (item.box->has_preferred_aspect_ratio()) {
 
-        if (!item.used_flex_basis_is_definite) {
 
+    if (item.box->has_natural_aspect_ratio()) {
 
+        if (!item.used_flex_basis_is_definite && !has_definite_cross_size(item)) {
 
             item.flex_base_size = inner_main_size(m_flex_container_state);
 
         }
 
         item.flex_base_size = adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(child_box, item.flex_base_size, computed_cross_min_size(child_box), computed_cross_max_size(child_box));

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5