mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-09-21 00:38:56 +00:00
LibWeb: Require layout update for less properties in getComputedStyle()
Some properties like `justify-items`, `grid`, or `display` do affect layout, but their used values can be obtained without performing a layout calculation. This change introduces a new helper, `property_needs_layout_for_getcomputedstyle()`, specifically for use by `CSSStyleProperties::property()`. It returns true only for properties such as `width`, `height`, `margin`, `padding`, `top`, and `left`, where an up-to-date layout is required to return the correct used value.
This commit is contained in:
Aliaksandr Kalenik
Andreas Kling
parent
815e77c04d
commit
db5fd614ac
Notes:
github-actions[bot]
2025-09-12 09:07:24 +00:00
Author: https://github.com/kalenikaliaksandr
Commit: db5fd614ac
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6158
Reviewed-by: https://github.com/AtkinsSJ
Reviewed-by: https://github.com/Zaggy1024
4 changed files with 135 additions and 54 deletions
|
|
@ -35,6 +35,7 @@ Each property will have some set of these fields on it:
|
|||
| `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. See below. | `bool property_accepts_keyword(PropertyID, Keyword)`<br/>`Optional<Keyword> resolve_legacy_value_alias(PropertyID, Keyword)` |
|
||||
| `valid-types` | No | `[]` | Array of strings. Which value types the property accepts. See below. | `bool property_accepts_type(PropertyID, ValueType)` |
|
||||
| `needs-layout-for-getcomputedstyle` | No | `false` | Boolean. Whether this property requires up-to-date layout before it could be queried by getComputedStyle() | `bool property_needs_layout_for_getcomputedstyle(PropertyID)` |
|
||||
|
||||
### `animation-type`
|
||||
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@ Optional<StyleProperty> CSSStyleProperties::property(PropertyID property_id) con
|
|||
// FIXME: Be smarter about updating layout if there's no layout node.
|
||||
// We may legitimately have no layout node if we're not visible, but this protects against situations
|
||||
// where we're requesting the computed style before layout has happened.
|
||||
if (!layout_node || property_affects_layout(property_id)) {
|
||||
if (!layout_node || property_needs_layout_for_getcomputedstyle(property_id)) {
|
||||
abstract_element.document().update_layout(DOM::UpdateLayoutReason::ResolvedCSSStyleDeclarationProperty);
|
||||
layout_node = abstract_element.layout_node();
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -489,7 +489,8 @@
|
|||
"mapping": "block-size"
|
||||
},
|
||||
"initial": "auto",
|
||||
"max-values": 1
|
||||
"max-values": 1,
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"border": {
|
||||
"inherited": false,
|
||||
|
|
@ -498,7 +499,8 @@
|
|||
"border-width",
|
||||
"border-style",
|
||||
"border-color"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"border-block": {
|
||||
"inherited": false,
|
||||
|
|
@ -507,7 +509,8 @@
|
|||
"border-block-width",
|
||||
"border-block-style",
|
||||
"border-block-color"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"border-block-color": {
|
||||
"inherited": false,
|
||||
|
|
@ -528,7 +531,8 @@
|
|||
"border-block-end-width",
|
||||
"border-block-end-style",
|
||||
"border-block-end-color"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"border-block-end-color": {
|
||||
"logical-alias-for": {
|
||||
|
|
@ -549,7 +553,8 @@
|
|||
"group": "border-width",
|
||||
"mapping": "block-end"
|
||||
},
|
||||
"max-values": 1
|
||||
"max-values": 1,
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"border-block-start": {
|
||||
"inherited": false,
|
||||
|
|
@ -558,7 +563,8 @@
|
|||
"border-block-start-width",
|
||||
"border-block-start-style",
|
||||
"border-block-start-color"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"border-block-start-color": {
|
||||
"logical-alias-for": {
|
||||
|
|
@ -579,7 +585,8 @@
|
|||
"group": "border-width",
|
||||
"mapping": "block-start"
|
||||
},
|
||||
"max-values": 1
|
||||
"max-values": 1,
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"border-block-style": {
|
||||
"inherited": false,
|
||||
|
|
@ -604,7 +611,8 @@
|
|||
"valid-types": [
|
||||
"length [0,∞]",
|
||||
"line-width"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"border-bottom": {
|
||||
"inherited": false,
|
||||
|
|
@ -613,7 +621,8 @@
|
|||
"border-bottom-width",
|
||||
"border-bottom-style",
|
||||
"border-bottom-color"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"border-bottom-color": {
|
||||
"affects-layout": false,
|
||||
|
|
@ -669,7 +678,8 @@
|
|||
],
|
||||
"quirks": [
|
||||
"unitless-length"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"border-collapse": {
|
||||
"animation-type": "discrete",
|
||||
|
|
@ -753,7 +763,8 @@
|
|||
"valid-types": [
|
||||
"number [0,∞]",
|
||||
"percentage [0,∞]"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"border-image-source": {
|
||||
"affects-layout": false,
|
||||
|
|
@ -781,7 +792,8 @@
|
|||
"valid-identifiers": [
|
||||
"auto"
|
||||
],
|
||||
"percentages-resolve-to": "length"
|
||||
"percentages-resolve-to": "length",
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"border-inline": {
|
||||
"inherited": false,
|
||||
|
|
@ -790,7 +802,8 @@
|
|||
"border-inline-width",
|
||||
"border-inline-style",
|
||||
"border-inline-color"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"border-inline-color": {
|
||||
"inherited": false,
|
||||
|
|
@ -811,7 +824,8 @@
|
|||
"border-inline-end-width",
|
||||
"border-inline-end-style",
|
||||
"border-inline-end-color"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"border-inline-end-color": {
|
||||
"logical-alias-for": {
|
||||
|
|
@ -1124,7 +1138,8 @@
|
|||
"percentages-resolve-to": "length",
|
||||
"quirks": [
|
||||
"unitless-length"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"box-shadow": {
|
||||
"affects-layout": false,
|
||||
|
|
@ -1966,7 +1981,8 @@
|
|||
"grid-template-areas",
|
||||
"grid-template-rows",
|
||||
"grid-template-columns"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"grid-template-areas": {
|
||||
"animation-type": "discrete",
|
||||
|
|
@ -1992,7 +2008,8 @@
|
|||
"percentage",
|
||||
"string"
|
||||
],
|
||||
"percentages-resolve-to": "length"
|
||||
"percentages-resolve-to": "length",
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"grid-template-rows": {
|
||||
"animation-type": "custom",
|
||||
|
|
@ -2007,7 +2024,8 @@
|
|||
"percentage",
|
||||
"string"
|
||||
],
|
||||
"percentages-resolve-to": "length"
|
||||
"percentages-resolve-to": "length",
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"height": {
|
||||
"animation-type": "by-computed-value",
|
||||
|
|
@ -2026,7 +2044,8 @@
|
|||
"percentages-resolve-to": "length",
|
||||
"quirks": [
|
||||
"unitless-length"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"image-rendering": {
|
||||
"animation-type": "discrete",
|
||||
|
|
@ -2043,7 +2062,8 @@
|
|||
"mapping": "inline-size"
|
||||
},
|
||||
"initial": "auto",
|
||||
"max-values": 1
|
||||
"max-values": 1,
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"inset": {
|
||||
"inherited": false,
|
||||
|
|
@ -2062,7 +2082,8 @@
|
|||
"valid-identifiers": [
|
||||
"auto"
|
||||
],
|
||||
"percentages-resolve-to": "length"
|
||||
"percentages-resolve-to": "length",
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"inset-block": {
|
||||
"initial": "auto",
|
||||
|
|
@ -2078,21 +2099,24 @@
|
|||
"valid-identifiers": [
|
||||
"auto"
|
||||
],
|
||||
"percentages-resolve-to": "length"
|
||||
"percentages-resolve-to": "length",
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"inset-block-end": {
|
||||
"logical-alias-for": {
|
||||
"group": "inset",
|
||||
"mapping": "block-end"
|
||||
},
|
||||
"max-values": 1
|
||||
"max-values": 1,
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"inset-block-start": {
|
||||
"logical-alias-for": {
|
||||
"group": "inset",
|
||||
"mapping": "block-start"
|
||||
},
|
||||
"max-values": 1
|
||||
"max-values": 1,
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"inset-inline": {
|
||||
"initial": "auto",
|
||||
|
|
@ -2108,21 +2132,24 @@
|
|||
"valid-identifiers": [
|
||||
"auto"
|
||||
],
|
||||
"percentages-resolve-to": "length"
|
||||
"percentages-resolve-to": "length",
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"inset-inline-end": {
|
||||
"logical-alias-for": {
|
||||
"group": "inset",
|
||||
"mapping": "inline-end"
|
||||
},
|
||||
"max-values": 1
|
||||
"max-values": 1,
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"inset-inline-start": {
|
||||
"logical-alias-for": {
|
||||
"group": "inset",
|
||||
"mapping": "inline-start"
|
||||
},
|
||||
"max-values": 1
|
||||
"max-values": 1,
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"isolation": {
|
||||
"animation-type": "discrete",
|
||||
|
|
@ -2171,7 +2198,8 @@
|
|||
"percentages-resolve-to": "length",
|
||||
"quirks": [
|
||||
"unitless-length"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"letter-spacing": {
|
||||
"animation-type": "by-computed-value",
|
||||
|
|
@ -2201,7 +2229,8 @@
|
|||
"valid-identifiers": [
|
||||
"normal"
|
||||
],
|
||||
"percentages-resolve-to": "length"
|
||||
"percentages-resolve-to": "length",
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"list-style": {
|
||||
"inherited": true,
|
||||
|
|
@ -2260,7 +2289,8 @@
|
|||
"percentages-resolve-to": "length",
|
||||
"quirks": [
|
||||
"unitless-length"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"margin-block": {
|
||||
"initial": "0",
|
||||
|
|
@ -2276,19 +2306,22 @@
|
|||
"valid-identifiers": [
|
||||
"auto"
|
||||
],
|
||||
"percentages-resolve-to": "length"
|
||||
"percentages-resolve-to": "length",
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"margin-block-end": {
|
||||
"logical-alias-for": {
|
||||
"group": "margin",
|
||||
"mapping": "block-end"
|
||||
}
|
||||
},
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"margin-block-start": {
|
||||
"logical-alias-for": {
|
||||
"group": "margin",
|
||||
"mapping": "block-start"
|
||||
}
|
||||
},
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"margin-bottom": {
|
||||
"animation-type": "by-computed-value",
|
||||
|
|
@ -2304,7 +2337,8 @@
|
|||
"percentages-resolve-to": "length",
|
||||
"quirks": [
|
||||
"unitless-length"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"margin-inline": {
|
||||
"initial": "0",
|
||||
|
|
@ -2320,19 +2354,22 @@
|
|||
"valid-identifiers": [
|
||||
"auto"
|
||||
],
|
||||
"percentages-resolve-to": "length"
|
||||
"percentages-resolve-to": "length",
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"margin-inline-end": {
|
||||
"logical-alias-for": {
|
||||
"group": "margin",
|
||||
"mapping": "inline-end"
|
||||
}
|
||||
},
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"margin-inline-start": {
|
||||
"logical-alias-for": {
|
||||
"group": "margin",
|
||||
"mapping": "inline-start"
|
||||
}
|
||||
},
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"margin-left": {
|
||||
"animation-type": "by-computed-value",
|
||||
|
|
@ -2348,7 +2385,8 @@
|
|||
"percentages-resolve-to": "length",
|
||||
"quirks": [
|
||||
"unitless-length"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"margin-right": {
|
||||
"animation-type": "by-computed-value",
|
||||
|
|
@ -2364,7 +2402,8 @@
|
|||
"percentages-resolve-to": "length",
|
||||
"quirks": [
|
||||
"unitless-length"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"margin-top": {
|
||||
"animation-type": "by-computed-value",
|
||||
|
|
@ -2380,7 +2419,8 @@
|
|||
"percentages-resolve-to": "length",
|
||||
"quirks": [
|
||||
"unitless-length"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"mask": {
|
||||
"__comment": "FIXME: reset mask-border",
|
||||
|
|
@ -2778,7 +2818,8 @@
|
|||
"percentages-resolve-to": "length",
|
||||
"quirks": [
|
||||
"unitless-length"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"padding-block": {
|
||||
"initial": "0",
|
||||
|
|
@ -2791,19 +2832,22 @@
|
|||
"length [0,∞]",
|
||||
"percentage [0,∞]"
|
||||
],
|
||||
"percentages-resolve-to": "length"
|
||||
"percentages-resolve-to": "length",
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"padding-block-end": {
|
||||
"logical-alias-for": {
|
||||
"group": "padding",
|
||||
"mapping": "block-end"
|
||||
}
|
||||
},
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"padding-block-start": {
|
||||
"logical-alias-for": {
|
||||
"group": "padding",
|
||||
"mapping": "block-start"
|
||||
}
|
||||
},
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"padding-bottom": {
|
||||
"animation-type": "by-computed-value",
|
||||
|
|
@ -2816,7 +2860,8 @@
|
|||
"percentages-resolve-to": "length",
|
||||
"quirks": [
|
||||
"unitless-length"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"padding-inline": {
|
||||
"initial": "0",
|
||||
|
|
@ -2829,7 +2874,8 @@
|
|||
"length [0,∞]",
|
||||
"percentage [0,∞]"
|
||||
],
|
||||
"percentages-resolve-to": "length"
|
||||
"percentages-resolve-to": "length",
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"padding-inline-end": {
|
||||
"logical-alias-for": {
|
||||
|
|
@ -2841,7 +2887,8 @@
|
|||
"logical-alias-for": {
|
||||
"group": "padding",
|
||||
"mapping": "inline-start"
|
||||
}
|
||||
},
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"padding-left": {
|
||||
"animation-type": "by-computed-value",
|
||||
|
|
@ -2854,7 +2901,8 @@
|
|||
"percentages-resolve-to": "length",
|
||||
"quirks": [
|
||||
"unitless-length"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"padding-right": {
|
||||
"animation-type": "by-computed-value",
|
||||
|
|
@ -2867,7 +2915,8 @@
|
|||
"percentages-resolve-to": "length",
|
||||
"quirks": [
|
||||
"unitless-length"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"padding-top": {
|
||||
"animation-type": "by-computed-value",
|
||||
|
|
@ -2880,7 +2929,8 @@
|
|||
"percentages-resolve-to": "length",
|
||||
"quirks": [
|
||||
"unitless-length"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"paint-order": {
|
||||
"animation-type": "discrete",
|
||||
|
|
@ -2975,7 +3025,8 @@
|
|||
"percentages-resolve-to": "length",
|
||||
"quirks": [
|
||||
"unitless-length"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"rotate": {
|
||||
"animation-type": "custom",
|
||||
|
|
@ -3370,7 +3421,8 @@
|
|||
"percentages-resolve-to": "length",
|
||||
"quirks": [
|
||||
"unitless-length"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"touch-action": {
|
||||
"animation-type": "discrete",
|
||||
|
|
@ -3590,7 +3642,8 @@
|
|||
"percentages-resolve-to": "length",
|
||||
"quirks": [
|
||||
"unitless-length"
|
||||
]
|
||||
],
|
||||
"needs-layout-for-getcomputedstyle": true
|
||||
},
|
||||
"will-change": {
|
||||
"affects-layout": false,
|
||||
|
|
|
|||
|
|
@ -291,6 +291,7 @@ size_t property_maximum_value_count(PropertyID);
|
|||
|
||||
bool property_affects_layout(PropertyID);
|
||||
bool property_affects_stacking_context(PropertyID);
|
||||
bool property_needs_layout_for_getcomputedstyle(PropertyID);
|
||||
|
||||
constexpr PropertyID first_property_id = PropertyID::@first_property_id@;
|
||||
constexpr PropertyID last_property_id = PropertyID::@last_property_id@;
|
||||
|
|
@ -700,6 +701,32 @@ bool property_affects_stacking_context(PropertyID property_id)
|
|||
}
|
||||
}
|
||||
|
||||
bool property_needs_layout_for_getcomputedstyle(PropertyID property_id)
|
||||
{
|
||||
switch (property_id) {
|
||||
)~~~");
|
||||
|
||||
properties.for_each_member([&](auto& name, auto& value) {
|
||||
VERIFY(value.is_object());
|
||||
if (is_legacy_alias(value.as_object()))
|
||||
return;
|
||||
|
||||
if (value.as_object().get_bool("needs-layout-for-getcomputedstyle"sv).value_or(false)) {
|
||||
auto member_generator = generator.fork();
|
||||
member_generator.set("name:titlecase", title_casify(name));
|
||||
member_generator.append(R"~~~(
|
||||
case PropertyID::@name:titlecase@:
|
||||
)~~~");
|
||||
}
|
||||
});
|
||||
|
||||
generator.append(R"~~~(
|
||||
return true;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
NonnullRefPtr<StyleValue const> property_initial_value(PropertyID property_id)
|
||||
{
|
||||
static Array<RefPtr<StyleValue const>, to_underlying(last_property_id) + 1> initial_values;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue