1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 10:48:11 +00:00
Commit graph

360 commits

Author SHA1 Message Date
Aliaksandr Kalenik
775742b35d LibWeb: Add support for horizontal margins of grid items in GFC 2023-06-08 07:14:47 +02:00
Aliaksandr Kalenik
0177e4e6ba LibWeb: Consider all spanned tracks while finding extra space in GFC
This fixes the issue when functions that distribute base_size
or growth_limit to tracks only considered *affected* spanned tracks
while calculating left extra that is available for distribution while
indeed it should be just *all* spanned track by specific item that
extra space size.
2023-06-07 19:44:47 +02:00
Aliaksandr Kalenik
3b3ade0b8d LibWeb: Use none as initial value for grid-template-column/rows
This fixes the issue that currently we use "auto" as initial value for
grid-template-column and grid-template-rows although spec says it
should be "none". This makes a lot of difference for these properties
because currently we represent "auto" as a list with one auto-sized
track which means initial value for grid-template-column defines one
"explicit" track while it should define none of them.

This change makes grid-auto-columns/rows be applied to the correct
tracks when initial values is used for grid-template-column/rows.
2023-06-07 14:13:07 +02:00
Aliaksandr Kalenik
0f1f95da46 LibWeb: Add support for grid items with negative column-start in GFC
This changes grid items position storage type from unsigned to signed
integer so it can represent negative offsets and also updates placement
for grid items with specified column to correctly handle negative
offsets.
2023-06-07 11:37:11 +02:00
Andreas Kling
2c16e8371f LibWeb: Add naive support for {margin,padding}-{block,inline}
Like other logical properties, we just alias these to the LTR TB default
properties for now.
2023-06-07 11:20:42 +02:00
Andreas Kling
9e807d7c6a LibWeb: Support start and end alignment values in flex layout
These should just behave the same as `flex-start` and `flex-end`.
2023-06-06 21:02:04 +02:00
Andreas Kling
abd6380cce LibWeb: Add CSS logical property aliases for margin and padding sides
These just map to the LTR+TB defaults for now, as we don't yet resolve
any of the inputs to the logical property selection algorithm.
2023-06-06 21:02:04 +02:00
Andreas Kling
c197fb4037 LibWeb: Take box-sizing into account when sizing replaced elements
This fixes an issue where images with padding and/or border did not have
their size adjusted for `border-box`, thereby becoming larger than
intended by the author.
2023-06-05 09:00:00 +02:00
Andreas Kling
89ba00304c LibWeb: Account for negative margins when calculating float intrusion
If a box has a negative margin-left, it may have a negative effective
offset within its parent BFC root coordinate system.

We can account for this when calculating the amount of left-side float
intrusion by flooring the X offset at 0.
2023-06-04 18:14:12 +02:00
Andreas Kling
7115446995 LibWeb: Support font-size: calc()
Now that we have a way to resolve calc() lengths without a layout node,
we can finally support calc() values in font-size.

This wasn't possible before because font-related properties have to be
resolved eagerly in StyleComputer due to font-relative CSS length units
depending on the computed font being known.
2023-06-02 20:03:28 +02:00
Aliaksandr Kalenik
2ade229f27 LibWeb: Fix crashing when grid track size is calc() with percentage
Use contains_percentage() that works for calc() values instead of
is_percentage().

This fixes issue when tracks with calc() that has percentages where
considered as "fixed" tracks with resolvable size which led to
incorrectly resolved infinite final track sizes.
2023-06-02 19:02:31 +02:00
Sam Atkins
1f2629f132 LibWeb: Bounds-check parsed CSS types
This reintroduces bounds-checking for the CSS `<angle>`, `<frequency>`,
`<integer>`, `<length>`, `<number>`, `<percentage>`, `<resolution>`,
and `<time>` types.

I regressed this around 6b8f484114 when
changing how we parsed StyleValues.

This is an improvement from before though, since we now allow the bounds
of a dimension type to have units.

Added a test to make sure we don't regress this again. :^)
2023-06-02 17:46:35 +02:00
Andreas Kling
06617a982e LibWeb: Support flex items with calc() main size containing percentages
If a flex item's main size is a CSS calc() value that resolves to a
length and contains a percentage, we can only resolve it when we have
the corresponding reference size for the containing block.
2023-06-02 17:17:45 +02:00
FalseHonesty
de9604212f LibWeb: Avoid text-aligning content that is too long for its line box
Previously, we would always respect the `text-align` property, even if
the text being aligned was too long for its line box and would be
clipped. This led to seeing the clipped middle/end of strings when we
should instead always see the beginning of the text.
2023-06-02 05:21:22 +02:00
Andreas Kling
1a6a4ca7d4 LibWeb: Round lengths to 3 decimals after resolving from percentage
This is a hack to emulate the behavior of other engines that use
fixed-point math. By rounding to 3 decimals, we retain a fair amount of
detail, while still allowing overshooting 100% without breaking lines.

This is both gross and slow, but it fixes real sites. Notably, the
popular Bootstrap library uses overshooting percentages in their
12-column grid system.

This hack can be removed when CSSPixels is made a fixed-point type.
2023-06-01 18:13:42 +02:00
Andreas Kling
3f9cfa144c LibWeb: Allow infinitely long flex lines when sizing under max-content
If the flex container is being sized under a max-content main size
constraint, there is effectively infinite space available for flex
items. Thus, flex lines should be allowed to be infinitely long.

This is a little awkward, because the spec doesn't mention specifics
about how to resolve flexible lengths during intrninsic sizing.
I've marked the spec deviations with big "AD-HOC" comments.
2023-06-01 15:11:48 +02:00
Andreas Kling
966058d693 LibWeb: Support line-height: calc(...) values that resolve to number
This is used on GitHub and many other websites.
2023-06-01 09:20:05 +02:00
FalseHonesty
dcead6f5eb LibWeb: Add support for parsing place-content shorthand CSS property 2023-06-01 09:06:13 +02:00
Andi Gallo
7f9ede07bc LibWeb: Set margin, padding and border for replaced boxes
Separating the paths for replaced and non-replaced floating boxes lost
the logic for margin, padding and border which was done by
compute_width_for_floating_box. Set them the same way as we do for
block-level replaced elements, per the specification.
2023-05-30 10:09:47 +02:00
FalseHonesty
cabfb7867c LibWeb: Add support for parsing 'inset' shorthand CSS property 2023-05-30 06:02:06 +02:00
Andreas Kling
af004ff0ef LibWeb: Support min-content for width, min-width and max-width
We're gonna need to handle this in many more places, this patch only
adds it to calculate_inner_width().
2023-05-29 21:29:25 +02:00
Andreas Kling
97c510329c LibWeb: Support max-content for width, min-width and max-width
We're gonna need to handle this in many more places, this patch only
adds it to calculate_inner_width().
2023-05-29 21:29:25 +02:00
Aliaksandr Kalenik
94fd17a467 LibWeb: Wrap child text sequences of grid container in anonymous blocks
From spec https://drafts.csswg.org/css-grid/#grid-items:
"Each in-flow child of a grid container becomes a grid item, and each
child text sequence is wrapped in an anonymous block container grid
item."

Fixes the problem that text sequences inside grid containers are
ignored and not displayed.
2023-05-28 21:12:04 +02:00
Aliaksandr Kalenik
537256fae2 LibWeb: Treat unresolvable percentages as auto to resolve sizes in GFC
Fixes the bug that currently we always consider tracks with percentage
size as ones with "fixed" length even when available size is not
definite. With this change tracks with percentage size when available
size is not definite will be considered as "intrinsic" sized.
2023-05-28 20:26:05 +02:00
Andreas Kling
30feb95d53 LibWeb: Support reverse flex layout with space-around/space-between
We were not taking reverse flex directions into account when choosing
the initial offset for flex item placement if justify-content were
either space-around or space-between.
2023-05-28 18:02:00 +02:00
Andi Gallo
29d29134ba LibWeb: Skip children based on media when updating the source set
If child has a media attribute and its value does not match the
environment, continue to the next child.
2023-05-28 12:11:10 +02:00
Karthik Karanth
f60446bbfe LibWeb: Unit tests for min/max-inline-size 2023-05-27 16:02:33 +02:00
Andreas Kling
8ba7bd1b67 LibWeb: Accept fit-content as a value for min-width and max-width
This starts working immediately in BFC thanks to calculate_inner_width
being used for width constraints. :^)
2023-05-27 05:47:54 +02:00
Andreas Kling
1bb4e5c428 LibWeb: Support fit-content width for block-level boxes 2023-05-27 05:47:54 +02:00
Andreas Kling
a277c393b9 LibWeb: Support grid items with fit-content width :^) 2023-05-27 05:47:54 +02:00
Aliaksandr Kalenik
ab5b89eb95 LibWeb: Add basic parsing of grid shorthand CSS property
Introduces incomplete parsing of grid shorthand property. Only
<grid-template> part of syntax is supported for now but it is enough
to significantly improve rendering of websites that use this shorthand
to define grid :)
2023-05-27 05:47:14 +02:00
Andi Gallo
1e526af430 LibWeb: Fix width calculation for floating replaced elements
The path for floating, replaced elements must not fall through to the
path taken for floating, non-replaced elements. The former works like
inline replaced elements, while the latter uses a completely different
algorithm which doesn't account for intrinsic ratio. Falling through
overrides the correct value computed by the former.

Fixes #19061.
2023-05-26 21:20:56 +02:00
Aliaksandr Kalenik
7cc20f4cb5 LibWeb: Reset margin collapsing state only if box indeed add clearance
This fixes the issue when margin collapsing state was always reset if
a box has clear property not equal to none even if it does not actually
introduce clearance.
2023-05-26 18:11:35 +02:00
Cameron Youell
0afdde0eef LibWeb: Consume sign in SVG::parse_elliptical_arg_argument
This was crashing on google.com with the linux chrome user agent,
interestingly it seems like this behavior may have been accidental as
only two of the three `parse_number()` were changed in f7dbcb6
2023-05-26 14:54:00 +02:00
Andi Gallo
5cec517153 LibWeb: Get reference height from closest non-anonymous ancestor
Ignore anonymous block boxes when resolving percentage weights that
would refer to them, per the CSS 2 visual formatting model
specification. This fixes the case when we create an anonymous block
between an image which uses a percentage height relative to a parent
which specifies a definite height.

Fixes #19052.
2023-05-26 14:53:53 +02:00
Aliaksandr Kalenik
202b24584f LibWeb: Sum horizontal margins to calculate space used by floats
This fixes the issue where max margin is used to find offset of
floating box although horizonal margins do not collapse so they need
to be summed instead.
2023-05-24 18:58:42 +02:00
Andreas Kling
71d5dc510e LibWeb: Resolve CSS variables if present in SVG presentation attributes
SVG presentation attributes are parsed as CSS values, so we also need to
handle CSS variable expansion when handling them.

This (roughly) matches the behavior of other engines. It's also used on
the web, for example on https://stripe.com/ :^)
2023-05-24 06:43:21 +02:00
Aliaksandr Kalenik
76aa17be86 LibWeb: Make sure collapsed margins are not ignored if box creates FC
Fixes a bug that if box creates new formatting context then all already
collapsed margins are ignored and only margin_top is used.
2023-05-22 12:51:24 +02:00
Andi Gallo
668578ddc0 LibWeb: Propagate children_are_inline in wrap_in_anonymous
This fixes a crash in box_baseline, due to cells created for
display: table expecting a box child and getting the inline node wrapper
instead.

Fixes #18972.
2023-05-22 10:25:18 +02:00
Aliaksandr Kalenik
193290b19a LibWeb: Support grid-auto-columns and grid-auto-rows properties in GFC
Implements assignment of sizes specified in grid-auto-columns/rows for
implicitly created tracks.
2023-05-22 06:05:19 +02:00
Andi Gallo
e6221117a5 LibWeb: Implement table rowspan
Adjust computing the table height and positioning of cells to account
for the rowspan property.

Fixes #18952.
2023-05-21 14:23:41 +02:00
Andreas Kling
6cb9d755d9 LibWeb: Don't crash on percentage values for CSS stroke-width
Fixes a crash when loading https://vercel.com/
2023-05-21 12:40:27 +02:00
Aliaksandr Kalenik
409333d80a LibWeb: Implement more of spanning tracks sizing in GFC
Implements more parts of sizing algorithm for tracks with spanning
items to archive parity with implementation for sizing of tracks
with non-spanning items.
2023-05-21 11:59:19 +02:00
Andreas Kling
24ea78c613 LibWeb: Add a very basic test for SVG-as-image
This mainly just checks that we load the file and learn the correct
intrinsic aspect ratio from the external SVG.
2023-05-21 07:44:29 +02:00
Andreas Kling
f0560fd087 LibWeb: Support <svg> elements with display: block
There are a couple of things that went into this:

- We now calculate the intrinsic width/height and aspect ratio of <svg>
  elements based on the spec algorithm instead of our previous ad-hoc
  guesswork solution.

- Replaced elements with automatic size and intrinsic aspect ratio but
  no intrinsic dimensions are now sized with the stretch-fit width
  formula.

- We take care to assign both used width and used height to <svg>
  elements before running their SVG formatting contexts. This ensures
  that the inside SVG content is laid out with knowledge of its
  viewport geometry.

- We avoid infinite recursion in tentative_height_for_replaced_element()
  by using the already-calculated used width instead of calling the
  function that calculates the used width (since that may call us right
  back again).
2023-05-20 08:49:42 +02:00
Andreas Kling
6f204f8c32 LibWeb: Fix null dereference on SVG element with bogus fill URL
Fixes a crash seen on YouTube channel pages.
2023-05-19 15:41:34 +02:00
Andreas Kling
411b28fc59 LibWeb: Make sure that margins don't collapse across a nested BFC
In order to fix this, I also had to reorganize the code so that we
create an independent formatting context even for block-level boxes
that don't have any children. This accidentally improves a table
layout test as well (for empty tables).
2023-05-19 15:09:09 +02:00
Aliaksandr Kalenik
902ceb1675 LibWeb: Resolve grid item fixed size paddings in GFC
Adds support for grid items with fixed size paddings. Supporting
percentage paddings will probably require to do second pass of tracks
layout: second pass is needed to recalculate tracks sizes when final
items sizes are known when percentage paddings are already resolved.
2023-05-19 06:12:05 +02:00
Aliaksandr Kalenik
82aedfcaf0 LibWeb: Use grid item used width as available width during track sizing
This change addresses the incorrect assumption that the available width
inside a grid item is equal to the width of the track it belongs to.
For instance, if a grid item has a width of 200px, the available width
inside that item is also 200px regardless of its column(s) base size.

To solve this issue, it was necessary to move the final resolution of
grid items to occur immediately after the final column track sizes are
determined. By doing so, it becomes possible to obtain correct
available width inside grid items while resolving the row track sizes.
2023-05-18 18:06:05 +02:00
Andreas Kling
fb722e69f3 LibWeb: Resolve CSS custom properties on pseudo elements
The resolved property sets are stored with the element in a
per-pseudo-element array (same as for pseudo element layout nodes).

Longer term, we should stop storing this with elements entirely and make
it temporary state in StyleComputer somehow, so we don't waste memory
keeping all the resolved properties around.

This makes various gradients show up on https://shopify.com/ :^)
2023-05-17 20:37:29 +02:00