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.

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

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:

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();

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&);

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;
 }
 

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

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());

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()); }

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));
+}
+
+}

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;
+};
+
+}

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;

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);
 }

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();