LibWeb: Support multi-keyword syntax for CSS display property

The Display class already supported all specific values, and now they will be parsed too. The display property now has a special type DisplayStyleValue.
Author: https://github.com/emilitzerjo Commit: https://github.com/SerenityOS/serenity/commit/31e1be0438 Pull-request: https://github.com/SerenityOS/serenity/pull/18524 Reviewed-by: https://github.com/AtkinsSJ Reviewed-by: https://github.com/nico
2023-04-26 21:05:38 +02:00 · 2023-04-26 21:05:38 +02:00 · 31e1be0438 · 2024-07-17 21:16:31 +09:00
commit 31e1be0438
parent 81c11bc6f2
13 changed files with 249 additions and 55 deletions
--- a/Userland/Libraries/LibWeb/CMakeLists.txt
+++ b/Userland/Libraries/LibWeb/CMakeLists.txt
@ -78,6 +78,7 @@ set(SOURCES
    CSS/StyleValues/ColorStyleValue.cpp
    CSS/StyleValues/ConicGradientStyleValue.cpp
    CSS/StyleValues/ContentStyleValue.cpp
+    CSS/StyleValues/DisplayStyleValue.cpp
    CSS/StyleValues/EdgeStyleValue.cpp
    CSS/StyleValues/FilterValueListStyleValue.cpp
    CSS/StyleValues/FlexFlowStyleValue.cpp
--- a/Userland/Libraries/LibWeb/CSS/Display.h
+++ b/Userland/Libraries/LibWeb/CSS/Display.h
@ -138,6 +138,7 @@ public:
        None,
        Contents,
        Block,
+        Flow,
        FlowRoot,
        Inline,
        InlineBlock,
@ -149,7 +150,6 @@ public:
        Grid,
        InlineGrid,
        Ruby,
-        BlockRuby,
        Table,
        InlineTable,
    };
@ -163,10 +163,12 @@ public:
            return Display { Box::Contents };
        case Short::Block:
            return Display { Outside::Block, Inside::Flow };
-        case Short::FlowRoot:
-            return Display { Outside::Block, Inside::FlowRoot };
        case Short::Inline:
            return Display { Outside::Inline, Inside::Flow };
+        case Short::Flow:
+            return Display { Outside::Block, Inside::Flow };
+        case Short::FlowRoot:
+            return Display { Outside::Block, Inside::FlowRoot };
        case Short::InlineBlock:
            return Display { Outside::Inline, Inside::FlowRoot };
        case Short::RunIn:
@ -185,8 +187,6 @@ public:
            return Display { Outside::Inline, Inside::Grid };
        case Short::Ruby:
            return Display { Outside::Inline, Inside::Ruby };
-        case Short::BlockRuby:
-            return Display { Outside::Block, Inside::Ruby };
        case Short::Table:
            return Display { Outside::Block, Inside::Table };
        case Short::InlineTable:
--- a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
+++ b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
@ -41,6 +41,7 @@
 #include <LibWeb/CSS/StyleValues/ColorStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ConicGradientStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ContentStyleValue.h>
+#include <LibWeb/CSS/StyleValues/DisplayStyleValue.h>
 #include <LibWeb/CSS/StyleValues/EdgeStyleValue.h>
 #include <LibWeb/CSS/StyleValues/FilterValueListStyleValue.h>
 #include <LibWeb/CSS/StyleValues/FlexFlowStyleValue.h>
@ -4941,6 +4942,164 @@ RefPtr<StyleValue> Parser::parse_content_value(Vector<ComponentValue> const& com
    return ContentStyleValue::create(StyleValueList::create(move(content_values), StyleValueList::Separator::Space), move(alt_text));
 }

+// https://www.w3.org/TR/css-display-3/#the-display-properties
+RefPtr<StyleValue> Parser::parse_display_value(Vector<ComponentValue> const& component_values)
+{
+    auto parse_inside = [](ValueID identifier) -> Optional<Display::Inside> {
+        switch (identifier) {
+        case ValueID::Flow:
+            return Display::Inside::Flow;
+        case ValueID::FlowRoot:
+            return Display::Inside::FlowRoot;
+        case ValueID::Table:
+            return Display::Inside::Table;
+        case ValueID::Flex:
+            return Display::Inside::Flex;
+        case ValueID::Grid:
+            return Display::Inside::Grid;
+        case ValueID::Ruby:
+            return Display::Inside::Ruby;
+        default:
+            return {};
+        }
+    };
+    auto parse_outside = [](ValueID identifier) -> Optional<Display::Outside> {
+        switch (identifier) {
+        case ValueID::Block:
+            return Display::Outside::Block;
+        case ValueID::Inline:
+            return Display::Outside::Inline;
+        case ValueID::RunIn:
+            return Display::Outside::RunIn;
+        default:
+            return {};
+        }
+    };
+
+    auto parse_single_component_display = [&](Vector<ComponentValue> const& component_values) -> Optional<Display> {
+        if (auto identifier = parse_identifier_value(component_values.first())) {
+            switch (identifier->to_identifier()) {
+
+            // display-outside
+            case ValueID::Block:
+                return Display::from_short(Display::Short::Block);
+            case ValueID::Inline:
+                return Display::from_short(Display::Short::Inline);
+            case ValueID::RunIn:
+                return Display::from_short(Display::Short::RunIn);
+
+            // display-inside
+            case ValueID::Flow:
+                return Display::from_short(Display::Short::Flow);
+            case ValueID::FlowRoot:
+                return Display::from_short(Display::Short::FlowRoot);
+            case ValueID::Table:
+                return Display::from_short(Display::Short::Table);
+            case ValueID::Flex:
+                return Display::from_short(Display::Short::Flex);
+            case ValueID::Grid:
+                return Display::from_short(Display::Short::Grid);
+            case ValueID::Ruby:
+                return Display::from_short(Display::Short::Ruby);
+
+            // display-listitem
+            case ValueID::ListItem:
+                return Display::from_short(Display::Short::ListItem);
+
+            // display-internal
+            case ValueID::TableRowGroup:
+                return Display { Display::Internal::TableRowGroup };
+            case ValueID::TableHeaderGroup:
+                return Display { Display::Internal::TableHeaderGroup };
+            case ValueID::TableFooterGroup:
+                return Display { Display::Internal::TableFooterGroup };
+            case ValueID::TableRow:
+                return Display { Display::Internal::TableRow };
+            case ValueID::TableCell:
+                return Display { Display::Internal::TableCell };
+            case ValueID::TableColumnGroup:
+                return Display { Display::Internal::TableColumnGroup };
+            case ValueID::TableColumn:
+                return Display { Display::Internal::TableColumn };
+            case ValueID::TableCaption:
+                return Display { Display::Internal::TableCaption };
+            case ValueID::RubyBase:
+                return Display { Display::Internal::RubyBase };
+            case ValueID::RubyText:
+                return Display { Display::Internal::RubyText };
+            case ValueID::RubyBaseContainer:
+                return Display { Display::Internal::RubyBaseContainer };
+            case ValueID::RubyTextContainer:
+                return Display { Display::Internal::RubyTextContainer };
+
+            // display-box
+            case ValueID::Contents:
+                // FIXME this should be Display::Short::Contents but contents is currently not implemented
+                return Display::from_short(Display::Short::Flow);
+            case ValueID::None:
+                return Display::from_short(Display::Short::None);
+
+            // display-legacy
+            case ValueID::InlineBlock:
+                return Display::from_short(Display::Short::InlineBlock);
+            case ValueID::InlineTable:
+                return Display::from_short(Display::Short::InlineTable);
+            case ValueID::InlineFlex:
+                return Display::from_short(Display::Short::InlineFlex);
+            case ValueID::InlineGrid:
+                return Display::from_short(Display::Short::InlineGrid);
+
+            default:
+                return {};
+            }
+        }
+        return {};
+    };
+
+    auto parse_multi_component_display = [&](Vector<ComponentValue> const& component_values) -> Optional<Display> {
+        auto list_item = Display::ListItem::No;
+        Display::Inside inside = Display::Inside::Flow;
+        Display::Outside outside = Display::Outside::Block;
+
+        for (size_t i = 0; i < component_values.size(); ++i) {
+            if (auto value = parse_identifier_value(component_values[i])) {
+                auto identifier = value->to_identifier();
+                if (ValueID::ListItem == identifier) {
+                    list_item = Display::ListItem::Yes;
+                    continue;
+                }
+                auto inside_value = parse_inside(identifier);
+                if (inside_value.has_value()) {
+                    inside = inside_value.value();
+                    continue;
+                }
+                auto outside_value = parse_outside(identifier);
+                if (outside_value.has_value()) {
+                    outside = outside_value.value();
+                }
+            }
+        }
+
+        // The spec does not allow any other inside values to be combined with list-item
+        // <display-outside>? && [ flow | flow-root ]? && list-item
+        if (list_item == Display::ListItem::Yes && inside != Display::Inside::Flow && inside != Display::Inside::FlowRoot)
+            return {};
+
+        return Display { outside, inside, list_item };
+    };
+
+    Optional<Display> display;
+    if (component_values.size() == 1)
+        display = parse_single_component_display(component_values);
+    else
+        display = parse_multi_component_display(component_values);
+
+    if (display.has_value())
+        return DisplayStyleValue::create(display.value());
+
+    return {};
+}
+
 RefPtr<StyleValue> Parser::parse_filter_value_list_value(Vector<ComponentValue> const& component_values)
 {
    if (component_values.size() == 1 && component_values.first().is(Token::Type::Ident)) {
@ -6708,6 +6867,10 @@ Parser::ParseErrorOr<NonnullRefPtr<StyleValue>> Parser::parse_css_value(Property
        if (auto parsed_value = parse_content_value(component_values))
            return parsed_value.release_nonnull();
        return ParseError::SyntaxError;
+    case PropertyID::Display:
+        if (auto parsed_value = parse_display_value(component_values))
+            return parsed_value.release_nonnull();
+        return ParseError::SyntaxError;
    case PropertyID::Flex:
        if (auto parsed_value = parse_flex_value(component_values))
            return parsed_value.release_nonnull();
--- a/Userland/Libraries/LibWeb/CSS/Parser/Parser.h
+++ b/Userland/Libraries/LibWeb/CSS/Parser/Parser.h
@ -302,6 +302,7 @@ private:
    RefPtr<StyleValue> parse_border_radius_value(Vector<ComponentValue> const&);
    RefPtr<StyleValue> parse_border_radius_shorthand_value(Vector<ComponentValue> const&);
    RefPtr<StyleValue> parse_content_value(Vector<ComponentValue> const&);
+    RefPtr<StyleValue> parse_display_value(Vector<ComponentValue> const&);
    RefPtr<StyleValue> parse_flex_value(Vector<ComponentValue> const&);
    RefPtr<StyleValue> parse_flex_flow_value(Vector<ComponentValue> const&);
    RefPtr<StyleValue> parse_font_value(Vector<ComponentValue> const&);
--- a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
@ -30,6 +30,7 @@
 #include <LibWeb/CSS/StyleValues/BorderRadiusStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BorderStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ColorStyleValue.h>
+#include <LibWeb/CSS/StyleValues/DisplayStyleValue.h>
 #include <LibWeb/CSS/StyleValues/FilterValueListStyleValue.h>
 #include <LibWeb/CSS/StyleValues/FlexFlowStyleValue.h>
 #include <LibWeb/CSS/StyleValues/FlexStyleValue.h>
@ -1490,14 +1491,14 @@ void StyleComputer::transform_box_type_if_needed(StyleProperties& style, DOM::El
            //        to do that specifically. For now, we simply check for "inline-flex" and convert
            //        that to "flex".
            if (display.is_flex_inside())
-                style.set_property(CSS::PropertyID::Display, IdentifierStyleValue::create(CSS::ValueID::Flex));
+                style.set_property(CSS::PropertyID::Display, DisplayStyleValue::create({ CSS::Display::Outside::Block, CSS::Display::Inside::Flex }));
            else
-                style.set_property(CSS::PropertyID::Display, IdentifierStyleValue::create(CSS::ValueID::Block));
+                style.set_property(CSS::PropertyID::Display, DisplayStyleValue::create({ CSS::Display::Outside::Block, CSS::Display::Inside::Block }));
        }
        break;
    case BoxTypeTransformation::Inlinify:
        if (!display.is_inline_outside())
-            style.set_property(CSS::PropertyID::Display, IdentifierStyleValue::create(CSS::ValueID::Inline));
+            style.set_property(CSS::PropertyID::Display, DisplayStyleValue::create({ CSS::Display::Outside::Inline, CSS::Display::Inside::Flow }));
        break;
    }
 }
@ -1510,7 +1511,7 @@ NonnullRefPtr<StyleProperties> StyleComputer::create_document_style() const
    absolutize_values(style, nullptr, {});
    style->set_property(CSS::PropertyID::Width, CSS::LengthStyleValue::create(CSS::Length::make_px(viewport_rect().width())));
    style->set_property(CSS::PropertyID::Height, CSS::LengthStyleValue::create(CSS::Length::make_px(viewport_rect().height())));
-    style->set_property(CSS::PropertyID::Display, CSS::IdentifierStyleValue::create(CSS::ValueID::Block));
+    style->set_property(CSS::PropertyID::Display, CSS::DisplayStyleValue::create(CSS::Display::from_short(CSS::Display::Short::Block)));
    return style;
 }

--- a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
@ -11,6 +11,7 @@
 #include <LibWeb/CSS/StyleProperties.h>
 #include <LibWeb/CSS/StyleValues/AngleStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ContentStyleValue.h>
+#include <LibWeb/CSS/StyleValues/DisplayStyleValue.h>
 #include <LibWeb/CSS/StyleValues/GridTemplateAreaStyleValue.h>
 #include <LibWeb/CSS/StyleValues/GridTrackPlacementStyleValue.h>
 #include <LibWeb/CSS/StyleValues/GridTrackSizeListStyleValue.h>
@ -598,51 +599,13 @@ Optional<CSS::Visibility> StyleProperties::visibility() const
    return value_id_to_visibility(value->to_identifier());
 }

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

 Vector<CSS::TextDecorationLine> StyleProperties::text_decoration_line() const
--- a/Userland/Libraries/LibWeb/CSS/StyleValue.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleValue.cpp
@ -20,6 +20,7 @@
 #include <LibWeb/CSS/StyleValues/ColorStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ConicGradientStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ContentStyleValue.h>
+#include <LibWeb/CSS/StyleValues/DisplayStyleValue.h>
 #include <LibWeb/CSS/StyleValues/EdgeStyleValue.h>
 #include <LibWeb/CSS/StyleValues/FilterValueListStyleValue.h>
 #include <LibWeb/CSS/StyleValues/FlexFlowStyleValue.h>
@ -141,6 +142,12 @@ ContentStyleValue const& StyleValue::as_content() const
    return static_cast<ContentStyleValue const&>(*this);
 }

+DisplayStyleValue const& StyleValue::as_display() const
+{
+    VERIFY(is_display());
+    return static_cast<DisplayStyleValue const&>(*this);
+}
+
 EdgeStyleValue const& StyleValue::as_edge() const
 {
    VERIFY(is_edge());
--- a/Userland/Libraries/LibWeb/CSS/StyleValue.h
+++ b/Userland/Libraries/LibWeb/CSS/StyleValue.h
@ -98,6 +98,7 @@ public:
        Color,
        ConicGradient,
        Content,
+        Display,
        Edge,
        FilterValueList,
        Flex,
@ -150,6 +151,7 @@ public:
    bool is_color() const { return type() == Type::Color; }
    bool is_conic_gradient() const { return type() == Type::ConicGradient; }
    bool is_content() const { return type() == Type::Content; }
+    bool is_display() const { return type() == Type::Display; }
    bool is_edge() const { return type() == Type::Edge; }
    bool is_filter_value_list() const { return type() == Type::FilterValueList; }
    bool is_flex() const { return type() == Type::Flex; }
@ -200,6 +202,7 @@ public:
    ColorStyleValue const& as_color() const;
    ConicGradientStyleValue const& as_conic_gradient() const;
    ContentStyleValue const& as_content() const;
+    DisplayStyleValue const& as_display() const;
    EdgeStyleValue const& as_edge() const;
    FilterValueListStyleValue const& as_filter_value_list() const;
    FlexFlowStyleValue const& as_flex_flow() const;
@ -248,6 +251,7 @@ public:
    ColorStyleValue& as_color() { return const_cast<ColorStyleValue&>(const_cast<StyleValue const&>(*this).as_color()); }
    ConicGradientStyleValue& as_conic_gradient() { return const_cast<ConicGradientStyleValue&>(const_cast<StyleValue const&>(*this).as_conic_gradient()); }
    ContentStyleValue& as_content() { return const_cast<ContentStyleValue&>(const_cast<StyleValue const&>(*this).as_content()); }
+    DisplayStyleValue& as_display() { return const_cast<DisplayStyleValue&>(const_cast<StyleValue const&>(*this).as_display()); }
    EdgeStyleValue& as_edge() { return const_cast<EdgeStyleValue&>(const_cast<StyleValue const&>(*this).as_edge()); }
    FilterValueListStyleValue& as_filter_value_list() { return const_cast<FilterValueListStyleValue&>(const_cast<StyleValue const&>(*this).as_filter_value_list()); }
    FlexFlowStyleValue& as_flex_flow() { return const_cast<FlexFlowStyleValue&>(const_cast<StyleValue const&>(*this).as_flex_flow()); }
--- a/Userland/Libraries/LibWeb/CSS/StyleValues/DisplayStyleValue.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleValues/DisplayStyleValue.cpp
@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2023, Emil Militzer <emil.militzer@posteo.de>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include "DisplayStyleValue.h"
+
+namespace Web::CSS {
+
+ValueComparingNonnullRefPtr<DisplayStyleValue> DisplayStyleValue::create(Display const& display)
+{
+    return adopt_ref(*new DisplayStyleValue(display));
+}
+
+}
--- a/Userland/Libraries/LibWeb/CSS/StyleValues/DisplayStyleValue.h
+++ b/Userland/Libraries/LibWeb/CSS/StyleValues/DisplayStyleValue.h
@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2023, Emil Militzer <emil.militzer@posteo.de>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <LibWeb/CSS/Display.h>
+#include <LibWeb/CSS/StyleValue.h>
+
+namespace Web::CSS {
+
+class DisplayStyleValue : public StyleValueWithDefaultOperators<DisplayStyleValue> {
+public:
+    static ValueComparingNonnullRefPtr<DisplayStyleValue> create(Display const&);
+    virtual ~DisplayStyleValue() override = default;
+
+    virtual ErrorOr<String> to_string() const override { return m_display.to_string(); }
+
+    Display display() const { return m_display; }
+
+    bool properties_equal(DisplayStyleValue const& other) const { return m_display == other.m_display; }
+
+private:
+    explicit DisplayStyleValue(Display const& display)
+        : StyleValueWithDefaultOperators(Type::Display)
+        , m_display(display)
+    {
+    }
+
+    Display m_display;
+};
+
+}
--- a/Userland/Libraries/LibWeb/Forward.h
+++ b/Userland/Libraries/LibWeb/Forward.h
@ -84,6 +84,7 @@ class CSSStyleRule;
 class CSSStyleSheet;
 class CSSSupportsRule;
 class Display;
+class DisplayStyleValue;
 class EdgeStyleValue;
 class ElementInlineCSSStyleDeclaration;
 class ExplicitGridTrack;
--- a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
+++ b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
@ -6,6 +6,7 @@
 * SPDX-License-Identifier: BSD-2-Clause
 */

+#include <LibWeb/CSS/StyleValues/DisplayStyleValue.h>
 #include <LibWeb/CSS/StyleValues/IdentifierStyleValue.h>
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/DOM/ElementFactory.h>
@ -77,7 +78,7 @@ JS::GCPtr<Layout::Node> HTMLInputElement::create_layout_node(NonnullRefPtr<CSS::
    // AD-HOC: We rewrite `display: inline` to `display: inline-block`.
    //         This is required for the internal shadow tree to work correctly in layout.
    if (style->display().is_inline_outside() && style->display().is_flow_inside())
-        style->set_property(CSS::PropertyID::Display, CSS::IdentifierStyleValue::create(CSS::ValueID::InlineBlock));
+        style->set_property(CSS::PropertyID::Display, CSS::DisplayStyleValue::create(CSS::Display::from_short(CSS::Display::Short::InlineBlock)));

    return Element::create_layout_node_for_display_type(document(), style->display(), style, this);
 }
--- a/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp
+++ b/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp
@ -9,6 +9,7 @@
 #include <AK/Error.h>
 #include <AK/Optional.h>
 #include <AK/TemporaryChange.h>
+#include <LibWeb/CSS/StyleValues/DisplayStyleValue.h>
 #include <LibWeb/CSS/StyleValues/IdentifierStyleValue.h>
 #include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
 #include <LibWeb/DOM/Document.h>
@ -292,9 +293,9 @@ ErrorOr<void> TreeBuilder::create_layout_tree(DOM::Node& dom_node, TreeBuilder::
        auto& progress = static_cast<HTML::HTMLProgressElement&>(dom_node);
        if (!progress.using_system_appearance()) {
            auto bar_style = TRY(style_computer.compute_style(progress, CSS::Selector::PseudoElement::ProgressBar));
-            bar_style->set_property(CSS::PropertyID::Display, CSS::IdentifierStyleValue::create(CSS::ValueID::InlineBlock));
+            bar_style->set_property(CSS::PropertyID::Display, CSS::DisplayStyleValue::create(CSS::Display::from_short(CSS::Display::Short::FlowRoot)));
            auto value_style = TRY(style_computer.compute_style(progress, CSS::Selector::PseudoElement::ProgressValue));
-            value_style->set_property(CSS::PropertyID::Display, CSS::IdentifierStyleValue::create(CSS::ValueID::Block));
+            value_style->set_property(CSS::PropertyID::Display, CSS::DisplayStyleValue::create(CSS::Display::from_short(CSS::Display::Short::Block)));
            auto position = progress.position();
            value_style->set_property(CSS::PropertyID::Width, CSS::PercentageStyleValue::create(CSS::Percentage(position >= 0 ? round_to<int>(100 * position) : 0)));
            auto bar_display = bar_style->display();