1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 04:47:35 +00:00

LibWeb: Start work towards modern CSS "display" values

Until now, we've internally thought of the CSS "display" property as a
single-value property. In practice, "display" is a much more complex
property that comes in a number of configurations.

The most interesting one is the two-part format that describes the
outside and inside behavior of a box. Switching our own internal
representation towards this model will allow for much cleaner
abstractions around layout and the various formatting contexts.

Note that we don't *parse* two-part "display" yet, this is only about
changing the internal representation of the property.

Spec: https://drafts.csswg.org/css-display
This commit is contained in:
Andreas Kling 2021-10-06 17:57:44 +02:00
parent 1552873275
commit 85a0772147
22 changed files with 214 additions and 161 deletions

View file

@ -22,7 +22,7 @@ public:
static CSS::Position position() { return CSS::Position::Static; }
static CSS::TextDecorationLine text_decoration_line() { return CSS::TextDecorationLine::None; }
static CSS::TextTransform text_transform() { return CSS::TextTransform::None; }
static CSS::Display display() { return CSS::Display::Inline; }
static CSS::Display display() { return CSS::Display { CSS::Display::Outside::Inline, CSS::Display::Inside::Flow }; }
static Color color() { return Color::Black; }
static Color background_color() { return Color::Transparent; }
static CSS::Repeat background_repeat() { return CSS::Repeat::Repeat; }

View file

@ -44,41 +44,78 @@ static CSS::ValueID to_css_value_id(CSS::BoxSizing value)
VERIFY_NOT_REACHED();
}
static CSS::ValueID to_css_value_id(CSS::Display value)
static RefPtr<StyleValue> style_value_for_display(CSS::Display display)
{
switch (value) {
case CSS::Display::None:
return CSS::ValueID::None;
case CSS::Display::Block:
return CSS::ValueID::Block;
case CSS::Display::Inline:
return CSS::ValueID::Inline;
case CSS::Display::InlineBlock:
return CSS::ValueID::InlineBlock;
case CSS::Display::ListItem:
return CSS::ValueID::ListItem;
case CSS::Display::Table:
return CSS::ValueID::Table;
case CSS::Display::TableRow:
return CSS::ValueID::TableRow;
case CSS::Display::TableCell:
return CSS::ValueID::TableCell;
case CSS::Display::TableHeaderGroup:
return CSS::ValueID::TableHeaderGroup;
case CSS::Display::TableRowGroup:
return CSS::ValueID::TableRowGroup;
case CSS::Display::TableFooterGroup:
return CSS::ValueID::TableFooterGroup;
case CSS::Display::TableColumn:
return CSS::ValueID::TableColumn;
case CSS::Display::TableColumnGroup:
return CSS::ValueID::TableColumnGroup;
case CSS::Display::TableCaption:
return CSS::ValueID::TableCaption;
case CSS::Display::Flex:
return CSS::ValueID::Flex;
if (display.is_none())
return IdentifierStyleValue::create(CSS::ValueID::None);
if (display.it_outside_and_inside()) {
NonnullRefPtrVector<StyleValue> values;
switch (display.outside()) {
case CSS::Display::Outside::Inline:
values.append(IdentifierStyleValue::create(CSS::ValueID::Inline));
break;
case CSS::Display::Outside::Block:
values.append(IdentifierStyleValue::create(CSS::ValueID::Block));
break;
case CSS::Display::Outside::RunIn:
values.append(IdentifierStyleValue::create(CSS::ValueID::RunIn));
break;
}
switch (display.inside()) {
case CSS::Display::Inside::Flow:
values.append(IdentifierStyleValue::create(CSS::ValueID::Flow));
break;
case CSS::Display::Inside::FlowRoot:
values.append(IdentifierStyleValue::create(CSS::ValueID::FlowRoot));
break;
case CSS::Display::Inside::Table:
values.append(IdentifierStyleValue::create(CSS::ValueID::Table));
break;
case CSS::Display::Inside::Flex:
values.append(IdentifierStyleValue::create(CSS::ValueID::Flex));
break;
case CSS::Display::Inside::Grid:
values.append(IdentifierStyleValue::create(CSS::ValueID::Grid));
break;
case CSS::Display::Inside::Ruby:
values.append(IdentifierStyleValue::create(CSS::ValueID::Ruby));
break;
}
return StyleValueList::create(move(values));
}
VERIFY_NOT_REACHED();
if (display.is_internal()) {
switch (display.internal()) {
case CSS::Display::Internal::TableRowGroup:
return IdentifierStyleValue::create(CSS::ValueID::TableRowGroup);
case CSS::Display::Internal::TableHeaderGroup:
return IdentifierStyleValue::create(CSS::ValueID::TableHeaderGroup);
case CSS::Display::Internal::TableFooterGroup:
return IdentifierStyleValue::create(CSS::ValueID::TableFooterGroup);
case CSS::Display::Internal::TableRow:
return IdentifierStyleValue::create(CSS::ValueID::TableRow);
case CSS::Display::Internal::TableCell:
return IdentifierStyleValue::create(CSS::ValueID::TableCell);
case CSS::Display::Internal::TableColumnGroup:
return IdentifierStyleValue::create(CSS::ValueID::TableColumnGroup);
case CSS::Display::Internal::TableColumn:
return IdentifierStyleValue::create(CSS::ValueID::TableColumn);
case CSS::Display::Internal::TableCaption:
return IdentifierStyleValue::create(CSS::ValueID::TableCaption);
case CSS::Display::Internal::RubyBase:
return IdentifierStyleValue::create(CSS::ValueID::RubyBase);
case CSS::Display::Internal::RubyText:
return IdentifierStyleValue::create(CSS::ValueID::RubyText);
case CSS::Display::Internal::RubyBaseContainer:
return IdentifierStyleValue::create(CSS::ValueID::RubyBaseContainer);
case CSS::Display::Internal::RubyTextContainer:
return IdentifierStyleValue::create(CSS::ValueID::RubyTextContainer);
}
}
TODO();
}
static CSS::ValueID to_css_value_id(CSS::Float value)
@ -427,7 +464,7 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout:
case CSS::PropertyID::Cursor:
return IdentifierStyleValue::create(to_css_value_id(layout_node.computed_values().cursor()));
case CSS::PropertyID::Display:
return IdentifierStyleValue::create(to_css_value_id(layout_node.computed_values().display()));
return style_value_for_display(layout_node.computed_values().display());
case CSS::PropertyID::ZIndex: {
auto maybe_z_index = layout_node.computed_values().z_index();
if (!maybe_z_index.has_value())

View file

@ -530,40 +530,40 @@ CSS::Display StyleProperties::display() const
{
auto value = property(CSS::PropertyID::Display);
if (!value.has_value() || !value.value()->is_identifier())
return CSS::Display::Inline;
return CSS::Display::from_short(CSS::Display::Short::Inline);
switch (value.value()->to_identifier()) {
case CSS::ValueID::None:
return CSS::Display::None;
return CSS::Display::from_short(CSS::Display::Short::None);
case CSS::ValueID::Block:
return CSS::Display::Block;
return CSS::Display::from_short(CSS::Display::Short::Block);
case CSS::ValueID::Inline:
return CSS::Display::Inline;
return CSS::Display::from_short(CSS::Display::Short::Inline);
case CSS::ValueID::InlineBlock:
return CSS::Display::InlineBlock;
return CSS::Display::from_short(CSS::Display::Short::InlineBlock);
case CSS::ValueID::ListItem:
return CSS::Display::ListItem;
return CSS::Display::from_short(CSS::Display::Short::ListItem);
case CSS::ValueID::Table:
return CSS::Display::Table;
return CSS::Display::from_short(CSS::Display::Short::Table);
case CSS::ValueID::TableRow:
return CSS::Display::TableRow;
return CSS::Display { CSS::Display::Internal::TableRow };
case CSS::ValueID::TableCell:
return CSS::Display::TableCell;
return CSS::Display { CSS::Display::Internal::TableCell };
case CSS::ValueID::TableColumn:
return CSS::Display::TableColumn;
return CSS::Display { CSS::Display::Internal::TableColumn };
case CSS::ValueID::TableColumnGroup:
return CSS::Display::TableColumnGroup;
return CSS::Display { CSS::Display::Internal::TableColumnGroup };
case CSS::ValueID::TableCaption:
return CSS::Display::TableCaption;
return CSS::Display { CSS::Display::Internal::TableCaption };
case CSS::ValueID::TableRowGroup:
return CSS::Display::TableRowGroup;
return CSS::Display { CSS::Display::Internal::TableRowGroup };
case CSS::ValueID::TableHeaderGroup:
return CSS::Display::TableHeaderGroup;
return CSS::Display { CSS::Display::Internal::TableHeaderGroup };
case CSS::ValueID::TableFooterGroup:
return CSS::Display::TableFooterGroup;
return CSS::Display { CSS::Display::Internal::TableFooterGroup };
case CSS::ValueID::Flex:
return CSS::Display::Flex;
return CSS::Display::from_short(CSS::Display::Short::Flex);
default:
return CSS::Display::Block;
return CSS::Display::from_short(CSS::Display::Short::Block);
}
}

View file

@ -22,6 +22,7 @@
#include <AK/WeakPtr.h>
#include <LibGfx/Bitmap.h>
#include <LibGfx/Color.h>
#include <LibWeb/CSS/Display.h>
#include <LibWeb/CSS/Length.h>
#include <LibWeb/CSS/Parser/StyleComponentValueRule.h>
#include <LibWeb/CSS/PropertyID.h>
@ -90,24 +91,6 @@ enum class Cursor {
ZoomOut,
};
enum class Display {
None,
Block,
Inline,
InlineBlock,
ListItem,
Table,
TableRow,
TableCell,
TableHeaderGroup,
TableRowGroup,
TableFooterGroup,
TableColumn,
TableColumnGroup,
TableCaption,
Flex,
};
enum class FlexBasis {
Content,
Length,