LibWeb: Handle flex reverse and auto margins with justify-content #20200
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 2 commits
July 25, 2023 23:51
Containers with both flex reverse and justify content would sometimes place children outside the container. This happened because it assumed any reversed container would have items aligned to the right, which isn't true when using eg. `flex-end`. Both `justify-content: start` and `justify-content: end` are now also independent of the reverseness.
Auto margins used together with justify-content would previously result in children being positioned outside their parent. This was solved by letting auto margins take precedence when they are used, which was already implemented to some extent before, but not fully.
github-actions
bot
added
the
👀 pr-needs-review
|
Woops one problem. |
github-actions
bot
removed
the
👀 pr-needs-review
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This fixes layout issues related to row-reverse and column-reverse, as well as children being positioned outside of their parent when the parent has justify-content and the child has auto margin(s).
This is my first time playing around with serenity (and browser dev), so I apologize if I got something wrong! Hopefully I'm not way off 🙂
Before
LibWeb
justify-content on the parent and auto margins on the children
Chromium
After
LibWeb