From 71d5dc510e454935fe8f20ae8501fceb633db1ff Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Tue, 23 May 2023 18:14:47 +0200 Subject: [PATCH] LibWeb: Resolve CSS variables if present in SVG presentation attributes SVG presentation attributes are parsed as CSS values, so we also need to handle CSS variable expansion when handling them. This (roughly) matches the behavior of other engines. It's also used on the web, for example on https://stripe.com/ :^) --- ...vg-with-css-variable-in-presentation-hint.txt | 7 +++++++ ...g-with-css-variable-in-presentation-hint.html | 10 ++++++++++ Userland/Libraries/LibWeb/CSS/StyleComputer.cpp | 16 +++++++++++++++- 3 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 Tests/LibWeb/Layout/expected/svg/svg-with-css-variable-in-presentation-hint.txt create mode 100644 Tests/LibWeb/Layout/input/svg/svg-with-css-variable-in-presentation-hint.html diff --git a/Tests/LibWeb/Layout/expected/svg/svg-with-css-variable-in-presentation-hint.txt b/Tests/LibWeb/Layout/expected/svg/svg-with-css-variable-in-presentation-hint.txt new file mode 100644 index 0000000000..8e4c2837fb --- /dev/null +++ b/Tests/LibWeb/Layout/expected/svg/svg-with-css-variable-in-presentation-hint.txt @@ -0,0 +1,7 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x118 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x102 children: inline + line 0 width: 102, height: 102, bottom: 102, baseline: 60 + frag 0 from SVGSVGBox start: 0, length: 0, rect: [9,9 100x100] + SVGSVGBox at (9,9) content-size 100x100 [SVG] children: not-inline + SVGGeometryBox at (29,29) content-size 60x60 children: not-inline diff --git a/Tests/LibWeb/Layout/input/svg/svg-with-css-variable-in-presentation-hint.html b/Tests/LibWeb/Layout/input/svg/svg-with-css-variable-in-presentation-hint.html new file mode 100644 index 0000000000..cfc01018d0 --- /dev/null +++ b/Tests/LibWeb/Layout/input/svg/svg-with-css-variable-in-presentation-hint.html @@ -0,0 +1,10 @@ + \ No newline at end of file diff --git a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp index 47fdbc5be1..34e1656b43 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp +++ b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp @@ -973,9 +973,23 @@ ErrorOr StyleComputer::compute_cascaded_values(StyleProperties& style, DOM // FIXME: Normal user declarations // Author presentational hints (NOTE: The spec doesn't say exactly how to prioritize these.) - if (!pseudo_element.has_value()) + if (!pseudo_element.has_value()) { element.apply_presentational_hints(style); + // SVG presentation attributes are parsed as CSS values, so we need to handle potential custom properties here. + if (element.is_svg_element()) { + // FIXME: This is not very efficient, we should only resolve the custom properties that are actually used. + for (auto i = to_underlying(CSS::first_property_id); i <= to_underlying(CSS::last_property_id); ++i) { + auto property_id = (CSS::PropertyID)i; + auto& property = style.m_property_values[i]; + if (property && property->is_unresolved()) { + if (auto resolved = resolve_unresolved_style_value(element, pseudo_element, property_id, property->as_unresolved())) + property = resolved.release_nonnull(); + } + } + } + } + // Normal author declarations cascade_declarations(style, element, pseudo_element, matching_rule_set.author_rules, CascadeOrigin::Author, Important::No);