LibWeb/CSS: Implement the ({min,max}-)block-size properties

These are heavily used by morrisons.com, using them in place of the
usual properties these map to.
This commit is contained in:
Luke Wilde 2025-01-29 14:17:52 +00:00 committed by Andreas Kling
commit 010cdd8f90
Notes: github-actions[bot] 2025-01-31 13:19:26 +00:00
7 changed files with 260 additions and 133 deletions

View file

@ -448,6 +448,14 @@
],
"percentages-resolve-to": "length"
},
"block-size": {
"logical-alias-for": [
"height",
"width"
],
"initial": "auto",
"max-values": 1
},
"border": {
"inherited": false,
"initial": "medium currentcolor none",
@ -2002,6 +2010,13 @@
"math-style"
]
},
"max-block-size": {
"logical-alias-for": [
"max-height",
"max-width"
],
"initial": "none"
},
"max-height": {
"animation-type": "by-computed-value",
"inherited": false,
@ -2047,6 +2062,13 @@
"unitless-length"
]
},
"min-block-size": {
"logical-alias-for": [
"min-height",
"min-width"
],
"initial": "0"
},
"min-height": {
"animation-type": "by-computed-value",
"inherited": false,

View file

@ -629,6 +629,8 @@ void StyleComputer::for_each_property_expanding_shorthands(PropertyID property_i
auto map_logical_property_to_real_property = [](PropertyID property_id) -> Optional<PropertyID> {
// FIXME: Honor writing-mode, direction and text-orientation.
switch (property_id) {
case PropertyID::BlockSize:
return PropertyID::Height;
case PropertyID::MarginBlockStart:
return PropertyID::MarginTop;
case PropertyID::MarginBlockEnd:
@ -892,6 +894,26 @@ void StyleComputer::for_each_property_expanding_shorthands(PropertyID property_i
return;
}
if (property_id == CSS::PropertyID::MaxBlockSize || property_id == CSS::PropertyID::MinBlockSize) {
// FIXME: Use writing-mode to determine if we should set width or height.
bool is_horizontal = true;
if (is_horizontal) {
if (property_id == CSS::PropertyID::MaxBlockSize) {
set_longhand_property(CSS::PropertyID::MaxHeight, value);
} else {
set_longhand_property(CSS::PropertyID::MinHeight, value);
}
} else {
if (property_id == CSS::PropertyID::MaxBlockSize) {
set_longhand_property(CSS::PropertyID::MaxWidth, value);
} else {
set_longhand_property(CSS::PropertyID::MinWidth, value);
}
}
return;
}
if (property_id == CSS::PropertyID::Transition) {
if (!value.is_transition()) {
// Handle `none` as a shorthand for `all 0s ease 0s`.