Commit Graph

843 Commits

Author SHA1 Message Date
martinfalisse
937fcfc75c LibWeb+Base: Use line names for positioning grid items
When there are grid tracks with line names, use these to resolve
line-names passed to positioned grid items.
2022-11-01 11:19:41 +01:00
martinfalisse
93211f45a6 LibWeb: Use w3.org for specs and include new ones
Include new w3.org specs for the grid and correct others so they use
w3.org instead of drafts.
2022-11-01 11:19:41 +01:00
martinfalisse
b2b677e984 LibWeb: Refactor GridTrackSize classes
Refactor various classes in the GridTrackSize file for the incoming
named_tracks feature.

Previously the ExplicitTrackSizing had mixed responsiblities with the
newly-named GridRepeat class. This made it so it was not possible to
have multiple repeats within a single 'GridTrackSizeList' definition.

The MetaGridTrackSize class had both the responsibilities of being a
container for minmax values as well as for simple GridSizes. By uniting
the different possible values (repeat, minmax, default) into the
ExplicitGridTrack class are able to be more expressive as to the
different grid size modalities.

The GridTrackSizeList will be useful as compared to a
Vector<ExplicitGridTrack> since this way can keep track of the declared
line names. These same line names are able to be declared within the
values of a repeat function, hence the presence of a GridTrackSizeList
inside the GridRepeat class.
2022-11-01 11:19:41 +01:00
martinfalisse
9441515312 LibWeb: Rename GridTrackSizedConstraints
In order to avoid naming conflicts with the many trial-and-error name
changes going on in the GridTrackSize file, rename this to a unique name
that is unlikely to be troublesome.
2022-11-01 11:19:41 +01:00
martinfalisse
dc9f8218a9 LibWeb: Fix bug in placing grid items
Before were resetting the auto_placement_cursor_x to 0 at the end of
the row but this was incorrect, especially since the
auto_placement_cursor_y wasn't being incremented.

This made it so that auto-placed items were occasionally placed before
absolutely-placed ones even after the latter had already been placed.
2022-11-01 11:19:41 +01:00
Andreas Kling
27b63feae5 LibWeb: Always resolve horizontal padding and borders on block-level boxes
We were neglecting to resolve the used horizontal padding and border
properties on block-level boxes when treating their width as `auto`
during intrinsic sizing.

This led to padding and border not contributing to the intrinsic width
of their containing block
2022-10-27 13:02:27 +02:00
Andreas Kling
4580e054f5 LibWeb: Place block-level boxes in both axes before doing inside layout
This ensures that static position calculations has access to final
box offsets.
2022-10-27 13:02:27 +02:00
Andreas Kling
3e10293047 LibWeb: Implement static position for abspos children of flex container 2022-10-27 13:02:27 +02:00
Luke Wilde
488a979306 LibWeb: Layout inner floats/abspos boxes after laying out the top float
Calling parent_context_did_dimension_child_root_box immediately after
laying out the inside of the floating box is not correct, as we haven't
worked out the dimensions of the floating box yet.

In particular, this caused the icons in the top bar of Cookie Clicker
to not hug the top of the viewport. This is because the icons are
absolutely positioned elements inside a floating element which has
padding applied to it. Since we laid out the abspos element before
the floating element, it got padding values of 0 from the parent, the
default value, meaning it didn't take away the padding of it's floating
parent.

This follows how abspos boxes layout their inside boxes as well.
2022-10-24 21:12:19 +02:00
Luke Wilde
8ace6b4f1d LibWeb: Establish stacking context when backdrop-filter is not 'none' 2022-10-24 18:05:58 +02:00
Andreas Kling
faba3ebfca LibWeb: Don't create stacking contexts for all positioned elements
We were mistakenly creating stacking contexts for all elements with
non-static CSS position.

For `absolute` and `relative`, we should only create stacking contexts
if the `z-index` value is something other than `auto`.

This makes it possible to click the cookie on Cookie Clicker. :^)
2022-10-23 23:32:42 +02:00
Andreas Kling
1885fe529f LibWeb: Add GC finalizer to Layout::ImageBox
It's not safe to unregister ImageBox from the browsing context in the
destructor (since the browsing context may have already been swept and
destroyed).
2022-10-20 19:36:59 +02:00
Andreas Kling
6d830e6335 LibWeb: Tie layout tree to a specific browsing context
Now that both the layout tree and browsing context are GC-allocated,
we can formalize their relationship a bit better by having layout
nodes keep a NonnullGCPtr to the browsing context.

This makes the previously-indirect link direct, removing an unpleasant
"how do we know the browsing context is alive" question when accessing
it from the layout tree.
2022-10-20 19:36:59 +02:00
Andreas Kling
268b9c5d90 LibWeb: Make the layout tree GC-allocated
This removes a set of complex reference cycles between DOM, layout tree
and browsing context.

It also makes lifetimes much easier to reason about, as the DOM and
layout trees are now free to keep each other alive.
2022-10-20 15:16:23 +02:00
Andreas Kling
be5a39657e LibWeb: Only store one DOM pointer per Layout::Node
Instead of storing two JS::Handles into the DOM, we can combine them
into a single one.

If the layout node is anonymous, m_dom_node points to the DOM::Document.
Otherwise, m_dom_node points to the associated DOM node.

The anonymous state is moved to an m_anonymous boolean member.

This cuts the number of JS::Handles created by the layout tree in half
(and shrinks Layout::Node by 8 bytes).
2022-10-20 15:16:23 +02:00
Johannes Laudenberg
2547e0b966 LibWeb: Use calculate_min_content_height() for sizing of grid children
When sizing grid children we now also check whether
calculate_min_content_height() adds to the computed height. Previously
we were using the result of layout_inner() which led to zero height of
not specifically sized block level children.

This fixes a height issue with our GitHub page. The footer is now at
its place and is not hovering over other content anymore.
2022-10-18 12:55:34 +02:00
martinfalisse
bd9ec60305 LibWeb: Implement minmax()
On the basis of the values passed to the minmax functions, do different
actions given different min and max grid track sizes.
2022-10-15 16:04:01 +02:00
martinfalisse
53f3df78e5 LibWeb: Implement auto-fill and auto-fit
Implement auto-fill and auto-fit for the grid, which allow for placing
as many columns as will fit within a given container size.
2022-10-15 16:04:01 +02:00
martinfalisse
4745a0c20a LibWeb: Implement more of the grid spec
This is a small change that implements more of the CSS Grid spec.
2022-10-15 16:04:01 +02:00
martinfalisse
202620e80c LibWeb: Refactor GridTrack maintenance in the GFC
Refactor the m_grid_columns and m_grid_rows to be maintained in the
class, which will make it easier to later create functions relating to
them.
2022-10-15 16:04:01 +02:00
martinfalisse
f7bd1edde3 LibWeb: Calculate the height of the css grid correctly
Enable the CSS grid height to be calculated correclly.
2022-10-15 16:04:01 +02:00
martinfalisse
b6a29ae9e2 LibWeb: Use w3 instead of drafts for spec
Add more specs to the CSS Grid class and update others so as to use
w3.org instead of the drafts website.
2022-10-15 16:04:01 +02:00
martinfalisse
f7af190de0 LibWeb: Add parent classes for managing GridTrackSizes
Add classes ExplicitTrackSizing and MetaGridTrackSize which will allow
for managing properties like auto-fill and minmax.

In the following CSS example there are 3 classes that will be used:
grid-template-column: repeat(auto-fill, minmax(50px, 1fr) 75px);

ExplicitTrackSizing - will contain the entire value. e.g.
repeat(auto-fill, minmax(50px, 1fr) 75px)

With a flag if it's a repeat, as well as references to the
MetaGridTrackSizes which is the next step down.

MetaGridTrackSize:
Contain the individual grid track sizes. Here there are two:
minmax(50px, 1fr) as well as 75px.

This way can keep track if it's a minmax function or not, and the
references to both GridTrackSizes in the case it is, or in just the one
if it is not.

GridTrackSize:
Is the most basic element, in this case there are three in total; two of
which are held by the first MetaGridTrackSize, and the third is held by
the second MetaGridTrackSize.
Examples: 50px, 1fr and 75px.
2022-10-15 16:04:01 +02:00
Andreas Kling
6d18164ab0 LibWeb: Apply min-width and max-width constraints to inline-block boxes 2022-10-15 14:10:30 +02:00
Andreas Kling
b289f97a65 LibWeb: Split intrinsic heights cache by definite available widths
As it turns out, we sometimes query the intrinsic height of a box before
having fully resolved and/or constrained its containing block. Because
of this, we may enter intrinsic sizing with different amounts of
available width for the same box.

To accommodate this scenario, we now allow caching of multiple intrinsic
heights, separated by the amount of available width provided as input.
2022-10-15 14:01:54 +02:00
Andreas Kling
869b322a8f LibWeb: Assign hypothetical flex item main sizes as temporary main size
This colors a bit outside the lines of the specification, but the spec
doesn't offer a proper explanation for how descendants of a flex item
are supposed to have access to the flex item's main size for purposes
of percentage resolution.

The approach I came up with here was to take the hypothetical main size
of each flex item, and assign it as a temporary main size. This allows
percentage resolution in descendants to work against the pre-flexing
main size of items. This seems to match how other engines behave,
although it feels somewhat dirty. If/when we learn more about this,
we can come up with something nicer.
2022-10-15 14:01:54 +02:00
Andreas Kling
27a7c5ef40 LibWeb: Implement CSS fit-content algorithm precisely as spec says
We were using the available space in place of the stretch-fit size.
This was an oversight, and this patch fixes that. It's very possible
that this will uncover broken behavior elsewhere.
2022-10-14 19:53:52 +02:00
Andreas Kling
d7d8e3c78b LibWeb: Resolve *all* percentages in abspos height calculation
We were neglecting to resolve() percentages for many values.
2022-10-14 19:52:07 +02:00
Andreas Kling
834d98520a LibWeb: Implement basic support for align-content in flex layout
This property tells us how to lay out multi-line flex containers.
I implemented all modes except `space-between` and `space-around`.
Those are left as FIXMEs.
2022-10-14 19:50:15 +02:00
Andreas Kling
f8a2c0586a LibWeb: Parse the CSS align-content property 2022-10-14 19:50:15 +02:00
Andreas Kling
b062a0fb7c LibWeb: Make TextNode::ChunkIterator emit an empty chunk for content:""
This ensures that we create a line box for content:"", which would
otherwise get pruned by the empty line cleanup in IFC.

The empty line box is important in this case, since it gives us a
reference point for measuring the automatic height of the IFC's
containing block. By having an empty line, we can now correctly measure
the impact of vertical margins on a generated box with content:""
and allow them to contribute to the block height.
2022-10-14 19:50:15 +02:00
Andreas Kling
c70801ddbc LibWeb: Don't treat content: "" as collapsible whitespace
I couldn't find anything in specs about this, but it seems to be roughly
consistent with other engines.
2022-10-14 19:50:15 +02:00
Andreas Kling
4ddfc3a6db LibWeb: Mark content: "string" text nodes as generated
This will allow us to give them special treatment, particularly when
they are an empty string.
2022-10-14 19:50:15 +02:00
Andreas Kling
063d6cab8b LibWeb: Remove unused Layout::TextNode::ChunkIterator::m_layout_mode 2022-10-14 19:50:15 +02:00
Andreas Kling
42538b5375 LibWeb: Fix bogus inline-block check in line box layout
When checking if a line box fragment "isn't just dumb inline content",
we were checking "is replaced or inline-block". What we really need to
be checking is "is replaced or inline-outside-but-not-flow-inside".
So now we check that.

This fixes an issue where inline-flex boxes were given incorrect extra
height due to being treated as regular text for purposes of line height
calculation.
2022-10-14 19:50:14 +02:00
Andreas Kling
20711c76b7 LibWeb: Apply min/max constraints to sizes that are initially definite
Also add a comment explaining how we determine initial definite sizes.
2022-10-14 19:50:14 +02:00
Andreas Kling
7f6ba8b910 LibWeb: Clamp flex item's automatic cross sizes to min/max sizes
This takes care of an old FIXME.
2022-10-14 19:50:14 +02:00
Andreas Kling
13792e572c LibWeb: Mark percentage heights as initially definite when appropriate
Percentage heights are now considered definite when their containing
block has a definite height. This makes profile pictures have geometry
on Twitter. (We still don't load the images themselves though.)
2022-10-14 19:50:14 +02:00
Timon Kruiper
8373a14835 LibWeb: Remove code duplication in computing height for abs-pos elements
This refactors the solve_for_{top, bottom, height, etc} lambdas to use a
common solve_for lambda that takes the length to be solved as an
argument. This way some code duplication is removed.
2022-10-12 11:08:29 +02:00
Samuel Bowman
ca0a0b7a93 LibWeb: Add missing else's in absolutely positioned height computation
Rules 1, 2, and 3 use else if, so rules 4, 5, and 6 should too.
2022-10-12 10:32:57 +02:00
Andreas Kling
e6de382679 LibWeb: Constrain abspos element heights by min-height and max-height 2022-10-11 22:31:51 +02:00
Andreas Kling
0e295f727a LibWeb: Fix dumb typos in solver helpers for abspos height 2022-10-11 22:23:13 +02:00
Andreas Kling
84953c5020 LibWeb: Calculate height of absolute-position elements according to spec
This patch implements the full "old model" height algorithm from the
CSS Positioned Layout spec. I went with the old model since we don't
yet have the machinery required to implement the new model.

Also, the width calculations already follow the old model, so this
is symmetric with that. Eventually we should of course implement the new
positioned layout model.
2022-10-11 21:49:48 +02:00
Andreas Kling
0f2d5f91dc LibWeb: Fix two uninitialized variables in FormattingContext 2022-10-10 23:42:35 +02:00
Andreas Kling
b945d164e2 LibWeb: Split intrinsic heights cache based on available width
Now that intrinsic heights (correctly) depend on the amount of available
width, we can't just cache the first calculated min-content and
max-content heights and reuse it without thinking.

Instead, we have to cache three pairs:

- min-content & max-content height with definite available width
- min-content & max-content height with min-content available width
- min-content & max-content height with max-content available width

There might be some more elegant way of solving this, but basically this
makes the cache work correctly when someone's containing block is being
sized under a width constraint.
2022-10-10 20:22:50 +02:00
Andreas Kling
4b74f36cd0 LibWeb: Resolve vertical margins against containing block width
We were incorrectly resolving them against the available width, which
may or may not be the same as the containing block width.

The specification for these properties says that percentages resolve
against the containing block width, so that's what we should do.
2022-10-10 20:22:50 +02:00
Andreas Kling
47e3daa40f LibWeb: Use *outside* available space for fit-content sizing in FFC
When calculating the fit-content width or height for a flex item, we
need to use the available space *outside* the item, not the available
space *inside*.
2022-10-10 20:22:50 +02:00
Andreas Kling
4a17e8713b LibWeb: Update FFC for spec change to intrinsic min-content cross size
We now know exactly how to calculate the min-content cross size for
multi-line flex containers, which is great. The other three intrinsic
constraints still fall back to the old ad-hoc code path.

5630e7b064
2022-10-10 20:22:50 +02:00
MacDue
0265041d44 LibWeb: Fix ::-webkit-progress-bar/value pseudo elements
Recent changes to layout and display broke these pseudo elements
leading to crashes on a few websites such as https://rpcs3.net/.
2022-10-09 10:11:37 +02:00
martinfalisse
e537035cc6 LibWeb+Base: Deal with column-spans greater than implicit grid
When the indicated column-span is greater than the implicit grid (like
in cases when the grid has the default size of 1x1, and the column is
supposed to span any number greater than that), then previously were
crashing.
2022-10-08 17:26:41 +02:00