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:
parent
97c510329c
commit
af004ff0ef
Notes:
sideshowbarker
2024-07-16 23:05:02 +09:00
Author: https://github.com/awesomekling Commit: https://github.com/SerenityOS/serenity/commit/af004ff0ef Pull-request: https://github.com/SerenityOS/serenity/pull/19131
4 changed files with 62 additions and 1 deletions
|
@ -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>
|
|
@ -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>
|
|
@ -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"
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Add table
Reference in a new issue