Commit graph

1097 commits

Author SHA1 Message Date
MacDue
5df4e64eb7 LibWeb: Implement SVG preserveAspectRatio attribute
This attribute is used to define how the viewBox should be scaled.
Previously the behaviour implemented was that of "xMidYMid meet", now
all of them work (expect none :P).

With this the Discord login backend is now correctly scaled/positioned.

This also brings our SVG code a little closer to the spec! With spec
comments and all :^)

(Minor non-visible update to layout tests)
2023-04-17 07:32:31 +02:00
Andreas Kling
e7f5b5a2f3 LibWeb: Fix multi-line flex column layouts with auto height on container
When sizing a flex container with flex-direction:column under a
max-content height constraint, we were incorrectly truncating the
infinite available height to 0 when collecting flex items into lines.

This caused us to put every flex item in its own flex line, which is the
complete opposite of what we want during max-content intrinsic sizing,
as the layout would grow wide but not tall.
2023-04-16 21:45:15 +02:00
Andreas Kling
b9b6037d2b LibWeb: Honor gap between flex lines when using align-content: stretch
We have to take the cross gap into account when calculating the "sum of
flex line cross sizes" in "Handle 'align-content: stretch'".
2023-04-16 20:52:32 +02:00
MacDue
f9c61e3ba7 LibWeb: Scale SVG stroke-width based on viewbox
This fixes the clipping of strokes in quite a few cases and now fixes
the Gartic Phone logo :^)

(Layout test updated but no visible changes there)
2023-04-15 19:28:13 +02:00
Andreas Kling
47c21cc349 LibWeb: Honor column-gap and row-gap CSS properties in flex layout
This isn't actually part of CSS-FLEXBOX-1, but all major engines honor
these properties in flex layout, and it's widely used on the web.

There's a bug open against the flexbox spec where fantasai says the
algorithm will be updated in CSS-FLEXBOX-2:
https://github.com/w3c/csswg-drafts/issues/2336

I've added comments to all the places where we adjust calculations for
gaps with "CSS-FLEXBOX-2" so we can find them easily. When that spec
becomes available, we can add proper spec links.
2023-04-14 13:22:07 +02:00
Andreas Kling
01ca7e0544 LibWeb: Whine instead of dying on unexpected box during line layout
Log a FIXME on the debug log, along with a layout tree dump of the box
that we didn't expect to see. This will be annoying (until fixed),
but far less so than crashing the browser.
2023-04-13 14:30:16 +02:00
MacDue
ba6272a0a0 LibWeb: Don't try to paint SVG elements transformed to zero size
Otherwise, the Gfx::Painter will get choked up on NaNs and start
infinitely splitting paths till it OOMs.
2023-04-12 07:40:22 +02:00
MacDue
cf23a2b82d LibWeb: Apply SVG transform to path when painting (SVG) elements
This also combines the viewbox mapping into the same transform and
reuses some code by using Path::copy_transformed() rather than manually
mapping each segment of the path.
2023-04-12 07:40:22 +02:00
MacDue
3484db0dc1 LibWeb: Remove SVG sizing hack and fix viewbox scaling
Previously, if you had an SVG with a viewbox and a definite width
and height, then all SVGGeometryBox boxes within that SVG would
have a width and height set to the size of the parent SVG.

This broke hit testing for SVG paths, and didn't make much sense.
It seems like the SVG sizing hack was patching over the incorrect
logic in viewbox_scaling() and the incorrect path sizing (which was
never reached).

Before this change the view box scaling was:
	element_dimension / viewbox_dimension

Which only seemed to work because of the SVG sizing hack that made
all paths the size of the containing SVG.

After this change SVGGeometryBoxes are (in most cases) sized correctly
based on their bounding boxes, which allows hit testing to function,
and the view box scaling is updated now to:
	  containing_SVG_dimension / viewbox_dimension

Which works with one less hack :^)

This now also handles centering the viewbox within the parent SVG
element and applying any tranforms to the bounding box. This still
a bit ad-hoc, but much more closely matches other browsers now.
2023-04-12 07:40:22 +02:00
Timothy Flynn
f156d3d5e5 LibWeb: Create a basic layout node for HTMLVideoElement 2023-04-07 16:02:22 +02:00
martinfalisse
c839c51b0b LibWeb: Use max-width property in table formatting 2023-04-07 10:42:26 +02:00
Andreas Kling
7b4c76788b LibWeb: Don't put abspos grid/flex items in anonymous wrapper
Grid and flex containers have their own rules for abspos items, so we
shouldn't try to be clever and put them in the "current" anonymous
wrapper block. That behavior is primarily for the benefit of block &
inline layout.
2023-04-07 10:15:16 +02:00
Andreas Kling
b97229c9b5 LibWeb: Ignore preferred width when calculating intrinsic width of block
When calculating the intrinsic width of a block-level box, we now ignore
the preferred width entirely, and not just when the preferred width
should be treated as auto.

The condition for this was both confused and wrong, as it looked at the
available width around the box, but didn't check for a width constraint
on the box itself.

Just because the available width has an intrinsic sizing constraint
doesn't mean that the box is undergoing intrinsic sizing. It could also
be the box's containing block!
2023-04-06 16:47:40 +02:00
matcool
cc33a57620 LibWeb: Use intrinsic aspect ratio when calculating max content height 2023-04-05 16:23:56 +02:00
MacDue
bed55ac669 LibWeb: Parse and plumb background-position-x/y
This parses the new background-position-x/y longhands and properly
hooks up them up. This requires converting PositionStyleValue to
just contain two EdgeStyleValues so that it can be easily expanded
into the longhands.
2023-04-03 07:10:33 +02:00
martinfalisse
289285cd6e LibWeb: Add borders functionality to CSS Grid 2023-04-02 19:08:04 +02:00
martinfalisse
6f52272d34 LibWeb: Fix regression in definite grid row heights
Fixes a row height bug when a grid item in a row has a definite height.
2023-04-02 19:08:04 +02:00
martinfalisse
e65f4b3dc5 LibWeb: Rename PositionedBox to GridItem
This seems like a more accurate description of what this class really
is, and easier to understand in my opinion.
2023-04-02 19:08:04 +02:00
Andreas Kling
9cded6e1b5 LibWeb: Fix application of intrinsic aspect ratio to flex column items
The intrinsic aspect ratio of a box is a width:height ratio, so if we
have the width and need the height, we should divide, not multiply. :^)
2023-04-02 06:45:44 +02:00
MacDue
7061a3d8e6 LibWeb: Add .scaled_font() helper to Layout::Node
This returns the font scaled for the current zoom level.
2023-04-01 22:39:47 +01:00
Sam Atkins
53a4a31af2 LibWeb: Remove CalculatedStyleValue from Length 2023-03-30 21:29:50 +02:00
Andreas Kling
e4b71495f5 LibWeb: Resolve percentage vertical-align values against line-height
...instead of not resolving them at all. :^)
2023-03-29 18:38:29 +02:00
Andreas Kling
c0a7a61288 LibWeb: Clamp fit-content widths in flex layout to min/max-width
In situations where we need a width to calculate the intrinsic height of
a flex item, we use the fit-content width as a stand-in. However, we
also need to clamp it to any min-width and max-width properties present.
2023-03-28 21:08:54 +02:00
Andreas Kling
af118abdf0 LibWeb: Use fit-content width in place of indefinite flex item widths
In `flex-direction: column` layouts, a flex item's intrinsic height may
depend on its width, but the width is calculated *after* the intrinsic
height is required.

Unfortunately, the specification doesn't tell us exactly what to do here
(missing inputs to intrinsic sizing is a common problem) so we take the
solution that flexbox applies in 9.2.3.C and apply it to all intrinsic
height calculations within FlexFormattingContext: if the used width of
an item is not yet known when its intrinsic height is requested, we
substitute the fit-content width instead.

Note that while this is technically ad-hoc, it's basically extrapolating
the spec's suggestion in one specific case and using it in all cases.
2023-03-27 23:28:07 +02:00
Andreas Kling
ca290b27ea LibWeb: Make box content sizes indefinite before intrinsic sizing
When calculating the intrinsic width of a box, we now make its content
width & height indefinite before entering the intrinsic sizing layout.
This ensures that any geometry assigned to the box by its parent
formatting context is ignored.

For intrinsic heights, we only make the content height indefinite.
This is because used content width is a valid (but optional) input
to intrinsic height calculation.
2023-03-27 23:28:07 +02:00
Andreas Kling
7639eccd53 LibWeb: Add default equality operators to Available{Space,Size}
I find myself adding these over and over again while testing.
Let's just have them always there.
2023-03-27 23:28:07 +02:00
Andreas Kling
3b76cc5245 LibWeb: Pass available inner space to inline-level SVG layout 2023-03-27 23:28:07 +02:00
Andreas Kling
4f752ca791 LibWeb: Pass available inner space to BFC root auto height calculation 2023-03-27 23:28:07 +02:00
Aliaksandr Kalenik
1ee99017e2 LibWeb: Fix intrinsic sizing early return condition in TFC
Early return before running full TFC algorithm is only possible when
just table width need to be calculated.
2023-03-27 23:10:16 +02:00
Timothy Flynn
b3d033f027 LibWeb: Declare overflow_value_makes_box_a_scroll_container as static
It is only used in this file, and not being declared static gives a "no
previous declaration" error.
2023-03-26 10:38:05 -04:00
Cameron Youell
f251ff0521 LibWeb: Fix non return in overflow value check 2023-03-26 15:03:43 +01:00
Andreas Kling
2699f226fb LibWeb: Don't compute main axis "auto min-size" for flex item cross axis
The "flex item automatic minimum size in the main axis is the
content-based minimum size" behavior should only apply to flex item
sizes in the main axis. There was one case where we incorrectly applied
this behavior in the cross axis
2023-03-26 15:14:35 +02:00
Andreas Kling
1f7e6cc022 LibWeb: Use zero automatic minimum size for scroll-container flex items
The "flex item automatic minimum size in the main axis is the
content-based minimum size" behavior should only apply to flex items
that aren't scroll containers. We were doing it for all flex items.
2023-03-26 15:14:35 +02:00
Andreas Kling
8038824211 LibWeb: Add Layout::Box::is_scroll_container()
The computed `overflow` property values determine whether a box is a
scroll container or not, so let's have a simple helper for asking this.
2023-03-26 15:14:35 +02:00
Andreas Kling
3932afdc6a LibWeb: Remove unnecessary repeat of partial flex layout algorithm
When calculating one of the intrinsic sizes for a flex container, we
already go through the flex layout algorithm.

There's no need to perform some of the algorithm steps a second time.
This is a relic from an earlier time when we tried to bail early from
the layout algorithm in  the intrinsic sizing case. Now that we go
through the whole thing anyway, this is much simpler. :^)
2023-03-26 15:14:35 +02:00
Cameron Youell
f17bee0cb5 LibWeb: Fix mistype in LayoutState 2023-03-26 13:28:07 +02:00
Andreas Kling
b3b9ac6201 LibWeb: Add FIXME whining to debug log if layout produces negative sizes
Negative width/height sizes are not allowed in CSS, so if our layout
algorithm resolves something to a negative size, we have boogs.

Instead of crashing or rendering something very wrong, we now clamp the
values to 0 and whine on the debug log so that someone can go and figure
out how we got the negative values in the first place. :^)
2023-03-25 19:41:31 +01:00
Andreas Kling
4bf10674fa LibWeb: Don't allow resolved height of abspos elements to become negative
We have to clamp the resulting height to 0 when solving for it.
2023-03-25 19:41:31 +01:00
Andreas Kling
3f6f3966b9 LibWeb: Don't allow resolved width of abspos elements to become negative
We have to clamp the resulting width to 0 when solving for it.
2023-03-25 19:41:31 +01:00
Andreas Kling
8f311c61af LibWeb: Add out-of-flow boxes to anonymous wrapper block when possible
If the previous sibling of an out-of-flow box has been wrapped in an
anonymous block, we now stuff the out-of-flow box into the anonymous
block as well.

Co-authored-by: Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>
2023-03-25 19:41:31 +01:00
Andreas Kling
a15a44cfc8 LibWeb: Don't use image source URL as backup alt attribute
This was a non-standard behavior of ours that broke layout on many pages
where an image failed to load for some reason.
2023-03-25 19:41:31 +01:00
Sam Atkins
4c54c5d3dd LibWeb: Split StyleValueList out of StyleValue.{h,cpp} 2023-03-25 16:56:04 +00:00
Sam Atkins
b1ccd30b02 LibWeb: Split PositionStyleValue out of StyleValue.{h,cpp} 2023-03-25 16:56:04 +00:00
Sam Atkins
4b711932cc LibWeb: Split PercentageStyleValue out of StyleValue.{h,cpp} 2023-03-25 16:56:04 +00:00
Sam Atkins
e61a5ad180 LibWeb: Split AbstractImageStyleValue out of StyleValue.{h,cpp} 2023-03-25 16:56:04 +00:00
Sam Atkins
76de017a51 LibWeb: Split IdentifierStyleValue out of StyleValue.{h,cpp} 2023-03-25 16:56:04 +00:00
Sam Atkins
66bc816284 LibWeb: Split BorderRadiusStyleValue out of StyleValue.{h,cpp} 2023-03-25 16:56:04 +00:00
Sam Atkins
9d5296889f LibWeb: Split BackgroundSizeStyleValue out of StyleValue.{h,cpp} 2023-03-25 16:56:04 +00:00
Sam Atkins
52cd0b2f47 LibWeb: Split BackgroundRepeatStyleValue out of StyleValue.{h,cpp} 2023-03-25 16:56:04 +00:00
MacDue
87b8a36e56 LibWeb: Parse and plumb the accent-color CSS property 2023-03-23 08:27:51 +00:00