Commit graph

66 commits

Author SHA1 Message Date
Aliaksandr Kalenik
87f0e835eb LibWeb: Improve auto height calculation for tables
Change `compute_auto_height_for_block_level_element` to use max height
(`m_automatic_content_height` produced from TFC) for tables with auto
height which is more correct behaviour than treating them like block
containers.
2023-01-20 18:04:17 +01:00
Aliaksandr Kalenik
addfa4ed58 LibWeb: Include table intrinsic offsets in child boxes position
Table's border and padding should be taken in account while
calculating child boxes x and y offsets.
2023-01-20 18:04:17 +01:00
Aliaksandr Kalenik
9b6fcd8591 LibWeb: Stop using percentage column widths in compute_table_measures 2023-01-14 19:22:08 +01:00
Aliaksandr Kalenik
b44d977bf8 LibWeb: Propagate layout mode of table formatting context to table cells 2023-01-14 19:22:08 +01:00
Aliaksandr Kalenik
80578ead45 LibWeb: Table box width should be relative to wrapper containing block 2023-01-14 19:22:08 +01:00
Aliaksandr Kalenik
77a2b151ea LibWeb: Use table_box() to get root box in TFC
Introduce `table_box()` function that returns table formatting
context root box casted to `TableBox` similar to how it's done
in other formatting contexts like `root()` in BFC and
`flex_container` in FFC. And replace `context_box()` calls
in TFC with calls to `table_box()`.
2023-01-09 15:06:27 +01:00
Aliaksandr Kalenik
f26eed9633 LibWeb: Rename used_width to used_height in TFC row struct
Rename used_width to used_height because it is used
to store row height.
2023-01-09 15:06:27 +01:00
Aliaksandr Kalenik
0e1da540b6 LibWeb: Move cells positioning in separate function in TFC 2023-01-09 15:06:27 +01:00
Aliaksandr Kalenik
ea4937a457 LibWeb: Move rows positioning in separate function in TFC 2023-01-09 15:06:27 +01:00
Aliaksandr Kalenik
7d2a72d748 LibWeb: Move rows heights calculation in separate function in TFC 2023-01-09 15:06:27 +01:00
Aliaksandr Kalenik
e107c83a57 LibWeb: Remove inheritance of TableBox from BlockContainer
Fixup rule that table roots need to be wrapped in anonymous
block boxes need to be implemeted instead of having `TableBox`
inherited from `BlockContainer`.
2023-01-09 11:47:31 +01:00
Aliaksandr Kalenik
c8337e9ee8 LibWeb: Remove inheritance of TableRowGroupBox from BlockContainer
Having `TableRowGroupBox` not inherited from `BlockContainer`
allows to write more simpler layout code.
2023-01-09 11:47:31 +01:00
Aliaksandr Kalenik
a913410730 LibWeb: Consider span in table column width calculation
Implemention of following parts in CSS Tables 3 spec:
https://www.w3.org/TR/css-tables-3/#min-content-width-of-a-column-based-on-cells-of-span-up-to-n-n--1
https://www.w3.org/TR/css-tables-3/#max-content-width-of-a-column-based-on-cells-of-span-up-to-n-n--1
2023-01-07 14:59:56 +01:00
Aliaksandr Kalenik
b2a04ff48a LibWeb: Consider percent and fixed widths in table column distribution
Change column distribution to take in account is_length() and
is_percentage() width values instead of treating all cells like
they have auto width by implementing it in the way described
in CSS Tables 3 spec:
https://www.w3.org/TR/css-tables-3/#width-distribution-algorithm

distribute_width_to_column() is structured to follow schema:
w3.org/TR/css-tables-3/images/CSS-Tables-Column-Width-Assignment.svg
2023-01-06 12:01:46 +01:00
Aliaksandr Kalenik
21d89a2153 LibWeb: Use available space to resolve table cells width
It is not possible to use width of containing block to resolve
cells width because by the time compute_table_measures() is
called row width is not known yet.
2023-01-06 12:01:46 +01:00
Sam Atkins
8cc0bdf777 LibWeb: Resolve Lengths to CSSPixels 2023-01-05 17:42:31 +01:00
Sam Atkins
c70dcaefcd LibWeb: Convert LayoutState to new pixel units 2023-01-05 17:42:31 +01:00
Sam Atkins
700ba0007f LibWeb: Convert TableFormattingContext to new pixel units 2023-01-05 17:42:31 +01:00
Sam Atkins
f5f25562d1 LibWeb: Convert FormattingContext to new pixel units
Just FormattingContext and AvailableSpace, and the minor adjustments to
make everything else work.
2023-01-05 17:42:31 +01:00
martinfalisse
25a60f988a LibWeb: Conditionally draw borders for table elements
When the border-collapse property is given for a table with the
`collapse` property, only the inner borders should be drawn.
2023-01-03 20:02:47 +01:00
martinfalisse
25f612f32b LibWeb: Prevent column sizing errors for html table
Previously when there was no difference between the sum of the
max and min-widths of all columns of a table, it would result in a NaN
value being set as the column's width as there was a division by 0.

This would result in 2+ column tables being reduced to only 1 column.
2023-01-03 20:02:47 +01:00
Tom
3dccee6025 LibWeb: Fix table-row y-position
Fixes the y-position of rows when indicated through the display
attribute `table-row`. Previously there was no y-offset between rows and
so they would overlap.
2022-12-31 14:48:37 +01:00
Aliaksandr Kalenik
1a81521dd9 LibWeb: Consider specified cell widths in a table
This change makes outer min-content width and outer max-content
width for cells to be calculated in the way specifed in the spec:
- The outer min-content width of a table-cell is max(min-width,
min-content width) adjusted by the cell intrinsic offsets.
- The outer max-content width of a table-cell in a non-constrained
column is max(min-width, width, min-content width, min(max-width,
max-content width)) adjusted by the cell intrinsic offsets.
- The outer max-content width of a table-cell in a constrained
column is max(min-width, width, min-content width, min(max-width,
width)) adjusted by the cell intrinsic offsets.
2022-12-09 12:53:05 +01:00
Aliaksandr Kalenik
c302c4081b LibWeb: Layout table rows that do not belong to table row group 2022-12-09 12:53:05 +01:00
Aliaksandr Kalenik
ca123350cc LibWeb: Inherit TableFormattingContext from FC instead of BFC 2022-12-05 17:47:48 +01:00
Aliaksandr Kalenik
fae0b96fe4 LibWeb: Add vertical-align support for table cells 2022-12-05 17:47:48 +01:00
Aliaksandr Kalenik
2f38f8c84a LibWeb: Implement intrinsic width calculation for TFC 2022-12-05 17:47:48 +01:00
Aliaksandr Kalenik
dbf76e8ae1 LibWeb: Take rowspan into account while table formatting 2022-12-05 17:47:48 +01:00
Aliaksandr Kalenik
1c6783cd7e LibWeb: Start implementation of CSS Table 3 spec
Here I try to address bug where content of table overflows
it's width (hacker news is an example of such site) by
reimplementing some parts of table formatting context.

Now TFC implements first steps of:
https://www.w3.org/TR/css-tables-3/#table-layout-algorithm
but column width and row height distribution steps are
still very incomplete.
2022-12-05 17:47:48 +01:00
Andreas Kling
9c44634ca5 LibWeb: Reorganize layout algorithms around available space
This is a big and messy change, and here's the gist:

- AvaliableSpace is now 2x AvailableSize (width and height)

- Layout algorithms are redesigned around the idea of available space

- When doing layout across nested formatting contexts, the parent
  context tells the child context how much space is available for the
  child's root box in both axes.

- "Available space" replaces "containing block width" in most places.

- The width and height in a box's UsedValues are considered to be
  definite after they're assigned to. Marking something as having
  definite size is no longer a separate step,

This probably introduces various regressions, but the big win here is
that our layout system now works with available space, just like the
specs are written. Fixing issues will be much easier going forward,
since you don't need to do nearly as much conversion from "spec logic"
to "LibWeb logic" as you previously did.
2022-10-02 21:14:02 +02:00
Andreas Kling
f161e20e57 LibWeb: Make FormattingContext::run() take available space as input
Instead of formatting contexts flailing around to figure out from the
"inside" how much space is available on the "outside", we should
provide the amount of available space in both axes as an input to run().

This basically means that when something creates a nested formatting
context, the parent context is responsible for telling the nested context
how much space is available for layout. This information is provided
immediately when invoking run().

Note that this commit doesn't pass accurate values in all cases yet.
This first step just makes it build, and passes available values in some
cases where getting them was trivial.
2022-09-29 18:33:41 +02:00
Andreas Kling
62974160da LibWeb: Add FormattingContext::automatic_content_height()
This function should return the automatic height of the formatting
context's root box.

Until now, we've been relying on some magical handshakes between parent
and child context, when negotiating the height of child context root
boxes. This is a step towards something more reasonable.
2022-09-24 13:41:08 +02:00
Andreas Kling
ed8930fff5 LibWeb: Add accessors for UsedValues::computed_{width,height}
This is preparation for doing some more work when assigning to these
values.
2022-07-19 15:40:41 +02:00
Andreas Kling
52862c72d0 LibWeb: Rename FormattingState to LayoutState
This seems a bit more descriptive (and also a bit shorter).
2022-07-17 14:11:36 +02:00
Andreas Kling
64959a8504 LibWeb: Express intrinsic size layout via size constraints
Previously, we had three layout modes:

- Normal:
    - Everything uses the computed values from CSS.

- MinContent:
    - Containing blocks act as if they have 0 width.
    - All line breaking opportunities are taken.

- MaxContent:
    - Containing blocks act as if they have infinite width.
    - Only forced line breaks are accepted.

The above was based on a set of misunderstandings of CSS sizing.
A major problem with the above was that *all* containing blocks
behaved differently during intrinsic size layout, not just the
relevant one.

With this patch there are only two layout modes:

- Normal:
    - Everything uses the computed values from CSS.

- IntrinsicSizeDetermination:
    - One or more boxes have size constraints applied.

There are two size constraints per layout box, set here:

- FormattingState::NodeState::width_constraint
- FormattingState::NodeState::height_constraint

They are of type SizeConstraint and can be one of None, MinContent,
or MaxContent. The default is None.

When performing an IntrinsicSizeDetermination layout, we now assign
a size constraint to the box we're trying to determine the intrinsic
size of, which is then honored by using two new helpers to query
the dimensions of containing blocks:

- FormattingContext::containing_block_width_for(Box)
- FormattingContext::containing_block_height_for(Box)

If there's a relevant constraint in effect on the Box, the size of
its containing block is adjusted accordingly.

This is essentially an implementation of the "available space"
constraints from CSS-SIZING-3. I'm sure some things will break from
this, and we'll have to deal with that separately.

Spec: https://drafts.csswg.org/css-sizing-3/#available
2022-07-11 18:57:45 +02:00
Andreas Kling
496cf39cf5 LibWeb: Make separate functions for calculating min/max content sizes
At first, these are just wrappers around calculate_intrinsic_sizes().
Eventually, we'll make them do only the work necessary for their
specific size.
2022-07-11 18:57:44 +02:00
Andreas Kling
cefc931347 LibWeb: Make sure CSS::ComputedValues has initial size values
Instead of using Optional<LengthPercentage>, we now use LengthPercentage
for these values. The initial values are all `auto`.

This avoids having to check `has_value()` in a ton of places.
2022-07-09 22:16:35 +02:00
Simon Wanner
509362c103 LibWeb: Include all row-groups in column width calculations
This was noticeable for example on fonts.serenityos.net, where the
thead and tfoot would not get the same column widths as the tbody.
2022-04-03 23:12:13 +02:00
Simon Wanner
7e4793df63 LibWeb: Size table cells using a combination of min- and max-widths
This gets us a bit closer to the recommended algorithms in CSS 2.2 and
CSS Table Module 3.

A couple of table heavy websites (e.g. news.ycombinator.com,
html5test.com, etc.) now look quite okay. :^)
2022-03-29 00:39:57 +02:00
Simon Wanner
b92cc3670b LibWeb: Only size width: auto table-cells by min-content 2022-03-29 00:39:57 +02:00
Simon Wanner
304dbb0242 LibWeb: Set a cell's content width based on the column(s) it's in 2022-03-28 15:25:25 +02:00
Simon Wanner
6dbd00970d LibWeb: Calculate a cell's width using min-content 2022-03-28 15:25:25 +02:00
Simon Wanner
9b3229da17 LibWeb: Distribute the width of a table cell spanning multiple columns 2022-03-28 15:25:25 +02:00
Simon Wanner
4fe154bd6a LibWeb: Expand the last cell in a row to the right edge 2022-03-28 15:25:25 +02:00
Simon Wanner
5f265eebf5 LibWeb: Apply a table row's height to all cells 2022-03-28 15:25:25 +02:00
Karol Kosek
686507a38f LibWeb: Translate table cells by their top left border 2022-03-21 21:55:21 +01:00
Karol Kosek
20730c164c LibWeb: Include table cell border widths when calculating cell rects
Previously, table cells would overlap when they had CSS border or
padding properties defined.
2022-03-21 21:55:21 +01:00
Andreas Kling
c1f0d21bbe LibWeb: Rename the LayoutMode enum values and explain them
The old mode names, while mechanically accurate, didn't really reflect
their relationship to the CSS specifications.

This patch renames them as follows:

    Default => Normal
    AllPossibleLineBreaks => MinContent
    OnlyRequiredLineBreaks => MaxContent

There's also now an explainer comment with the LayoutMode enum about the
specific implications of layout in each mode.
2022-03-19 15:46:15 +01:00
Lenny Maiorani
c37820b898 Libraries: Use default constructors/destructors in LibWeb
https://isocpp.github.io/CppCoreGuidelines/CppCoreGuidelines#cother-other-default-operation-rules

"The compiler is more likely to get the default semantics right and
you cannot implement these functions better than the compiler."
2022-03-17 17:23:49 +00:00
Andreas Kling
89d0cb0ce2 LibWeb: Compute table cell height after doing its inside layout 2022-02-21 18:35:12 +01:00