mirror of
https://github.com/RGBCube/serenity
synced 2025-07-26 22:47:45 +00:00
LibWeb: Use CSS::Size for computed size and max-size values
This patch changes the *computed* representation of the following CSS properties to use CSS::Size: - width, min-width, max-width - height, min-height, max-height A few things had to change in order for things to keep working, but I tried to keep the diff to a minimum. The main trouble was that `min-width` and `max-width` can't actually be `auto`, but they *can* be `none`. We previously treated `auto` as a valid value (and it behaved mostly like `none`).
This commit is contained in:
Andreas Kling
parent
844321d89f
commit
0843960235
9 changed files with 144 additions and 109 deletions
|
|
@ -10,6 +10,7 @@
|
|||
#include <LibWeb/CSS/BackdropFilter.h>
|
||||
#include <LibWeb/CSS/Clip.h>
|
||||
#include <LibWeb/CSS/LengthBox.h>
|
||||
#include <LibWeb/CSS/Size.h>
|
||||
#include <LibWeb/CSS/StyleValue.h>
|
||||
|
||||
namespace Web::CSS {
|
||||
|
|
@ -56,12 +57,12 @@ public:
|
|||
static CSS::LengthBox inset() { return { CSS::Length::make_auto(), CSS::Length::make_auto(), CSS::Length::make_auto(), CSS::Length::make_auto() }; }
|
||||
static CSS::LengthBox margin() { return { CSS::Length::make_px(0), CSS::Length::make_px(0), CSS::Length::make_px(0), CSS::Length::make_px(0) }; }
|
||||
static CSS::LengthBox padding() { return { CSS::Length::make_px(0), CSS::Length::make_px(0), CSS::Length::make_px(0), CSS::Length::make_px(0) }; }
|
||||
static CSS::Length width() { return CSS::Length::make_auto(); }
|
||||
static CSS::Length min_width() { return CSS::Length::make_auto(); }
|
||||
static CSS::Length max_width() { return CSS::Length::make_auto(); }
|
||||
static CSS::Length height() { return CSS::Length::make_auto(); }
|
||||
static CSS::Length min_height() { return CSS::Length::make_auto(); }
|
||||
static CSS::Length max_height() { return CSS::Length::make_auto(); }
|
||||
static CSS::Size width() { return CSS::Size::make_auto(); }
|
||||
static CSS::Size min_width() { return CSS::Size::make_auto(); }
|
||||
static CSS::Size max_width() { return CSS::Size::make_none(); }
|
||||
static CSS::Size height() { return CSS::Size::make_auto(); }
|
||||
static CSS::Size min_height() { return CSS::Size::make_auto(); }
|
||||
static CSS::Size max_height() { return CSS::Size::make_none(); }
|
||||
static Vector<CSS::GridTrackSize> grid_template_columns() { return Vector<CSS::GridTrackSize> {}; }
|
||||
static Vector<CSS::GridTrackSize> grid_template_rows() { return Vector<CSS::GridTrackSize> {}; }
|
||||
static CSS::GridTrackPlacement grid_column_end() { return CSS::GridTrackPlacement::make_auto(); }
|
||||
|
|
@ -172,12 +173,12 @@ public:
|
|||
CSS::BackdropFilter const& backdrop_filter() const { return m_noninherited.backdrop_filter; }
|
||||
Vector<ShadowData> const& box_shadow() const { return m_noninherited.box_shadow; }
|
||||
CSS::BoxSizing box_sizing() const { return m_noninherited.box_sizing; }
|
||||
CSS::LengthPercentage const& width() const { return m_noninherited.width; }
|
||||
CSS::LengthPercentage const& min_width() const { return m_noninherited.min_width; }
|
||||
CSS::LengthPercentage const& max_width() const { return m_noninherited.max_width; }
|
||||
CSS::LengthPercentage const& height() const { return m_noninherited.height; }
|
||||
CSS::LengthPercentage const& min_height() const { return m_noninherited.min_height; }
|
||||
CSS::LengthPercentage const& max_height() const { return m_noninherited.max_height; }
|
||||
CSS::Size const& width() const { return m_noninherited.width; }
|
||||
CSS::Size const& min_width() const { return m_noninherited.min_width; }
|
||||
CSS::Size const& max_width() const { return m_noninherited.max_width; }
|
||||
CSS::Size const& height() const { return m_noninherited.height; }
|
||||
CSS::Size const& min_height() const { return m_noninherited.min_height; }
|
||||
CSS::Size const& max_height() const { return m_noninherited.max_height; }
|
||||
Variant<CSS::VerticalAlign, CSS::LengthPercentage> const& vertical_align() const { return m_noninherited.vertical_align; }
|
||||
Vector<CSS::GridTrackSize> const& grid_template_columns() const { return m_noninherited.grid_template_columns; }
|
||||
Vector<CSS::GridTrackSize> const& grid_template_rows() const { return m_noninherited.grid_template_rows; }
|
||||
|
|
@ -261,12 +262,12 @@ protected:
|
|||
Color text_decoration_color { InitialValues::color() };
|
||||
Vector<ShadowData> text_shadow {};
|
||||
CSS::Position position { InitialValues::position() };
|
||||
CSS::LengthPercentage width { InitialValues::width() };
|
||||
CSS::LengthPercentage min_width { InitialValues::min_width() };
|
||||
CSS::LengthPercentage max_width { InitialValues::max_width() };
|
||||
CSS::LengthPercentage height { InitialValues::height() };
|
||||
CSS::LengthPercentage min_height { InitialValues::min_height() };
|
||||
CSS::LengthPercentage max_height { InitialValues::max_height() };
|
||||
CSS::Size width { InitialValues::width() };
|
||||
CSS::Size min_width { InitialValues::min_width() };
|
||||
CSS::Size max_width { InitialValues::max_width() };
|
||||
CSS::Size height { InitialValues::height() };
|
||||
CSS::Size min_height { InitialValues::min_height() };
|
||||
CSS::Size max_height { InitialValues::max_height() };
|
||||
CSS::LengthBox inset { InitialValues::inset() };
|
||||
CSS::LengthBox margin { InitialValues::margin() };
|
||||
CSS::LengthBox padding { InitialValues::padding() };
|
||||
|
|
@ -338,12 +339,12 @@ public:
|
|||
void set_text_shadow(Vector<ShadowData>&& value) { m_noninherited.text_shadow = move(value); }
|
||||
void set_position(CSS::Position position) { m_noninherited.position = position; }
|
||||
void set_white_space(CSS::WhiteSpace value) { m_inherited.white_space = value; }
|
||||
void set_width(CSS::LengthPercentage const& width) { m_noninherited.width = width; }
|
||||
void set_min_width(CSS::LengthPercentage const& width) { m_noninherited.min_width = width; }
|
||||
void set_max_width(CSS::LengthPercentage const& width) { m_noninherited.max_width = width; }
|
||||
void set_height(CSS::LengthPercentage const& height) { m_noninherited.height = height; }
|
||||
void set_min_height(CSS::LengthPercentage const& height) { m_noninherited.min_height = height; }
|
||||
void set_max_height(CSS::LengthPercentage const& height) { m_noninherited.max_height = height; }
|
||||
void set_width(CSS::Size const& width) { m_noninherited.width = width; }
|
||||
void set_min_width(CSS::Size const& width) { m_noninherited.min_width = width; }
|
||||
void set_max_width(CSS::Size const& width) { m_noninherited.max_width = width; }
|
||||
void set_height(CSS::Size const& height) { m_noninherited.height = height; }
|
||||
void set_min_height(CSS::Size const& height) { m_noninherited.min_height = height; }
|
||||
void set_max_height(CSS::Size const& height) { m_noninherited.max_height = height; }
|
||||
void set_inset(CSS::LengthBox const& inset) { m_noninherited.inset = inset; }
|
||||
void set_margin(const CSS::LengthBox& margin) { m_noninherited.margin = margin; }
|
||||
void set_padding(const CSS::LengthBox& padding) { m_noninherited.padding = padding; }
|
||||
|
|
|
|||
|
|
@ -138,6 +138,24 @@ static NonnullRefPtr<StyleValue> style_value_for_length_percentage(LengthPercent
|
|||
return length_percentage.calculated();
|
||||
}
|
||||
|
||||
static NonnullRefPtr<StyleValue> style_value_for_size(CSS::Size const& size)
|
||||
{
|
||||
if (size.is_none())
|
||||
return IdentifierStyleValue::create(ValueID::None);
|
||||
if (size.is_percentage())
|
||||
return PercentageStyleValue::create(size.percentage());
|
||||
if (size.is_length())
|
||||
return LengthStyleValue::create(size.length());
|
||||
if (size.is_auto())
|
||||
return IdentifierStyleValue::create(ValueID::Auto);
|
||||
if (size.is_min_content())
|
||||
return IdentifierStyleValue::create(ValueID::MinContent);
|
||||
if (size.is_max_content())
|
||||
return IdentifierStyleValue::create(ValueID::MaxContent);
|
||||
// FIXME: Support fit-content(<length>)
|
||||
TODO();
|
||||
}
|
||||
|
||||
RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout::NodeWithStyle const& layout_node, PropertyID property_id) const
|
||||
{
|
||||
switch (property_id) {
|
||||
|
|
@ -349,7 +367,7 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout:
|
|||
case CSS::PropertyID::GridTemplateRows:
|
||||
return GridTrackSizeStyleValue::create(layout_node.computed_values().grid_template_rows());
|
||||
case CSS::PropertyID::Height:
|
||||
return style_value_for_length_percentage(layout_node.computed_values().height());
|
||||
return style_value_for_size(layout_node.computed_values().height());
|
||||
case CSS::PropertyID::ImageRendering:
|
||||
return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().image_rendering()));
|
||||
case CSS::PropertyID::JustifyContent:
|
||||
|
|
@ -374,13 +392,13 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout:
|
|||
case CSS::PropertyID::MarginTop:
|
||||
return style_value_for_length_percentage(layout_node.computed_values().margin().top());
|
||||
case CSS::PropertyID::MaxHeight:
|
||||
return style_value_for_length_percentage(layout_node.computed_values().max_height());
|
||||
return style_value_for_size(layout_node.computed_values().max_height());
|
||||
case CSS::PropertyID::MaxWidth:
|
||||
return style_value_for_length_percentage(layout_node.computed_values().max_width());
|
||||
return style_value_for_size(layout_node.computed_values().max_width());
|
||||
case CSS::PropertyID::MinHeight:
|
||||
return style_value_for_length_percentage(layout_node.computed_values().min_height());
|
||||
return style_value_for_size(layout_node.computed_values().min_height());
|
||||
case CSS::PropertyID::MinWidth:
|
||||
return style_value_for_length_percentage(layout_node.computed_values().min_width());
|
||||
return style_value_for_size(layout_node.computed_values().min_width());
|
||||
case CSS::PropertyID::Opacity:
|
||||
return NumericStyleValue::create_float(layout_node.computed_values().opacity());
|
||||
case CSS::PropertyID::Order:
|
||||
|
|
@ -470,7 +488,7 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout:
|
|||
case CSS::PropertyID::WhiteSpace:
|
||||
return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().white_space()));
|
||||
case CSS::PropertyID::Width:
|
||||
return style_value_for_length_percentage(layout_node.computed_values().width());
|
||||
return style_value_for_size(layout_node.computed_values().width());
|
||||
case CSS::PropertyID::ZIndex: {
|
||||
auto maybe_z_index = layout_node.computed_values().z_index();
|
||||
if (!maybe_z_index.has_value())
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue