- Instead of treating captions as a `BlockFormattingContext`, treat it as
a `NonReplacedFormattingContext`, which allows reusing flow layout for
captions -- fixing some issues with sizing.
- Pass in the proper size of the containing block when laying out,
fixing margin calculation.
- Follow the unspecified rules about how various size properties on
captions affect their size.
- Improve linebreaking around atomics, which is tested by
caption-related tests. This fixes intrinsic size calculation regarding
soft wrap opportunities around atomic and also makes the code making
these actual soft wrap opportunities a bit better.
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Mukilan Thiyagarajan <mukilan@igalia.com>
For example:
```html
<table border="1">
<tr> <td></td> <td></td> </tr>
<tr> <td colspan="2"></td> </tr>
</table>
```
We should initially size the columns according to the cells in the first
row since they have a span of 1. Then we handle the cell in the second
row with a span of 2, this should be able to increase the size of the
columns, but never decrease them.
`<br>` elements are a bit "special" in the sense that they defer a
linebreak, but can also have `clear` applied to them. The `clear` that
they supply should be applie *after* the linebreak is processed. This
change adds special processing for this situation.
Fixes#15402.
* Fix size of tables in flow layout
The contents of a table can make it bigger than what we would expect
from its 'width', 'min-width', 'height' and ' min-height' properties.
Also, 'width: auto' doesn't stretch it to fill the containing block.
We had to refactor the resolution of margins to happen after layout,
otherwise 'auto' margins wouldn't align correctly.
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
* Feedback
* Consistently use `containing_block_for_table` in table layout
* Update test result
---------
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
This change adds a version of row height distribution that follows the
distribtuion algorithm used for tables in Blink's LayoutNG. This is just
an intermediate step toward implementing a distribution algorithm for
both rows and columns more similar to Layout NG.
The CSS Table 3 specification is often wrong with regard to web
compatability, which is why we have abandoned it in favor of the Layout
NG algorithm for row height distribution. this work.
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This implements a very naive row height allocation approach. It has just
enough to implement `vertical-align` in table cells. Rowspanned cells
get enough space for their content, with the extra space necessary being
allocated to the last row. There's still a lot missing here, including
proper distribution of row height to rowspanned cells.
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This adds support for table `border-spacing` property. Note that we do
not yet support the collapsed border model.
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
* layout: Add *very* basic support for table layout
This is the first step to proper table layout. It implements a naive
layout algorithm, notably only taking into account the preferred widths
of the first table row. Still, it causes some float tests to start
passing, so turn on the `layout.tables.enabled` preference for those
directories.
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
* Address review comments
* Fix a crash with rowspan=0
* Turn on pref and update results for `/css/css-tables` and `/css/CSS2/tables`
---------
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
* layout: Implement support for `line-height` and `vertical-align`
This is an initial implementation of proper `line-height` and
`vertical-align` support. While this change includes the bulk of the
work there are still many missing pieces for full support. In particular
some big missing things are:
- Flex containers do not properly compute their baselines. The idea is
to tackle this in a followup change. This causes various flex tests
to start failing because everything used to be top aligned.
- The implementation of the line-height quirks (only active in quirks
mode) are incomplete. While the quirk works in many cases, there are
still some cases where it is handled incorrectly. This requires more
redesign and refinement, better suited for a followup.
- Most of the features are CSS 3 such as precision control of the
baseline and first and last baselines are not implemented. This
change gets us close to CSS 2.x support.
While there are many new test passes with this change some tests are
starting to fail. An accounting of new failures:
Tests failing also in Layout 2013:
- /css/css2/positioning/toogle-abspos-on-relpos-inline-child.html (only passes in Chrome)
- /css/CSS2/fonts/font-applies-to-001.xht (potentially an issue with font size)
Invalid tests:
- /css/CSS2/visudet/inline-block-baseline-003.xht
- /css/CSS2/visudet/inline-block-baseline-004.xht
- These are are failing in all browsers. See https://bugs.chromium.org/p/chromium/issues/detail?id=1222151.
Missing table support:
- /_mozilla/mozilla/table_valign_middle.html
Missing `font-size-adjust` support :
- /css/css-fonts/font-size-adjust-zero-2.html (also failing in 2013)
Incomplete form field support :
- /html/rendering/widgets/the-select-element/option-add-label-quirks.html (label isn't rendered so button isn't the right size in quirks mode due to line height quirk)
Need support for calculating flexbox baseline:
- /css/css-flexbox/fieldset-baseline-alignment.html
- /css/css-flexbox/flex-inline.html
- /css/css-flexbox/flexbox-baseline-multi-line-horiz-001.html
- /css/css-flexbox/flexbox-baseline-single-item-001a.html
- /css/css-flexbox/flexbox-baseline-single-item-001b.html
Failing because we don't create anonymous inline boxes for text children of blocks:
- /css/CSS2/linebox/anonymous-inline-inherit-001.html
Passes locally (potentially related to fonts):
- /css/CSS2/css1/c414-flt-fit-004.xht
- /css/css-transforms/transform-input-017.html
- /html/obsolete/requirements-for-implementations/the-marquee-element-0/marquee-min-intrinsic-size.html
- /css/css-fonts/first-available-font-005.html
- /css/css-fonts/first-available-font-006.html
* Some cleanups after live review with @mukilan
Also update results.
They are not transitionable:
https://drafts.csswg.org/css-transitions-1/#transitionable
There are some new failures in background-image-interpolation.html,
but I think the test is wrong, because it expects background-image
to be transitionable, even though the spec defines it with a discrete
animation type.
After placing a float, FloatBox's layout_into_line_items() was calling
place_line_among_floats() with ifc.current_line.inline_position as the
width of needed by the contents of the line.
The problem is that this amount includes the trailing whitespace advance
and thus it could seem that the in-flow contents wouldn't fit next to
the float.
That's not the case, since collapsible whitespace at the end of the line
is removed, and preserved whitespace hangs.
So this patch subtracts ifc.current_line.trailing_whitespace_advance
when calling place_line_among_floats(), like it was already happening
when computing the available_inline_size.
Fixes#30561
This implements the rest of the bulk of float support. Now inline
element flow around floats and floats can be pushed down by inline
elements before them.
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
In the first phase, we gather LineItems and then when we have enough to
form a line we turn them into Fragments. This will make it possible to
more simply implement `vertical-align` and `text-align: justify` because
we need to measure the different aspects of the candidate line and then
produce a Fragments.
This is a general refactor of the way that inline layout works, so comes
with some progressions. In addition there are some new failures.
New failures:
Some tests are now failing because only the test or reference is getting
proper line height when it wasn't before. These should be fixed in a
followup change that properly calculate line-height in more cases:
- /_mozilla/css/list_style_position_a.html
- /css/CSS2/floats/float-no-content-beside-001.html
- /css/css-content/pseudo-element-inline-box.html
- /css/css-flexbox/flexbox_flex-none-wrappable-content.html
Some tests are now failing because floats are now placed properly, but
are no longer in their inline box stacking contexts. These will be fixed
by a followup change which properly parents them:
- /css/filter-effects/filtered-inline-applies-to-float.html.ini
- /css/css-color/inline-opacity-float-child.html.ini
One test is failing due to floating point precision errors:
- /css/CSS2/floats-clear/floats-141.xht.ini
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Mukilan Thiyagarajan <mukilan@igalia.com>
* Add initial support for css-text-3 whitespace handling
This adds initial support for whitespace handling from the CSS
specification for Layout 2020. In general, the basics are covered. Since
test output is very sensitive to whitespace handling, this change
incorporates several fixes:
1. Whitespace is collapsed according to the Phase 1 rules of the
specification, though language-specific unbreaking rules are not
handled properly yet.
2. Whitespace is mostly trimmed and positioned according to the Phase 2
rules, but full support for removing whitespace at the end of lines
is pending on a temporary data structure to hold lines under
construction.
3. Completely empty box fragments left over immediately after line
breaks are now trimmed from the fragment tree.
4. This change tries to detect when an inline formatting context
collapses through.
Fixes#29994.
Co-authored-by: Mukilan Thiyagarajan <me@mukilan.in>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
* Update test results
---------
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Mukilan Thiyagarajan <me@mukilan.in>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
* Place replaced and non-auto inline size independent FCs next to floats
The CSS2 specification says that replaced content and independent
formatting contexts should be placed next to floats. This change adds
support for that, but punts on support for independent formatting
contexts that have an auto inline size. With an auto inline size, we
which requires a much more complex layout algorithm.
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
* Fix issue with where last band was taken into account for inline size
* adjustment_from_floats should prevent margin collapse
* Properly handle elements with 0 height
---------
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
Layout 2020: Properly calculate clearance
<!-- Please describe your changes on the following line: -->
calculate_clearance() was not taking into account that adding clearance prevents top margin from collapsing with earlier margins.
---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `___` with appropriate data: -->
- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors
- [X] These changes fix#29885 and #29919
- [X] There are tests for these changes
<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->
<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->
layout_2020: Do linebreak for atomic inline-level elements
<!-- Please describe your changes on the following line: -->
---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `___` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] These changes fix#29591 (GitHub issue number if applicable)
<!-- Either: -->
- [x] There are tests for these changes OR
<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->
<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->
Margins should be able to collapse through floats when collapsing with
parent blocks (the containing block). To properly place floats in this
situation, we need to look at these subsequent floats to find out how
much of the margin will collapse with the parent.
This initial implementation is very basic and the second step would be
to cache this in order to avoid having to constantly recalculate it.
Fixes#29915.
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
