diff --git a/Libraries/LibWeb/CSS/StyleComputer.cpp b/Libraries/LibWeb/CSS/StyleComputer.cpp index 3edd1b86125..cd5e8b157ce 100644 --- a/Libraries/LibWeb/CSS/StyleComputer.cpp +++ b/Libraries/LibWeb/CSS/StyleComputer.cpp @@ -2350,6 +2350,7 @@ GC::Ptr StyleComputer::compute_style_impl(DOM::AbstractEleme for (auto const& property : inline_style->properties()) style->set_property(property.property_id, property.value); } + abstract_element.element().adjust_computed_style(style); return style; } @@ -2603,7 +2604,8 @@ GC::Ref StyleComputer::compute_properties(DOM::AbstractEleme compute_text_align(computed_style, abstract_element); // 8. Let the element adjust computed style - abstract_element.element().adjust_computed_style(computed_style); + if (!abstract_element.pseudo_element().has_value()) + abstract_element.element().adjust_computed_style(computed_style); // 9. Transition declarations [css-transitions-1] // Theoretically this should be part of the cascade, but it works with computed values, which we don't have until now. diff --git a/Libraries/LibWeb/HTML/HTMLButtonElement.cpp b/Libraries/LibWeb/HTML/HTMLButtonElement.cpp index f76a9fcfa17..c416c61866e 100644 --- a/Libraries/LibWeb/HTML/HTMLButtonElement.cpp +++ b/Libraries/LibWeb/HTML/HTMLButtonElement.cpp @@ -5,6 +5,8 @@ */ #include +#include +#include #include #include #include @@ -29,6 +31,23 @@ void HTMLButtonElement::initialize(JS::Realm& realm) Base::initialize(realm); } +void HTMLButtonElement::adjust_computed_style(CSS::ComputedProperties& style) +{ + // https://html.spec.whatwg.org/multipage/rendering.html#button-layout + // If the computed value of 'display' is 'inline-grid', 'grid', 'inline-flex', 'flex', 'none', or 'contents', then behave as the computed value. + auto display = style.display(); + if (display.is_flex_inside() || display.is_grid_inside() || display.is_none() || display.is_contents()) { + // No-op + } else if (display.is_inline_outside()) { + // Otherwise, if the computed value of 'display' is a value such that the outer display type is 'inline', then behave as 'inline-block'. + // AD-HOC https://github.com/whatwg/html/issues/11857 + style.set_property(CSS::PropertyID::Display, CSS::DisplayStyleValue::create(CSS::Display::from_short(CSS::Display::Short::InlineBlock))); + } else { + // Otherwise, behave as 'flow-root'. + style.set_property(CSS::PropertyID::Display, CSS::DisplayStyleValue::create(CSS::Display::from_short(CSS::Display::Short::FlowRoot))); + } +} + HTMLButtonElement::TypeAttributeState HTMLButtonElement::type_state() const { auto value = get_attribute_value(HTML::AttributeNames::type); diff --git a/Libraries/LibWeb/HTML/HTMLButtonElement.h b/Libraries/LibWeb/HTML/HTMLButtonElement.h index 7d9cf2b0bc8..d0c860b8133 100644 --- a/Libraries/LibWeb/HTML/HTMLButtonElement.h +++ b/Libraries/LibWeb/HTML/HTMLButtonElement.h @@ -31,6 +31,7 @@ public: virtual ~HTMLButtonElement() override; virtual void initialize(JS::Realm&) override; + virtual void adjust_computed_style(CSS::ComputedProperties&) override; enum class TypeAttributeState { #define __ENUMERATE_HTML_BUTTON_TYPE_ATTRIBUTE(_, state) state, diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/button-width.txt b/Tests/LibWeb/Layout/expected/block-and-inline/button-width.txt index 7dbc9e2f8ed..6b51420e172 100644 --- a/Tests/LibWeb/Layout/expected/block-and-inline/button-width.txt +++ b/Tests/LibWeb/Layout/expected/block-and-inline/button-width.txt @@ -1,13 +1,13 @@ Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] children: not-inline BlockContainer at [0,0] [0+0+0 800 0+0+0] [0+0+0 60 0+0+0] [BFC] children: not-inline BlockContainer at [8,8] [8+0+0 784 0+0+8] [8+0+0 44 0+0+8] children: not-inline - BlockContainer at [13,10] [0+1+4 190 4+1+584] [0+1+1 18 1+1+0] children: not-inline + BlockContainer at [13,10] [0+1+4 190 4+1+584] [0+1+1 18 1+1+0] [BFC] children: not-inline BlockContainer <(anonymous)> at [13,10] flex-container(column) [0+0+0 190 0+0+0] [0+0+0 18 0+0+0] [FFC] children: not-inline BlockContainer <(anonymous)> at [13,10] flex-item [0+0+0 190 0+0+0] [0+0+0 18 0+0+0] [BFC] children: inline frag 0 from TextNode start: 0, length: 11, rect: [60.53125,10 94.921875x18] baseline: 13.796875 "200px width" TextNode <#text> (not painted) - BlockContainer at [13,32] [0+1+4 324.671875 4+1+0] [0+1+1 18 1+1+0] children: not-inline + BlockContainer at [13,32] [0+1+4 324.671875 4+1+0] [0+1+1 18 1+1+0] [BFC] children: not-inline BlockContainer <(anonymous)> at [13,32] flex-container(column) [0+0+0 324.671875 0+0+0] [0+0+0 18 0+0+0] [FFC] children: not-inline BlockContainer <(anonymous)> at [13,32] flex-item [0+0+0 324.671875 0+0+0] [0+0+0 18 0+0+0] [BFC] children: inline frag 0 from TextNode start: 0, length: 39, rect: [13,32 324.671875x18] baseline: 13.796875 diff --git a/Tests/LibWeb/Text/expected/wpt-import/html/rendering/widgets/button-layout/display-other.txt b/Tests/LibWeb/Text/expected/wpt-import/html/rendering/widgets/button-layout/display-other.txt index b615d8746ff..b8ef5b467fe 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/html/rendering/widgets/button-layout/display-other.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/html/rendering/widgets/button-layout/display-other.txt @@ -2,23 +2,22 @@ Harness status: OK Found 18 tests -3 Pass -15 Fail -Fail display: block +18 Pass +Pass display: block Pass display: run-in Pass display: flow -Fail display: flow-root -Fail display: table +Pass display: flow-root +Pass display: table Pass display: list-item -Fail display: table-row-group -Fail display: table-header-group -Fail display: table-footer-group -Fail display: table-row -Fail display: table-cell -Fail display: table-column-group -Fail display: table-column -Fail display: table-caption -Fail display: ruby-base -Fail display: ruby-text -Fail display: ruby-base-container -Fail display: ruby-text-container \ No newline at end of file +Pass display: table-row-group +Pass display: table-header-group +Pass display: table-footer-group +Pass display: table-row +Pass display: table-cell +Pass display: table-column-group +Pass display: table-column +Pass display: table-caption +Pass display: ruby-base +Pass display: ruby-text +Pass display: ruby-base-container +Pass display: ruby-text-container \ No newline at end of file