LibWeb: Fix broken handling of flex: <flex-grow> shorthand

This is a tiny bit messy because:

- The spec says we should expand this to `flex: <flex-grow> 1 0`
- All major engines expand it to `flex: <flex-grow> 1 0%`

Spec bug: https://github.com/w3c/csswg-drafts/issues/5742
This commit is contained in:
Andreas Kling 2023-04-19 10:08:11 +02:00
parent d10e838efd
commit 8c03d21e95
Notes: sideshowbarker 2024-07-17 01:46:00 +09:00
2 changed files with 28 additions and 14 deletions

View File

@ -4,23 +4,23 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
Box <div.container> at (9,9) content-size 500x102 flex-container(row) children: not-inline
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <div.box> at (10,10) content-size 132.333343x100 flex-item children: inline
BlockContainer <div.box> at (10,10) content-size 82.333335x100 flex-item children: inline
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
"1"
TextNode <#text>
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <div.box> at (144.333343,10) content-size 164.666671x100 flex-item children: inline
BlockContainer <div.box> at (94.333335,10) content-size 164.666671x100 flex-item children: inline
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [144.333343,10 8.8125x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [94.333335,10 8.8125x17.46875]
"2"
TextNode <#text>
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline
TextNode <#text>
BlockContainer <div.box> at (311,10) content-size 197x100 flex-item children: inline
BlockContainer <div.box> at (261,10) content-size 247x100 flex-item children: inline
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [311,10 9.09375x17.46875]
frag 0 from TextNode start: 0, length: 1, rect: [261,10 9.09375x17.46875]
"3"
TextNode <#text>
BlockContainer <(anonymous)> at (9,9) content-size 0x0 children: inline

View File

@ -5121,22 +5121,36 @@ RefPtr<StyleValue> Parser::parse_filter_value_list_value(Vector<ComponentValue>
RefPtr<StyleValue> Parser::parse_flex_value(Vector<ComponentValue> const& component_values)
{
if (component_values.size() == 1) {
// One-value syntax: <flex-grow> | <flex-basis> | none
auto value = parse_css_value(component_values[0]);
if (!value)
return nullptr;
switch (value->to_identifier()) {
case ValueID::Auto: {
if (value->is_identifier() && property_accepts_value(PropertyID::Flex, *value)) {
switch (value->to_identifier()) {
case ValueID::None: {
auto zero = NumericStyleValue::create_integer(0);
return FlexStyleValue::create(zero, zero, IdentifierStyleValue::create(ValueID::Auto));
}
default:
return value;
}
}
if (property_accepts_value(PropertyID::FlexGrow, *value)) {
// NOTE: The spec says that flex-basis should be 0 here, but other engines currently use 0%.
// https://github.com/w3c/csswg-drafts/issues/5742
auto zero_percent = NumericStyleValue::create_integer(0);
auto one = NumericStyleValue::create_integer(1);
return FlexStyleValue::create(one, one, IdentifierStyleValue::create(ValueID::Auto));
return FlexStyleValue::create(*value, one, zero_percent);
}
case ValueID::None: {
auto zero = NumericStyleValue::create_integer(0);
return FlexStyleValue::create(zero, zero, IdentifierStyleValue::create(ValueID::Auto));
}
default:
break;
if (property_accepts_value(PropertyID::FlexBasis, *value)) {
auto one = NumericStyleValue::create_integer(1);
return FlexStyleValue::create(one, one, *value);
}
return nullptr;
}
RefPtr<StyleValue> flex_grow;