mirror of
https://github.com/SerenityOS/serenity.git
synced 2025-01-24 18:32:28 -05:00
LibWeb: Support calc(...) in box-shadow's values of type Length
The CSS box-shadow property takes 2-4 properties that are `<length>`s, those being: - offset-x - offset-y - blur-radius - spread-radius Previously these were resolved directly to concrete Lengths at parse time, but now they will be parsed as LengthStyleValues and/or CalculatedStyleValues and be stored that way until styles are later resolved.
This commit is contained in:
FalseHonesty
Sam Atkins
parent
8873bf5016
commit
110eeb8591
9 changed files with 143 additions and 58 deletions
|
|
@ -0,0 +1 @@
|
|||
0 calc(5px - 10px) 0 calc(2px + 3px) => #000000ff 0px calc(5px + (0 - 10px)) 0px calc(2px + 3px)
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<script src="../include.js"></script>
|
||||
<script>
|
||||
test(() => {
|
||||
const e = document.createElement("div");
|
||||
document.body.appendChild(e);
|
||||
const definition = "0 calc(5px - 10px) 0 calc(2px + 3px)";
|
||||
e.style.boxShadow = definition;
|
||||
const computedStyle = getComputedStyle(e);
|
||||
const serialized = computedStyle.boxShadow;
|
||||
println(definition + " => " + serialized);
|
||||
e.remove();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -5849,12 +5849,27 @@ ErrorOr<RefPtr<StyleValue>> Parser::parse_single_shadow_value(TokenStream<Compon
|
|||
auto transaction = tokens.begin_transaction();
|
||||
|
||||
Optional<Color> color;
|
||||
Optional<Length> offset_x;
|
||||
Optional<Length> offset_y;
|
||||
Optional<Length> blur_radius;
|
||||
Optional<Length> spread_distance;
|
||||
RefPtr<StyleValue> offset_x;
|
||||
RefPtr<StyleValue> offset_y;
|
||||
RefPtr<StyleValue> blur_radius;
|
||||
RefPtr<StyleValue> spread_distance;
|
||||
Optional<ShadowPlacement> placement;
|
||||
|
||||
auto possibly_dynamic_length = [&](ComponentValue const& token) -> ErrorOr<RefPtr<StyleValue>> {
|
||||
if (auto maybe_dynamic_value = TRY(parse_dynamic_value(token))) {
|
||||
if (!maybe_dynamic_value->is_calculated())
|
||||
return nullptr;
|
||||
auto const& calculated_value = maybe_dynamic_value->as_calculated();
|
||||
if (!calculated_value.resolves_to_length())
|
||||
return nullptr;
|
||||
return calculated_value;
|
||||
}
|
||||
auto maybe_length = parse_length(token);
|
||||
if (!maybe_length.has_value())
|
||||
return nullptr;
|
||||
return LengthStyleValue::create(maybe_length.release_value());
|
||||
};
|
||||
|
||||
while (tokens.has_next_token()) {
|
||||
auto const& token = tokens.peek_token();
|
||||
|
||||
|
|
@ -5866,38 +5881,38 @@ ErrorOr<RefPtr<StyleValue>> Parser::parse_single_shadow_value(TokenStream<Compon
|
|||
continue;
|
||||
}
|
||||
|
||||
if (auto maybe_offset_x = parse_length(token); maybe_offset_x.has_value()) {
|
||||
if (auto maybe_offset_x = TRY(possibly_dynamic_length(token)); maybe_offset_x) {
|
||||
// horizontal offset
|
||||
if (offset_x.has_value())
|
||||
if (offset_x)
|
||||
return nullptr;
|
||||
offset_x = maybe_offset_x.release_value();
|
||||
offset_x = maybe_offset_x;
|
||||
tokens.next_token();
|
||||
|
||||
// vertical offset
|
||||
if (!tokens.has_next_token())
|
||||
return nullptr;
|
||||
auto maybe_offset_y = parse_length(tokens.peek_token());
|
||||
if (!maybe_offset_y.has_value())
|
||||
auto maybe_offset_y = TRY(possibly_dynamic_length(tokens.peek_token()));
|
||||
if (!maybe_offset_y)
|
||||
return nullptr;
|
||||
offset_y = maybe_offset_y.release_value();
|
||||
offset_y = maybe_offset_y;
|
||||
tokens.next_token();
|
||||
|
||||
// blur radius (optional)
|
||||
if (!tokens.has_next_token())
|
||||
break;
|
||||
auto maybe_blur_radius = parse_length(tokens.peek_token());
|
||||
if (!maybe_blur_radius.has_value())
|
||||
auto maybe_blur_radius = TRY(possibly_dynamic_length(tokens.peek_token()));
|
||||
if (!maybe_blur_radius)
|
||||
continue;
|
||||
blur_radius = maybe_blur_radius.release_value();
|
||||
blur_radius = maybe_blur_radius;
|
||||
tokens.next_token();
|
||||
|
||||
// spread distance (optional)
|
||||
if (!tokens.has_next_token())
|
||||
break;
|
||||
auto maybe_spread_distance = parse_length(tokens.peek_token());
|
||||
if (!maybe_spread_distance.has_value())
|
||||
auto maybe_spread_distance = TRY(possibly_dynamic_length(tokens.peek_token()));
|
||||
if (!maybe_spread_distance)
|
||||
continue;
|
||||
spread_distance = maybe_spread_distance.release_value();
|
||||
spread_distance = maybe_spread_distance;
|
||||
tokens.next_token();
|
||||
|
||||
continue;
|
||||
|
|
@ -5923,21 +5938,21 @@ ErrorOr<RefPtr<StyleValue>> Parser::parse_single_shadow_value(TokenStream<Compon
|
|||
color = Color::NamedColor::Black;
|
||||
|
||||
// x/y offsets are required
|
||||
if (!offset_x.has_value() || !offset_y.has_value())
|
||||
if (!offset_x || !offset_y)
|
||||
return nullptr;
|
||||
|
||||
// Other lengths default to 0
|
||||
if (!blur_radius.has_value())
|
||||
blur_radius = Length::make_px(0);
|
||||
if (!spread_distance.has_value())
|
||||
spread_distance = Length::make_px(0);
|
||||
if (!blur_radius)
|
||||
blur_radius = TRY(LengthStyleValue::create(Length::make_px(0)));
|
||||
if (!spread_distance)
|
||||
spread_distance = TRY(LengthStyleValue::create(Length::make_px(0)));
|
||||
|
||||
// Placement is outer by default
|
||||
if (!placement.has_value())
|
||||
placement = ShadowPlacement::Outer;
|
||||
|
||||
transaction.commit();
|
||||
return ShadowStyleValue::create(color.release_value(), offset_x.release_value(), offset_y.release_value(), blur_radius.release_value(), spread_distance.release_value(), placement.release_value());
|
||||
return ShadowStyleValue::create(color.release_value(), offset_x.release_nonnull(), offset_y.release_nonnull(), blur_radius.release_nonnull(), spread_distance.release_nonnull(), placement.release_value());
|
||||
}
|
||||
|
||||
ErrorOr<RefPtr<StyleValue>> Parser::parse_content_value(Vector<ComponentValue> const& component_values)
|
||||
|
|
|
|||
|
|
@ -523,8 +523,12 @@ ErrorOr<RefPtr<StyleValue const>> ResolvedCSSStyleDeclaration::style_value_for_p
|
|||
if (box_shadow_layers.is_empty())
|
||||
return nullptr;
|
||||
|
||||
auto make_box_shadow_style_value = [](ShadowData const& data) {
|
||||
return ShadowStyleValue::create(data.color, data.offset_x, data.offset_y, data.blur_radius, data.spread_distance, data.placement);
|
||||
auto make_box_shadow_style_value = [](ShadowData const& data) -> ErrorOr<NonnullRefPtr<ShadowStyleValue>> {
|
||||
auto offset_x = TRY(LengthStyleValue::create(data.offset_x));
|
||||
auto offset_y = TRY(LengthStyleValue::create(data.offset_y));
|
||||
auto blur_radius = TRY(LengthStyleValue::create(data.blur_radius));
|
||||
auto spread_distance = TRY(LengthStyleValue::create(data.spread_distance));
|
||||
return ShadowStyleValue::create(data.color, offset_x, offset_y, blur_radius, spread_distance, data.placement);
|
||||
};
|
||||
|
||||
if (box_shadow_layers.size() == 1)
|
||||
|
|
|
|||
|
|
@ -751,41 +751,74 @@ Optional<CSS::Overflow> StyleProperties::overflow(CSS::PropertyID property_id) c
|
|||
return value_id_to_overflow(value->to_identifier());
|
||||
}
|
||||
|
||||
Vector<ShadowData> StyleProperties::shadow(PropertyID property_id) const
|
||||
Vector<ShadowData> StyleProperties::shadow(PropertyID property_id, Layout::Node const& layout_node) const
|
||||
{
|
||||
auto value = property(property_id);
|
||||
|
||||
auto make_shadow_data = [](ShadowStyleValue const& value) {
|
||||
return ShadowData { value.color(), value.offset_x(), value.offset_y(), value.blur_radius(), value.spread_distance(), value.placement() };
|
||||
auto resolve_to_length = [&layout_node](NonnullRefPtr<StyleValue const> const& value) -> Optional<Length> {
|
||||
if (value->is_length())
|
||||
return value->as_length().length();
|
||||
if (value->is_calculated())
|
||||
return value->as_calculated().resolve_length(layout_node);
|
||||
return {};
|
||||
};
|
||||
|
||||
auto make_shadow_data = [resolve_to_length](ShadowStyleValue const& value) -> Optional<ShadowData> {
|
||||
auto maybe_offset_x = resolve_to_length(value.offset_x());
|
||||
if (!maybe_offset_x.has_value())
|
||||
return {};
|
||||
auto maybe_offset_y = resolve_to_length(value.offset_y());
|
||||
if (!maybe_offset_y.has_value())
|
||||
return {};
|
||||
auto maybe_blur_radius = resolve_to_length(value.blur_radius());
|
||||
if (!maybe_blur_radius.has_value())
|
||||
return {};
|
||||
auto maybe_spread_distance = resolve_to_length(value.spread_distance());
|
||||
if (!maybe_spread_distance.has_value())
|
||||
return {};
|
||||
return ShadowData {
|
||||
value.color(),
|
||||
maybe_offset_x.release_value(),
|
||||
maybe_offset_y.release_value(),
|
||||
maybe_blur_radius.release_value(),
|
||||
maybe_spread_distance.release_value(),
|
||||
value.placement()
|
||||
};
|
||||
};
|
||||
|
||||
if (value->is_value_list()) {
|
||||
auto& value_list = value->as_value_list();
|
||||
auto const& value_list = value->as_value_list();
|
||||
|
||||
Vector<ShadowData> shadow_data;
|
||||
shadow_data.ensure_capacity(value_list.size());
|
||||
for (auto const& layer_value : value_list.values())
|
||||
shadow_data.append(make_shadow_data(layer_value->as_shadow()));
|
||||
for (auto const& layer_value : value_list.values()) {
|
||||
auto maybe_shadow_data = make_shadow_data(layer_value->as_shadow());
|
||||
if (!maybe_shadow_data.has_value())
|
||||
return {};
|
||||
shadow_data.append(maybe_shadow_data.release_value());
|
||||
}
|
||||
|
||||
return shadow_data;
|
||||
}
|
||||
|
||||
if (value->is_shadow()) {
|
||||
auto& box = value->as_shadow();
|
||||
return { make_shadow_data(box) };
|
||||
auto maybe_shadow_data = make_shadow_data(value->as_shadow());
|
||||
if (!maybe_shadow_data.has_value())
|
||||
return {};
|
||||
return { maybe_shadow_data.release_value() };
|
||||
}
|
||||
|
||||
return {};
|
||||
}
|
||||
|
||||
Vector<ShadowData> StyleProperties::box_shadow() const
|
||||
Vector<ShadowData> StyleProperties::box_shadow(Layout::Node const& layout_node) const
|
||||
{
|
||||
return shadow(PropertyID::BoxShadow);
|
||||
return shadow(PropertyID::BoxShadow, layout_node);
|
||||
}
|
||||
|
||||
Vector<ShadowData> StyleProperties::text_shadow() const
|
||||
Vector<ShadowData> StyleProperties::text_shadow(Layout::Node const& layout_node) const
|
||||
{
|
||||
return shadow(PropertyID::TextShadow);
|
||||
return shadow(PropertyID::TextShadow, layout_node);
|
||||
}
|
||||
|
||||
Optional<CSS::BoxSizing> StyleProperties::box_sizing() const
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ public:
|
|||
Vector<CSS::TextDecorationLine> text_decoration_line() const;
|
||||
Optional<CSS::TextDecorationStyle> text_decoration_style() const;
|
||||
Optional<CSS::TextTransform> text_transform() const;
|
||||
Vector<CSS::ShadowData> text_shadow() const;
|
||||
Vector<CSS::ShadowData> text_shadow(Layout::Node const&) const;
|
||||
Optional<CSS::ListStyleType> list_style_type() const;
|
||||
Optional<CSS::ListStylePosition> list_style_position() const;
|
||||
Optional<CSS::FlexDirection> flex_direction() const;
|
||||
|
|
@ -85,7 +85,7 @@ public:
|
|||
Optional<CSS::JustifyContent> justify_content() const;
|
||||
Optional<CSS::Overflow> overflow_x() const;
|
||||
Optional<CSS::Overflow> overflow_y() const;
|
||||
Vector<CSS::ShadowData> box_shadow() const;
|
||||
Vector<CSS::ShadowData> box_shadow(Layout::Node const&) const;
|
||||
Optional<CSS::BoxSizing> box_sizing() const;
|
||||
Optional<CSS::PointerEvents> pointer_events() const;
|
||||
Variant<CSS::VerticalAlign, CSS::LengthPercentage> vertical_align() const;
|
||||
|
|
@ -141,7 +141,7 @@ private:
|
|||
};
|
||||
Array<Optional<StyleAndSourceDeclaration>, to_underlying(CSS::last_property_id) + 1> m_property_values;
|
||||
Optional<CSS::Overflow> overflow(CSS::PropertyID) const;
|
||||
Vector<CSS::ShadowData> shadow(CSS::PropertyID) const;
|
||||
Vector<CSS::ShadowData> shadow(CSS::PropertyID, Layout::Node const&) const;
|
||||
|
||||
mutable RefPtr<Gfx::Font const> m_font;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ namespace Web::CSS {
|
|||
ErrorOr<String> ShadowStyleValue::to_string() const
|
||||
{
|
||||
StringBuilder builder;
|
||||
TRY(builder.try_appendff("{} {} {} {} {}", m_properties.color.to_deprecated_string(), TRY(m_properties.offset_x.to_string()), TRY(m_properties.offset_y.to_string()), TRY(m_properties.blur_radius.to_string()), TRY(m_properties.spread_distance.to_string())));
|
||||
TRY(builder.try_appendff("{} {} {} {} {}", m_properties.color.to_deprecated_string(), TRY(m_properties.offset_x->to_string()), TRY(m_properties.offset_y->to_string()), TRY(m_properties.blur_radius->to_string()), TRY(m_properties.spread_distance->to_string())));
|
||||
if (m_properties.placement == ShadowPlacement::Inner)
|
||||
TRY(builder.try_append(" inset"sv));
|
||||
return builder.to_string();
|
||||
|
|
@ -22,10 +22,10 @@ ErrorOr<String> ShadowStyleValue::to_string() const
|
|||
|
||||
ErrorOr<ValueComparingNonnullRefPtr<StyleValue const>> ShadowStyleValue::absolutized(CSSPixelRect const& viewport_rect, Length::FontMetrics const& font_metrics, Length::FontMetrics const& root_font_metrics) const
|
||||
{
|
||||
auto absolutized_offset_x = m_properties.offset_x.absolutized(viewport_rect, font_metrics, root_font_metrics);
|
||||
auto absolutized_offset_y = m_properties.offset_y.absolutized(viewport_rect, font_metrics, root_font_metrics);
|
||||
auto absolutized_blur_radius = m_properties.blur_radius.absolutized(viewport_rect, font_metrics, root_font_metrics);
|
||||
auto absolutized_spread_distance = m_properties.spread_distance.absolutized(viewport_rect, font_metrics, root_font_metrics);
|
||||
auto absolutized_offset_x = TRY(m_properties.offset_x->absolutized(viewport_rect, font_metrics, root_font_metrics));
|
||||
auto absolutized_offset_y = TRY(m_properties.offset_y->absolutized(viewport_rect, font_metrics, root_font_metrics));
|
||||
auto absolutized_blur_radius = TRY(m_properties.blur_radius->absolutized(viewport_rect, font_metrics, root_font_metrics));
|
||||
auto absolutized_spread_distance = TRY(m_properties.spread_distance->absolutized(viewport_rect, font_metrics, root_font_metrics));
|
||||
return ShadowStyleValue::create(m_properties.color, absolutized_offset_x, absolutized_offset_y, absolutized_blur_radius, absolutized_spread_distance, m_properties.placement);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,17 +22,23 @@ enum class ShadowPlacement {
|
|||
|
||||
class ShadowStyleValue final : public StyleValueWithDefaultOperators<ShadowStyleValue> {
|
||||
public:
|
||||
static ErrorOr<ValueComparingNonnullRefPtr<ShadowStyleValue>> create(Color color, Length const& offset_x, Length const& offset_y, Length const& blur_radius, Length const& spread_distance, ShadowPlacement placement)
|
||||
static ErrorOr<ValueComparingNonnullRefPtr<ShadowStyleValue>> create(
|
||||
Color color,
|
||||
ValueComparingNonnullRefPtr<StyleValue const> offset_x,
|
||||
ValueComparingNonnullRefPtr<StyleValue const> offset_y,
|
||||
ValueComparingNonnullRefPtr<StyleValue const> blur_radius,
|
||||
ValueComparingNonnullRefPtr<StyleValue const> spread_distance,
|
||||
ShadowPlacement placement)
|
||||
{
|
||||
return adopt_nonnull_ref_or_enomem(new (nothrow) ShadowStyleValue(color, offset_x, offset_y, blur_radius, spread_distance, placement));
|
||||
return adopt_nonnull_ref_or_enomem(new (nothrow) ShadowStyleValue(color, move(offset_x), move(offset_y), move(blur_radius), move(spread_distance), placement));
|
||||
}
|
||||
virtual ~ShadowStyleValue() override = default;
|
||||
|
||||
Color color() const { return m_properties.color; }
|
||||
Length const& offset_x() const { return m_properties.offset_x; }
|
||||
Length const& offset_y() const { return m_properties.offset_y; }
|
||||
Length const& blur_radius() const { return m_properties.blur_radius; }
|
||||
Length const& spread_distance() const { return m_properties.spread_distance; }
|
||||
ValueComparingNonnullRefPtr<StyleValue const> const& offset_x() const { return m_properties.offset_x; }
|
||||
ValueComparingNonnullRefPtr<StyleValue const> const& offset_y() const { return m_properties.offset_y; }
|
||||
ValueComparingNonnullRefPtr<StyleValue const> const& blur_radius() const { return m_properties.blur_radius; }
|
||||
ValueComparingNonnullRefPtr<StyleValue const> const& spread_distance() const { return m_properties.spread_distance; }
|
||||
ShadowPlacement placement() const { return m_properties.placement; }
|
||||
|
||||
virtual ErrorOr<String> to_string() const override;
|
||||
|
|
@ -40,9 +46,22 @@ public:
|
|||
bool properties_equal(ShadowStyleValue const& other) const { return m_properties == other.m_properties; }
|
||||
|
||||
private:
|
||||
explicit ShadowStyleValue(Color color, Length const& offset_x, Length const& offset_y, Length const& blur_radius, Length const& spread_distance, ShadowPlacement placement)
|
||||
ShadowStyleValue(
|
||||
Color color,
|
||||
ValueComparingNonnullRefPtr<StyleValue const> offset_x,
|
||||
ValueComparingNonnullRefPtr<StyleValue const> offset_y,
|
||||
ValueComparingNonnullRefPtr<StyleValue const> blur_radius,
|
||||
ValueComparingNonnullRefPtr<StyleValue const> spread_distance,
|
||||
ShadowPlacement placement)
|
||||
: StyleValueWithDefaultOperators(Type::Shadow)
|
||||
, m_properties { .color = color, .offset_x = offset_x, .offset_y = offset_y, .blur_radius = blur_radius, .spread_distance = spread_distance, .placement = placement }
|
||||
, m_properties {
|
||||
.color = color,
|
||||
.offset_x = move(offset_x),
|
||||
.offset_y = move(offset_y),
|
||||
.blur_radius = move(blur_radius),
|
||||
.spread_distance = move(spread_distance),
|
||||
.placement = placement
|
||||
}
|
||||
{
|
||||
}
|
||||
|
||||
|
|
@ -50,10 +69,10 @@ private:
|
|||
|
||||
struct Properties {
|
||||
Color color;
|
||||
Length offset_x;
|
||||
Length offset_y;
|
||||
Length blur_radius;
|
||||
Length spread_distance;
|
||||
ValueComparingNonnullRefPtr<StyleValue const> offset_x;
|
||||
ValueComparingNonnullRefPtr<StyleValue const> offset_y;
|
||||
ValueComparingNonnullRefPtr<StyleValue const> blur_radius;
|
||||
ValueComparingNonnullRefPtr<StyleValue const> spread_distance;
|
||||
ShadowPlacement placement;
|
||||
bool operator==(Properties const&) const = default;
|
||||
} m_properties;
|
||||
|
|
|
|||
|
|
@ -594,7 +594,7 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
|
|||
if (auto maybe_text_decoration_thickness = computed_style.length_percentage(CSS::PropertyID::TextDecorationThickness); maybe_text_decoration_thickness.has_value())
|
||||
computed_values.set_text_decoration_thickness(maybe_text_decoration_thickness.release_value());
|
||||
|
||||
computed_values.set_text_shadow(computed_style.text_shadow());
|
||||
computed_values.set_text_shadow(computed_style.text_shadow(*this));
|
||||
|
||||
computed_values.set_z_index(computed_style.z_index());
|
||||
computed_values.set_opacity(computed_style.opacity());
|
||||
|
|
@ -616,7 +616,7 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
|
|||
computed_values.set_margin(computed_style.length_box(CSS::PropertyID::MarginLeft, CSS::PropertyID::MarginTop, CSS::PropertyID::MarginRight, CSS::PropertyID::MarginBottom, CSS::Length::make_px(0)));
|
||||
computed_values.set_padding(computed_style.length_box(CSS::PropertyID::PaddingLeft, CSS::PropertyID::PaddingTop, CSS::PropertyID::PaddingRight, CSS::PropertyID::PaddingBottom, CSS::Length::make_px(0)));
|
||||
|
||||
computed_values.set_box_shadow(computed_style.box_shadow());
|
||||
computed_values.set_box_shadow(computed_style.box_shadow(*this));
|
||||
|
||||
computed_values.set_transformations(computed_style.transformations());
|
||||
computed_values.set_transform_origin(computed_style.transform_origin());
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue