diff options
| author | Andreas Kling <kling@serenityos.org> | 2023-04-29 20:18:01 +0200 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2023-04-30 05:52:19 +0200 |
| commit | 5236819f58b1ace2197d099c0d15bddd6a541cb4 (patch) | |
| tree | a9749cc7883547642945ed94faf30248024b772e | |
| parent | f7e034d4b257a22b898252d62652587601fa7f99 (diff) | |
| download | serenity-5236819f58b1ace2197d099c0d15bddd6a541cb4.zip | |
LibWeb: Resolve horizontal auto margins for images with `display: block`
3 files changed, 20 insertions, 0 deletions
diff --git a/Tests/LibWeb/Layout/expected/image-display-block-margin-auto.txt b/Tests/LibWeb/Layout/expected/image-display-block-margin-auto.txt new file mode 100644 index 0000000000..354b964149 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/image-display-block-margin-auto.txt @@ -0,0 +1,4 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer <html> at (0,0) content-size 800x116 children: not-inline + BlockContainer <body> at (8,8) content-size 400x100 children: not-inline + ImageBox <img> at (158,8) content-size 100x100 children: not-inline diff --git a/Tests/LibWeb/Layout/input/image-display-block-margin-auto.html b/Tests/LibWeb/Layout/input/image-display-block-margin-auto.html new file mode 100644 index 0000000000..65c4cff2e5 --- /dev/null +++ b/Tests/LibWeb/Layout/input/image-display-block-margin-auto.html @@ -0,0 +1,11 @@ +<!doctype html><style> +body { + width: 400px; +} +img { + margin: 0 auto; + display: block; + width: 100px; + height: 100px; +} +</style><img/>
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp index fdd5df089e..af4d568d8e 100644 --- a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp @@ -210,6 +210,11 @@ void BlockFormattingContext::compute_width(Box const& box, AvailableSpace const& }; auto input_width = [&] { + if (is<ReplacedBox>(box)) { + // NOTE: Replaced elements had their width calculated independently above. + // We use that width as the input here to ensure that margins get resolved. + return CSS::Length::make_px(box_state.content_width()); + } if (is<TableWrapper>(box)) return CSS::Length::make_px(compute_width_for_table_wrapper(box, available_space)); if (should_treat_width_as_auto(box, available_space)) |