Commit graph

45 commits

Author SHA1 Message Date
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
Andreas Kling
db5bf6e64c LibWeb: Rename FormattingState::ensure() -> get_mutable()
This makes it much more obvious what the difference between get() and
get_mutable() is.
2022-02-21 18:35:12 +01:00
Andreas Kling
c9700e100e LibWeb: Start making our layout system "transactional"
This patch adds a map of Layout::Node to FormattingState::NodeState.
Instead of updating layout nodes incrementally as layout progresses
through the formatting contexts, all updates are now written to the
corresponding NodeState instead.

At the end of layout, FormattingState::commit() is called, which
transfers all the values from the NodeState objects to the Node.

This will soon allow us to perform completely non-destructive layouts
which don't affect the tree.

Note that there are many imperfections here, and still many places
where we assign to the NodeState, but later read directly from the Node
instead. I'm just committing at this stage to make subsequent diffs
easier to understand.
2022-02-21 18:35:12 +01:00
Andreas Kling
561612f219 LibWeb: Add Layout::FormattingState
The purpose of this new object will be to keep track of various states
during an ongoing layout.

Until now, we've been updating layout tree nodes as we go during layout,
which adds an invisible layer of implicit serialization to the whole
layout system.

My idea with FormattingState is that running layout will produce a
result entirely contained within the FormattingState object. At the end
of layout, it can then be applied to the layout tree, or simply queried
for some metrics we were trying to determine.

When doing subtree layouts to determine intrinsic sizes, we will
eventually be able to clone the current FormattingState, and run the
subtree layout in isolation, opening up opportunities for parallelism.

This first patch doesn't go very far though, it merely adds the object
as a skeleton class, and makes sure the root BFC has one. :^)
2022-02-21 18:35:12 +01:00
Sam Atkins
356d8bcfe8 LibWeb: Remove Length::Type::Undefined! :^) 2022-02-18 19:04:37 +01:00
Sam Atkins
5b2482a939 LibWeb: Use Optional instead of undefined-lengths for widths/heights 2022-02-18 19:04:37 +01:00
Andreas Kling
0608de8c12 LibWeb: Rename Layout::Box::size() to content_size()
This property represents the CSS content size, so let's reduce ambiguity
by using the spec terminology.

We also bring a bunch of related functions along for the ride.
2022-02-06 01:07:47 +01:00
Sam Atkins
dc681913e8 LibWeb: Convert width/height and min-/max- versions to LengthPercentage
A lot of this is quite ugly, but it should only be so until I remove
Length::Type::Percentage entirely. (Which should happen later in this
PR, otherwise, yell at me!) For now, a lot of things have to be
resolved twice, first from a LengthPercentage to a Length, and then
from a Length to a pixel one.
2022-01-20 00:04:10 +01:00
Sam Atkins
7196570f9b LibWeb: Cast unused smart-pointer return values to void 2021-12-05 15:31:03 +01:00
Andreas Kling
7c57961c61 LibWeb: Move BrowsingContext into HTML/
Browsing contexts are defined by the HTML specification, so let's move
them into the HTML directory. :^)
2021-11-18 21:11:30 +01:00
Andreas Kling
df3cd2fd56 LibWeb: Treat width:auto on tables as fit-content
Tables, unlike other block-level elements, should not stretch to fit
their containing block by default.
2021-10-28 16:06:08 +02:00
Andreas Kling
f73aa8e2bd LibWeb: Move line boxes from Layout::Box to BlockContainer
Per the spec, only a BlockContainer" can have line boxes, so let's not
clutter up every Layout::Box with line boxes.

This also allows us to establish an invariant that BFC and IFC always
operate on a Layout::BlockContainer.

Note that if BlockContainer has all block-level children, its line boxes
are not used for anything. They are only used in the all inline-level
children scenario.
2021-10-06 21:53:25 +02:00
Andreas Kling
4190fd2199 LibWeb: Rename Web::Frame to Web::BrowsingContext
Our "frame" concept very closely matches what the web specs call a
"browsing context", so let's rename it to that. :^)

The "main frame" becomes the "top-level browsing context",
and "sub-frames" are now "nested browsing contexts".
2021-05-30 12:39:53 +02:00
Brian Gianforcaro
1682f0b760 Everything: Move to SPDX license identifiers in all files.
SPDX License Identifiers are a more compact / standardized
way of representing file license information.

See: https://spdx.dev/resources/use/#identifiers

This was done with the `ambr` search and replace tool.

 ambr --no-parent-ignore --key-from-file --rep-from-file key.txt rep.txt *
2021-04-22 11:22:27 +02:00
Adam Hodgen
b9c6059984 LibWeb: Correctly calculate height of TableRowGroupBox
As well as correctly calculating the height of TableRowBox, this change
calculates the heights of TableRowGroupBoxs also.

As before, this does not correctly take into consideration the 'height'
attribute.

Now the horizontal layout is approximately correct for the
TableRowGroupBoxs we can now see that the `layout_row` method will need
updating to correctly calculate cell width across all rows, not just the
current TableRowGroupBox.
2021-04-19 12:26:05 +02:00
Andreas Kling
9de1253f44 LibWeb: Remove a whole bunch of unnecessary #includes 2021-02-10 09:13:29 +01:00
Andreas Kling
13d7c09125 Libraries: Move to Userland/Libraries/ 2021-01-12 12:17:46 +01:00
Renamed from Libraries/LibWeb/Layout/TableFormattingContext.cpp (Browse further)