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

LibWeb: Require layout update for less properties in getComputedStyle()

Browse source 
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 2025-09-11 00:51:00 +02:00 • committed by Andreas Kling
commit db5fd614ac
Notes: github-actions[bot] 2025-09-12 09:07:24 +00:00
4 changed files with 135 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

1
Documentation/CSSGeneratedFiles.md
View file

@ -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)` | | `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-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)` | | `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` ### `animation-type`

2
Libraries/LibWeb/CSS/CSSStyleProperties.cpp
View file

@ -169,7 +169,7 @@ Optional<StyleProperty> CSSStyleProperties::property(PropertyID property_id) con
// FIXME: Be smarter about updating layout if there's no layout node. // 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 // 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. // 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); abstract_element.document().update_layout(DOM::UpdateLayoutReason::ResolvedCSSStyleDeclarationProperty);
layout_node = abstract_element.layout_node(); layout_node = abstract_element.layout_node();
} else { } else {

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

@ -489,7 +489,8 @@
"mapping": "block-size" "mapping": "block-size"
}, },
"initial": "auto", "initial": "auto",
"max-values": 1 "max-values": 1,
"needs-layout-for-getcomputedstyle": true
}, },
"border": { "border": {
"inherited": false, "inherited": false,
@ -498,7 +499,8 @@
"border-width", "border-width",
"border-style", "border-style",
"border-color" "border-color"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"border-block": { "border-block": {
"inherited": false, "inherited": false,
@ -507,7 +509,8 @@
"border-block-width", "border-block-width",
"border-block-style", "border-block-style",
"border-block-color" "border-block-color"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"border-block-color": { "border-block-color": {
"inherited": false, "inherited": false,
@ -528,7 +531,8 @@
"border-block-end-width", "border-block-end-width",
"border-block-end-style", "border-block-end-style",
"border-block-end-color" "border-block-end-color"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"border-block-end-color": { "border-block-end-color": {
"logical-alias-for": { "logical-alias-for": {
@ -549,7 +553,8 @@
"group": "border-width", "group": "border-width",
"mapping": "block-end" "mapping": "block-end"
}, },
"max-values": 1 "max-values": 1,
"needs-layout-for-getcomputedstyle": true
}, },
"border-block-start": { "border-block-start": {
"inherited": false, "inherited": false,
@ -558,7 +563,8 @@
"border-block-start-width", "border-block-start-width",
"border-block-start-style", "border-block-start-style",
"border-block-start-color" "border-block-start-color"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"border-block-start-color": { "border-block-start-color": {
"logical-alias-for": { "logical-alias-for": {
@ -579,7 +585,8 @@
"group": "border-width", "group": "border-width",
"mapping": "block-start" "mapping": "block-start"
}, },
"max-values": 1 "max-values": 1,
"needs-layout-for-getcomputedstyle": true
}, },
"border-block-style": { "border-block-style": {
"inherited": false, "inherited": false,
@ -604,7 +611,8 @@
"valid-types": [ "valid-types": [
"length [0,∞]", "length [0,∞]",
"line-width" "line-width"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"border-bottom": { "border-bottom": {
"inherited": false, "inherited": false,
@ -613,7 +621,8 @@
"border-bottom-width", "border-bottom-width",
"border-bottom-style", "border-bottom-style",
"border-bottom-color" "border-bottom-color"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"border-bottom-color": { "border-bottom-color": {
"affects-layout": false, "affects-layout": false,
@ -669,7 +678,8 @@
], ],
"quirks": [ "quirks": [
"unitless-length" "unitless-length"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"border-collapse": { "border-collapse": {
"animation-type": "discrete", "animation-type": "discrete",
@ -753,7 +763,8 @@
"valid-types": [ "valid-types": [
"number [0,∞]", "number [0,∞]",
"percentage [0,∞]" "percentage [0,∞]"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"border-image-source": { "border-image-source": {
"affects-layout": false, "affects-layout": false,
@ -781,7 +792,8 @@
"valid-identifiers": [ "valid-identifiers": [
"auto" "auto"
], ],
"percentages-resolve-to": "length" "percentages-resolve-to": "length",
"needs-layout-for-getcomputedstyle": true
}, },
"border-inline": { "border-inline": {
"inherited": false, "inherited": false,
@ -790,7 +802,8 @@
"border-inline-width", "border-inline-width",
"border-inline-style", "border-inline-style",
"border-inline-color" "border-inline-color"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"border-inline-color": { "border-inline-color": {
"inherited": false, "inherited": false,
@ -811,7 +824,8 @@
"border-inline-end-width", "border-inline-end-width",
"border-inline-end-style", "border-inline-end-style",
"border-inline-end-color" "border-inline-end-color"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"border-inline-end-color": { "border-inline-end-color": {
"logical-alias-for": { "logical-alias-for": {
@ -1124,7 +1138,8 @@
"percentages-resolve-to": "length", "percentages-resolve-to": "length",
"quirks": [ "quirks": [
"unitless-length" "unitless-length"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"box-shadow": { "box-shadow": {
"affects-layout": false, "affects-layout": false,
@ -1966,7 +1981,8 @@
"grid-template-areas", "grid-template-areas",
"grid-template-rows", "grid-template-rows",
"grid-template-columns" "grid-template-columns"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"grid-template-areas": { "grid-template-areas": {
"animation-type": "discrete", "animation-type": "discrete",
@ -1992,7 +2008,8 @@
"percentage", "percentage",
"string" "string"
], ],
"percentages-resolve-to": "length" "percentages-resolve-to": "length",
"needs-layout-for-getcomputedstyle": true
}, },
"grid-template-rows": { "grid-template-rows": {
"animation-type": "custom", "animation-type": "custom",
@ -2007,7 +2024,8 @@
"percentage", "percentage",
"string" "string"
], ],
"percentages-resolve-to": "length" "percentages-resolve-to": "length",
"needs-layout-for-getcomputedstyle": true
}, },
"height": { "height": {
"animation-type": "by-computed-value", "animation-type": "by-computed-value",
@ -2026,7 +2044,8 @@
"percentages-resolve-to": "length", "percentages-resolve-to": "length",
"quirks": [ "quirks": [
"unitless-length" "unitless-length"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"image-rendering": { "image-rendering": {
"animation-type": "discrete", "animation-type": "discrete",
@ -2043,7 +2062,8 @@
"mapping": "inline-size" "mapping": "inline-size"
}, },
"initial": "auto", "initial": "auto",
"max-values": 1 "max-values": 1,
"needs-layout-for-getcomputedstyle": true
}, },
"inset": { "inset": {
"inherited": false, "inherited": false,
@ -2062,7 +2082,8 @@
"valid-identifiers": [ "valid-identifiers": [
"auto" "auto"
], ],
"percentages-resolve-to": "length" "percentages-resolve-to": "length",
"needs-layout-for-getcomputedstyle": true
}, },
"inset-block": { "inset-block": {
"initial": "auto", "initial": "auto",
@ -2078,21 +2099,24 @@
"valid-identifiers": [ "valid-identifiers": [
"auto" "auto"
], ],
"percentages-resolve-to": "length" "percentages-resolve-to": "length",
"needs-layout-for-getcomputedstyle": true
}, },
"inset-block-end": { "inset-block-end": {
"logical-alias-for": { "logical-alias-for": {
"group": "inset", "group": "inset",
"mapping": "block-end" "mapping": "block-end"
}, },
"max-values": 1 "max-values": 1,
"needs-layout-for-getcomputedstyle": true
}, },
"inset-block-start": { "inset-block-start": {
"logical-alias-for": { "logical-alias-for": {
"group": "inset", "group": "inset",
"mapping": "block-start" "mapping": "block-start"
}, },
"max-values": 1 "max-values": 1,
"needs-layout-for-getcomputedstyle": true
}, },
"inset-inline": { "inset-inline": {
"initial": "auto", "initial": "auto",
@ -2108,21 +2132,24 @@
"valid-identifiers": [ "valid-identifiers": [
"auto" "auto"
], ],
"percentages-resolve-to": "length" "percentages-resolve-to": "length",
"needs-layout-for-getcomputedstyle": true
}, },
"inset-inline-end": { "inset-inline-end": {
"logical-alias-for": { "logical-alias-for": {
"group": "inset", "group": "inset",
"mapping": "inline-end" "mapping": "inline-end"
}, },
"max-values": 1 "max-values": 1,
"needs-layout-for-getcomputedstyle": true
}, },
"inset-inline-start": { "inset-inline-start": {
"logical-alias-for": { "logical-alias-for": {
"group": "inset", "group": "inset",
"mapping": "inline-start" "mapping": "inline-start"
}, },
"max-values": 1 "max-values": 1,
"needs-layout-for-getcomputedstyle": true
}, },
"isolation": { "isolation": {
"animation-type": "discrete", "animation-type": "discrete",
@ -2171,7 +2198,8 @@
"percentages-resolve-to": "length", "percentages-resolve-to": "length",
"quirks": [ "quirks": [
"unitless-length" "unitless-length"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"letter-spacing": { "letter-spacing": {
"animation-type": "by-computed-value", "animation-type": "by-computed-value",
@ -2201,7 +2229,8 @@
"valid-identifiers": [ "valid-identifiers": [
"normal" "normal"
], ],
"percentages-resolve-to": "length" "percentages-resolve-to": "length",
"needs-layout-for-getcomputedstyle": true
}, },
"list-style": { "list-style": {
"inherited": true, "inherited": true,
@ -2260,7 +2289,8 @@
"percentages-resolve-to": "length", "percentages-resolve-to": "length",
"quirks": [ "quirks": [
"unitless-length" "unitless-length"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"margin-block": { "margin-block": {
"initial": "0", "initial": "0",
@ -2276,19 +2306,22 @@
"valid-identifiers": [ "valid-identifiers": [
"auto" "auto"
], ],
"percentages-resolve-to": "length" "percentages-resolve-to": "length",
"needs-layout-for-getcomputedstyle": true
}, },
"margin-block-end": { "margin-block-end": {
"logical-alias-for": { "logical-alias-for": {
"group": "margin", "group": "margin",
"mapping": "block-end" "mapping": "block-end"
} },
"needs-layout-for-getcomputedstyle": true
}, },
"margin-block-start": { "margin-block-start": {
"logical-alias-for": { "logical-alias-for": {
"group": "margin", "group": "margin",
"mapping": "block-start" "mapping": "block-start"
} },
"needs-layout-for-getcomputedstyle": true
}, },
"margin-bottom": { "margin-bottom": {
"animation-type": "by-computed-value", "animation-type": "by-computed-value",
@ -2304,7 +2337,8 @@
"percentages-resolve-to": "length", "percentages-resolve-to": "length",
"quirks": [ "quirks": [
"unitless-length" "unitless-length"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"margin-inline": { "margin-inline": {
"initial": "0", "initial": "0",
@ -2320,19 +2354,22 @@
"valid-identifiers": [ "valid-identifiers": [
"auto" "auto"
], ],
"percentages-resolve-to": "length" "percentages-resolve-to": "length",
"needs-layout-for-getcomputedstyle": true
}, },
"margin-inline-end": { "margin-inline-end": {
"logical-alias-for": { "logical-alias-for": {
"group": "margin", "group": "margin",
"mapping": "inline-end" "mapping": "inline-end"
} },
"needs-layout-for-getcomputedstyle": true
}, },
"margin-inline-start": { "margin-inline-start": {
"logical-alias-for": { "logical-alias-for": {
"group": "margin", "group": "margin",
"mapping": "inline-start" "mapping": "inline-start"
} },
"needs-layout-for-getcomputedstyle": true
}, },
"margin-left": { "margin-left": {
"animation-type": "by-computed-value", "animation-type": "by-computed-value",
@ -2348,7 +2385,8 @@
"percentages-resolve-to": "length", "percentages-resolve-to": "length",
"quirks": [ "quirks": [
"unitless-length" "unitless-length"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"margin-right": { "margin-right": {
"animation-type": "by-computed-value", "animation-type": "by-computed-value",
@ -2364,7 +2402,8 @@
"percentages-resolve-to": "length", "percentages-resolve-to": "length",
"quirks": [ "quirks": [
"unitless-length" "unitless-length"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"margin-top": { "margin-top": {
"animation-type": "by-computed-value", "animation-type": "by-computed-value",
@ -2380,7 +2419,8 @@
"percentages-resolve-to": "length", "percentages-resolve-to": "length",
"quirks": [ "quirks": [
"unitless-length" "unitless-length"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"mask": { "mask": {
"__comment": "FIXME: reset mask-border", "__comment": "FIXME: reset mask-border",
@ -2778,7 +2818,8 @@
"percentages-resolve-to": "length", "percentages-resolve-to": "length",
"quirks": [ "quirks": [
"unitless-length" "unitless-length"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"padding-block": { "padding-block": {
"initial": "0", "initial": "0",
@ -2791,19 +2832,22 @@
"length [0,∞]", "length [0,∞]",
"percentage [0,∞]" "percentage [0,∞]"
], ],
"percentages-resolve-to": "length" "percentages-resolve-to": "length",
"needs-layout-for-getcomputedstyle": true
}, },
"padding-block-end": { "padding-block-end": {
"logical-alias-for": { "logical-alias-for": {
"group": "padding", "group": "padding",
"mapping": "block-end" "mapping": "block-end"
} },
"needs-layout-for-getcomputedstyle": true
}, },
"padding-block-start": { "padding-block-start": {
"logical-alias-for": { "logical-alias-for": {
"group": "padding", "group": "padding",
"mapping": "block-start" "mapping": "block-start"
} },
"needs-layout-for-getcomputedstyle": true
}, },
"padding-bottom": { "padding-bottom": {
"animation-type": "by-computed-value", "animation-type": "by-computed-value",
@ -2816,7 +2860,8 @@
"percentages-resolve-to": "length", "percentages-resolve-to": "length",
"quirks": [ "quirks": [
"unitless-length" "unitless-length"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"padding-inline": { "padding-inline": {
"initial": "0", "initial": "0",
@ -2829,7 +2874,8 @@
"length [0,∞]", "length [0,∞]",
"percentage [0,∞]" "percentage [0,∞]"
], ],
"percentages-resolve-to": "length" "percentages-resolve-to": "length",
"needs-layout-for-getcomputedstyle": true
}, },
"padding-inline-end": { "padding-inline-end": {
"logical-alias-for": { "logical-alias-for": {
@ -2841,7 +2887,8 @@
"logical-alias-for": { "logical-alias-for": {
"group": "padding", "group": "padding",
"mapping": "inline-start" "mapping": "inline-start"
} },
"needs-layout-for-getcomputedstyle": true
}, },
"padding-left": { "padding-left": {
"animation-type": "by-computed-value", "animation-type": "by-computed-value",
@ -2854,7 +2901,8 @@
"percentages-resolve-to": "length", "percentages-resolve-to": "length",
"quirks": [ "quirks": [
"unitless-length" "unitless-length"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"padding-right": { "padding-right": {
"animation-type": "by-computed-value", "animation-type": "by-computed-value",
@ -2867,7 +2915,8 @@
"percentages-resolve-to": "length", "percentages-resolve-to": "length",
"quirks": [ "quirks": [
"unitless-length" "unitless-length"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"padding-top": { "padding-top": {
"animation-type": "by-computed-value", "animation-type": "by-computed-value",
@ -2880,7 +2929,8 @@
"percentages-resolve-to": "length", "percentages-resolve-to": "length",
"quirks": [ "quirks": [
"unitless-length" "unitless-length"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"paint-order": { "paint-order": {
"animation-type": "discrete", "animation-type": "discrete",
@ -2975,7 +3025,8 @@
"percentages-resolve-to": "length", "percentages-resolve-to": "length",
"quirks": [ "quirks": [
"unitless-length" "unitless-length"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"rotate": { "rotate": {
"animation-type": "custom", "animation-type": "custom",
@ -3370,7 +3421,8 @@
"percentages-resolve-to": "length", "percentages-resolve-to": "length",
"quirks": [ "quirks": [
"unitless-length" "unitless-length"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"touch-action": { "touch-action": {
"animation-type": "discrete", "animation-type": "discrete",
@ -3590,7 +3642,8 @@
"percentages-resolve-to": "length", "percentages-resolve-to": "length",
"quirks": [ "quirks": [
"unitless-length" "unitless-length"
] ],
"needs-layout-for-getcomputedstyle": true
}, },
"will-change": { "will-change": {
"affects-layout": false, "affects-layout": false,

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

@ -291,6 +291,7 @@ size_t property_maximum_value_count(PropertyID);
bool property_affects_layout(PropertyID); bool property_affects_layout(PropertyID);
bool property_affects_stacking_context(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 first_property_id = PropertyID::@first_property_id@;
constexpr PropertyID last_property_id = PropertyID::@last_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) NonnullRefPtr<StyleValue const> property_initial_value(PropertyID property_id)
{ {
static Array<RefPtr<StyleValue const>, to_underlying(last_property_id) + 1> initial_values; static Array<RefPtr<StyleValue const>, to_underlying(last_property_id) + 1> initial_values;