mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-09 09:39:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Mark relevant properties as "positional-value-list-shorthands"

Browse source 
Some shorthand properties work differently to normal in that mapping of
provided values to longhands isn't necessarily 1-to-1 and depends on the
number of values provided, for example `margin`, `border-width`, `gap`,
etc.

These properties have distinct behaviors in how they are parsed and
serialized, having them marked allows us to implement theses behaviors
in a generic way.

No functionality changes.
This commit is contained in:
Callum Law 2025-07-10 20:21:45 +12:00 • committed by Sam Atkins
commit 9ed85ddd63
Notes: github-actions[bot] 2025-07-15 13:27:30 +00:00
3 changed files with 72 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

10
Documentation/CSSGeneratedFiles.md
View file

@ -20,7 +20,7 @@ Each property will have some set of these fields on it:
(Note that required fields are not required on properties with `legacy-alias-for` or `logical-alias-for` set.)
| Field | Required | Default | Description | Generated functions |
|----------------------------|----------|---------|-------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|-----------------------------------|----------|---------|-------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `affects-layout` | No | `true` | Boolean. Whether changing this property will invalidate the element's layout. | `bool property_affects_layout(PropertyID)` |
| `affects-stacking-context` | No | `false` | Boolean. Whether this property can cause a new stacking context for the element. | `bool property_affects_stacking_context(PropertyID)` |
| `animation-type` | Yes | | String. How the property should be animated. Defined by the spec. See below. | `AnimationType animation_type_from_longhand_property(PropertyID)` |
@ -31,6 +31,7 @@ Each property will have some set of these fields on it:
| `longhands` | No | `[]` | Array of strings. If this is a shorthand, these are the property names that it expands out into. | `Vector<PropertyID> longhands_for_shorthand(PropertyID)`<br/>`Vector<PropertyID> expanded_longhands_for_shorthand(PropertyID)`<br/>`Vector<PropertyID> shorthands_for_longhand(PropertyID)` |
| `max-values` | No | `1` | Integer. How many values can be parsed for this property. eg, `margin` can have up to 4 values. | `size_t property_maximum_value_count(PropertyID)` |
| `percentages-resolve-to` | No | Nothing | String. What type percentages get resolved to. eg, for `width` percentages are resolved to `length` values. | `Optional<ValueType> property_resolves_percentages_relative_to(PropertyID)` |
| `positional-value-list-shorthand` | No | `false` | Boolean. Whether this property is a "positional value list shorthand". See below. | `bool property_is_positional_value_list_shorthand(PropertyID)` |
| `quirks` | No | `[]` | Array of strings. Some properties have special behavior in "quirks mode", which are listed here. See below. | `bool property_has_quirk(PropertyID, Quirk)` |
| `valid-identifiers` | No | `[]` | Array of strings. Which keywords the property accepts. Consider defining an enum instead and putting its name in the `valid-types` array. | `bool property_accepts_keyword(PropertyID, Keyword)` |
| `valid-types` | No | `[]` | Array of strings. Which value types the property accepts. See below. | `bool property_accepts_type(PropertyID, ValueType)` |
@ -67,6 +68,13 @@ Logical aliases are properties like `margin-block-start`, which may assign a val
| `group` | String. Name of the logical property group this is associated with. (See [LogicalPropertyGroups.json](#logicalpropertygroupsjson).) |
| `mapping` | String. How this relates to the group. eg, if it's the block end value, `block-end`. |
### `positional-value-list-shorthand`
Some shorthand properties work differently to normal in that mapping of provided values to longhands isn't necessarily
1-to-1 and instead depends on the number of values provided, for example `margin`, `border-width`, `gap`, etc.
These properties have distinct behaviors in how they are parsed and serialized, having them marked allows us to
implement this behavior in a generic way.
### `quirks`
The [Quirks spec](https://quirks.spec.whatwg.org/#css) defines these.

20
Libraries/LibWeb/CSS/Properties.json
View file

@ -509,6 +509,7 @@
"border-block-color": {
"inherited": false,
"initial": "currentcolor",
"positional-value-list-shorthand": true,
"longhands": [
"border-block-start-color",
"border-block-end-color"
@ -581,6 +582,7 @@
"border-block-style": {
"inherited": false,
"initial": "none",
"positional-value-list-shorthand": true,
"longhands": [
"border-block-start-style",
"border-block-end-style"
@ -593,6 +595,7 @@
"border-block-width": {
"inherited": false,
"initial": "medium",
"positional-value-list-shorthand": true,
"longhands": [
"border-block-start-width",
"border-block-end-width"
@ -679,6 +682,7 @@
"border-color": {
"affects-layout": false,
"initial": "currentcolor",
"positional-value-list-shorthand": true,
"longhands": [
"border-top-color",
"border-right-color",
@ -791,6 +795,7 @@
"border-inline-color": {
"inherited": false,
"initial": "currentcolor",
"positional-value-list-shorthand": true,
"longhands": [
"border-inline-start-color",
"border-inline-end-color"
@ -863,6 +868,7 @@
"border-inline-style": {
"inherited": false,
"initial": "none",
"positional-value-list-shorthand": true,
"longhands": [
"border-inline-start-style",
"border-inline-end-style"
@ -875,6 +881,7 @@
"border-inline-width": {
"inherited": false,
"initial": "medium",
"positional-value-list-shorthand": true,
"longhands": [
"border-inline-start-width",
"border-inline-end-width"
@ -1011,6 +1018,7 @@
},
"border-style": {
"initial": "none",
"positional-value-list-shorthand": true,
"longhands": [
"border-top-style",
"border-right-style",
@ -1089,6 +1097,7 @@
},
"border-width": {
"initial": "medium",
"positional-value-list-shorthand": true,
"longhands": [
"border-top-width",
"border-right-width",
@ -1767,6 +1776,7 @@
"normal"
],
"percentages-resolve-to": "length",
"positional-value-list-shorthand": true,
"longhands": [
"row-gap",
"column-gap"
@ -2018,6 +2028,7 @@
"inset": {
"inherited": false,
"initial": "auto",
"positional-value-list-shorthand": true,
"longhands": [
"top",
"right",
@ -2036,6 +2047,7 @@
},
"inset-block": {
"initial": "auto",
"positional-value-list-shorthand": true,
"longhands": [
"inset-block-start",
"inset-block-end"
@ -2066,6 +2078,7 @@
},
"inset-inline": {
"initial": "auto",
"positional-value-list-shorthand": true,
"longhands": [
"inset-inline-start",
"inset-inline-end"
@ -2212,6 +2225,7 @@
"margin": {
"inherited": false,
"initial": "0",
"positional-value-list-shorthand": true,
"longhands": [
"margin-top",
"margin-right",
@ -2233,6 +2247,7 @@
},
"margin-block": {
"initial": "0",
"positional-value-list-shorthand": true,
"longhands": [
"margin-block-start",
"margin-block-end"
@ -2277,6 +2292,7 @@
},
"margin-inline": {
"initial": "0",
"positional-value-list-shorthand": true,
"longhands": [
"margin-inline-start",
"margin-inline-end"
@ -2613,6 +2629,7 @@
"overflow-x",
"overflow-y"
],
"positional-value-list-shorthand": true,
"inherited": false,
"initial": "visible",
"max-values": 2,
@ -2639,6 +2656,7 @@
"padding": {
"inherited": false,
"initial": "0",
"positional-value-list-shorthand": true,
"longhands": [
"padding-top",
"padding-right",
@ -2657,6 +2675,7 @@
},
"padding-block": {
"initial": "0",
"positional-value-list-shorthand": true,
"longhands": [
"padding-block-start",
"padding-block-end"
@ -2695,6 +2714,7 @@
},
"padding-inline": {
"initial": "0",
"positional-value-list-shorthand": true,
"longhands": [
"padding-inline-start",
"padding-inline-end"

28
Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSPropertyID.cpp
View file

@ -323,6 +323,7 @@ Vector<PropertyID> const& longhands_for_shorthand(PropertyID);
Vector<PropertyID> const& expanded_longhands_for_shorthand(PropertyID);
bool property_maps_to_shorthand(PropertyID);
Vector<PropertyID> const& shorthands_for_longhand(PropertyID);
bool property_is_positional_value_list_shorthand(PropertyID);
size_t property_maximum_value_count(PropertyID);
@ -1335,6 +1336,33 @@ Vector<PropertyID> const& shorthands_for_longhand(PropertyID property_id)
}
}
}
)~~~");
generator.append(R"~~~(
bool property_is_positional_value_list_shorthand(PropertyID property_id)
{
switch (property_id)
{
)~~~");
properties.for_each_member([&](auto& name, auto& value) {
if (is_legacy_alias(value.as_object()))
return;
if (value.as_object().has("positional-value-list-shorthand"sv)) {
auto property_generator = generator.fork();
property_generator.set("name:titlecase", title_casify(name));
property_generator.append(R"~~~(
case PropertyID::@name:titlecase@:
)~~~");
}
});
generator.append(R"~~~(
return true;
default:
return false;
}
}
)~~~");
generator.append(R"~~~(