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: Support `min-content` for `width`, `min-width` and `max-width`

We're gonna need to handle this in many more places, this patch only
adds it to calculate_inner_width().
Andreas Kling 2 years ago
parent
97c510329c
commit
af004ff0ef
4 changed files with 62 additions and 1 deletions
Split View Show Diff Stats
  1. 33 0
      Tests/LibWeb/Layout/expected/block-and-inline/block-with-min-content-width.txt
  2. 22 0
      Tests/LibWeb/Layout/input/block-and-inline/block-with-min-content-width.html
  3. 4 1
      Userland/Libraries/LibWeb/CSS/Properties.json
  4. 3 0
      Userland/Libraries/LibWeb/Layout/FormattingContext.cpp

+ 33 - 0
Tests/LibWeb/Layout/expected/block-and-inline/block-with-min-content-width.txt
View File 

@@ -0,0 +1,33 @@
 
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
+  BlockContainer <html> at (1,1) content-size 798x130.21875 [BFC] children: not-inline
 
+    BlockContainer <body> at (10,10) content-size 780x112.21875 children: not-inline
 
+      BlockContainer <div.foo> at (11,11) content-size 93.765625x35.40625 children: inline
 
+        line 0 width: 43.578125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+          frag 0 from TextNode start: 0, length: 6, rect: [11,11 43.578125x17.46875]
 
+            "width:"
 
+        line 1 width: 93.765625, height: 17.9375, bottom: 35.40625, baseline: 13.53125
 
+          frag 0 from TextNode start: 7, length: 11, rect: [11,28 93.765625x17.46875]
 
+            "min-content"
 
+        TextNode <#text>
 
+      BlockContainer <(anonymous)> at (10,47.40625) content-size 780x0 children: inline
 
+        TextNode <#text>
 
+      BlockContainer <div.bar> at (11,48.40625) content-size 93.765625x35.40625 children: inline
 
+        line 0 width: 81.3125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+          frag 0 from TextNode start: 0, length: 10, rect: [11,48.40625 81.3125x17.46875]
 
+            "max-width:"
 
+        line 1 width: 93.765625, height: 17.9375, bottom: 35.40625, baseline: 13.53125
 
+          frag 0 from TextNode start: 11, length: 11, rect: [11,65.40625 93.765625x17.46875]
 
+            "min-content"
 
+        TextNode <#text>
 
+      BlockContainer <(anonymous)> at (10,84.8125) content-size 780x0 children: inline
 
+        TextNode <#text>
 
+      BlockContainer <div.baz> at (11,85.8125) content-size 93.765625x35.40625 children: inline
 
+        line 0 width: 76.4375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+          frag 0 from TextNode start: 0, length: 10, rect: [11,85.8125 76.4375x17.46875]
 
+            "min-width:"
 
+        line 1 width: 93.765625, height: 17.9375, bottom: 35.40625, baseline: 13.53125
 
+          frag 0 from TextNode start: 11, length: 11, rect: [11,102.8125 93.765625x17.46875]
 
+            "min-content"
 
+        TextNode <#text>
 
+      BlockContainer <(anonymous)> at (10,122.21875) content-size 780x0 children: inline
 
+        TextNode <#text>

+ 22 - 0
Tests/LibWeb/Layout/input/block-and-inline/block-with-min-content-width.html
View File 

@@ -0,0 +1,22 @@
 
+<!doctype html><style>
 
+* {
 
+    border: 1px solid black;
 
+}
 
+.foo {
 
+    background: pink;
 
+    width: min-content;
 
+}
 
+.bar {
 
+    background: orange;
 
+    width: 50%;
 
+    max-width: min-content;
 
+}
 
+.baz {
 
+    background: magenta;
 
+    width: 1%;
 
+    min-width: min-content;
 
+}
 
+</style>
 
+<div class="foo">width: min-content</div>
 
+<div class="bar">max-width: min-content</div>
 
+<div class="baz">min-width: min-content</div>

+ 4 - 1
Userland/Libraries/LibWeb/CSS/Properties.json
View File 

@@ -1339,6 +1339,7 @@
 
     "valid-identifiers": [
 
       "fit-content",
 
       "max-content",
 
+      "min-content",
 
       "none"
 
     ],
 
     "quirks": [
 
@@ -1376,6 +1377,7 @@
 
       "auto",
 
       "fit-content",
 
       "max-content",
 
+      "min-content",
 
       "none"
 
     ],
 
     "quirks": [
 
@@ -1776,7 +1778,8 @@
 
     "valid-identifiers": [
 
       "auto",
 
       "fit-content",
 
-      "max-content"
 
+      "max-content",
 
+      "min-content"
 
     ],
 
     "quirks": [
 
       "unitless-length"

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

@@ -1352,6 +1352,9 @@ CSS::Length FormattingContext::calculate_inner_width(Layout::Box const& box, Ava
 
     if (width.is_max_content()) {
 
         return CSS::Length::make_px(calculate_max_content_width(box));
 
     }
 
+    if (width.is_min_content()) {
 
+        return CSS::Length::make_px(calculate_min_content_width(box));
 
+    }
 
 
     auto& computed_values = box.computed_values();
 
     if (computed_values.box_sizing() == CSS::BoxSizing::BorderBox) {

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