When computing the intrinsic block size of a replaced element with a
computed preferred inline size of `auto`, instead of transferring the
final inline size through the aspect ratio, we were only transferring
the min and max constraints.
We did this to match other browsers, but Ian Kilpatrick agreed that this
is a bug and plans to change Blink.
CSSWG issue: https://github.com/w3c/csswg-drafts/issues/11236
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
If an absolutely position element which is replaced has `justify-self`
or `align-self` set to `stretch`, and no inset is `auto` on that axis,
then an automatic size should behave as `stretch`, not as `fit-content`.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
The containing block for children already has the size coming from the
style and the rules of the parent formatting context, so no need to try
to recompute it.
This allows removing a bunch of functions, and fixes some problems when
the table is a flex item.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
A box is usually sized by the formatting context in which it participates.
However, tables have some special sizing behaviors, and these were in
conflict.
Instead of letting tables attempting to re-resolve their inline table,
which failed to e.g. take flex properties into account or resolve sizing
keywords correctly, now tables will trust the inline size determined by
the parent. They will only floor it by the min-content size, and maybe
shrink the final size due to collapsed columns.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
* Add missing support for some alignment keywords on absolutely positioned elements
Signed-off-by: taniishkaaa <tanishkasingh2004@gmail.com>
* Check the direction of the alignment container, nits, test expectations
In this case we need to check the direction of the static position
containing block, not the actual containing block:
```html
<!DOCTYPE html>
<div style="position: relative">
<div style="display: flex; flex-direction: column; width: 100px; height: 100px; border: solid; direction: rtl">
<div style="position: absolute; width: 20px; height: 20px; background: cyan; top: 20px; align-self: self-start"></div>
<div style="position: absolute; width: 20px; height: 20px; background: magenta; bottom: 20px; align-self: self-end"></div>
</div>
</div>
```
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
---------
Signed-off-by: taniishkaaa <tanishkasingh2004@gmail.com>
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
* Support justify-self on absolutely positioned elements
Signed-off-by: L Ashwin B <lashwinib@gmail.com>
* updating test expectations
Signed-off-by: L Ashwin B <lashwinib@gmail.com>
---------
Signed-off-by: L Ashwin B <lashwinib@gmail.com>
This change removes the `effective_writing_mode` concept and tries to
properly implement right-to-left layout support for all non-inline
writing modes. In general, what needs to happen is that rectangles
need to be converted to physical rectangles using the containing block.
A right-to-left rectangle's inline start is on the right physical side
of the containing block. Likewise a positive inline offset in
right-to-left text is a negative physical one.
The implementation here is pretty good for most layout modes, but floats
are still a bit in process. Currently, floats are processed in the
logical layout of the block container, but there still might be issues
with float interaction with mixed RTL and LTR.
While this does move us closer to supporting vertical writing modes,
this is still unsupported.
New failures:
- Vertical writing mode not supported:
- `/css/CSS2/floats/floats-placement-vertical-001b.xht`
- `/css/CSS2/floats/floats-placement-vertical-001c.xht`
- Absolutes inlines should avoid floats (#33323)
- `/css/css-position/position-absolute-dynamic-static-position-floats-004.html`
- No support for grid
- `/css/css-align/self-alignment/self-align-safe-unsafe-grid-003.html`
- `/css/css-position/static-position/inline-level-absolute-in-block-level-context-009.html`
- `/css/css-position/static-position/inline-level-absolute-in-block-level-context-010.html`
- Cannot reproduce these locally on any platform. Very mysterious:
- `/css/css-tables/row-group-margin-border-padding.html`
- `/css/css-tables/row-margin-border-padding.html`
- Exposes bugs we have related to hanging whitespace in preserved
whitespace inlines:
- `/css/css-text/white-space/trailing-space-and-text-alignment-rtl-003.html`
- `/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-023.html`
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Rakhi Sharma <atbrakhi@igalia.com>
This implements the requirements outlined in the [flexbox specification]
about how to position absolute children of flex containers. We must
establish a static position rectangle (to use if all insets are auto)
and also align the child into that rectangle.
[flebox specification]: https://drafts.csswg.org/css-flexbox/#abspos-items
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
When inline atomics establish containing blocks for absolute
descendants, layout should happen with those atomics as the containing
block. This ensures that the absolute descendents have the correct
containing block and Fragment parent. This wasn't happening before and
this change fixes that.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
