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
parent
1552873275
commit
85a0772147
22 changed files with 214 additions and 161 deletions
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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())
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue