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().
This commit is contained in:
Andreas Kling 2023-05-28 18:24:55 +02:00
parent 97c510329c
commit af004ff0ef
Notes: sideshowbarker 2024-07-16 23:05:02 +09:00
4 changed files with 62 additions and 1 deletions

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>

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>

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"

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) {