Commit graph

607 commits

Author SHA1 Message Date
Andreas Kling
25a3d0d643 LibWeb: Resolve relative offsets *once* after layout
Instead of applying relative offsets (like position:relative insets)
during painting and hit testing, we now do a pass at the end of layout
and assign the final resolved offsets to paintables.

This makes painting and hit testing easier since they don't have to
think about relative offsets, and it also fixes a bug where offsets were
not applied to text fragments inside inline-flow elements that were
themselves position:relative.
2023-08-15 16:37:11 +02:00
MacDue
4e49aee545 Tests/LibWeb: Add opacity-stacking.html test to manifest.json
(Also explicitly set the background color)
2023-08-14 23:52:53 +02:00
MacDue
9006c7aece LibWeb: Add ref test for opacity (stacking context) paint order
Now that we can test this, let's add a test, as mentioned in:
https://github.com/SerenityOS/serenity/pull/20559#issuecomment-1677126697

(I confirmed this test failed before #20559)
2023-08-14 22:42:25 +02:00
Shannon Booth
099a069b86 LibWeb: Fix typo in query of link element search params
Regressed in 21fe86d235
2023-08-14 16:26:34 +02:00
Andi Gallo
a18500c78c LibWeb: Paint separate borders for inline tables 2023-08-14 15:12:19 +02:00
Andi Gallo
bc8c2b2bc2 LibWeb: Use cell width instead available width to compute height
Overall available width should only affect later stages of the table
layout algorithm and have no impact on cell measures.
2023-08-14 13:14:24 +02:00
Shannon Booth
576f8e8fa8 LibWeb: Fix crash parsing an invalid pseudo compound selector
Reduced from a crash on: https://github.com/SerenityOS/serenity/pulls

Fixes #20568
2023-08-14 11:43:57 +01:00
Aliaksandr Kalenik
0d66a80a0f headless-browser: Add ref tests support
The ref tests runner takes screenshots of both the input page and the
expected page, then compares them. Ref testing allows us to catch
painting bugs, which cannot be detected with the layout and text tests
we already have.

With ref tests, we'll likely want to reuse the same expectation page
for multiple inputs. Therefore, there's a `manifest.json` file that
describes the relationship between inputs and expected outputs.
2023-08-14 07:28:22 +02:00
Andi Gallo
b6f9f4c28c LibWeb: Fix handling of max-content containing block for floating box
Fixes layout of page toolbar on Wikipedia.
2023-08-13 14:43:41 +02:00
Aliaksandr Kalenik
e25b1f76e1 LibWeb: Forbid usage of indefinite width in calculate_min{max}_height
Changing `calculate_min_content_heigh()` and
`calculate_min_content_heigh()` to accept width as `CSSPixels`, instead
of `AvailableSize` that might be indefinite, makes it more explicit
that width is supposed to be known by the time height is measured.

This change has a bit of collateral damage which is rows height
calculation regression in `table/inline-table-width` that worked before
by accident.
2023-08-12 16:26:08 +02:00
Andi Gallo
89305f1481 LibWeb: Copy button style properties for generated table and cell 2023-08-12 13:36:37 +02:00
Jonah
0b2da4f8c6 LibWeb: Add the default user agent MathML stylesheet
We now apply MathML's default user agent style sheet along with other
default styles. This sheet is not mixed in with the other styles in
CSS/Default.css because it is a namespaced stylesheet and so has to
be its own sheet.
2023-08-12 07:59:23 +01:00
Aliaksandr Kalenik
9101c8d079 LibWeb: Use available space to resolve table container width
Using avilable space directly while resolving table container width
allows to avoid assigning it to table wrapper box content width which
sometimes involves infinite (saturated) values.

Also this allows to get rid of set_max_content_width() which is a hack
that allows to bypass set_content_width() to assign infinite
(saturated) width to a box.

Closes https://github.com/SerenityOS/serenity/issues/19521
2023-08-11 19:36:19 +02:00
Andi Gallo
a426263dee LibWeb: Remove 3 decimal places rounding hack in Length::percentage_of
CSSPixels uses fixed point now.
2023-08-11 11:00:27 +01:00
Andi Gallo
b34b80104f LibWeb: Fix buttons with TextNode label
Fixes #20472.
2023-08-11 10:02:27 +02:00
Andreas Kling
9e22f01eba LibWeb: Stub out SVGMaskElement
Just enough that we stop creating layout nodes for mask elements, which
was making some SVG content look very wrong. :^)
2023-08-10 11:36:17 +02:00
Andi Gallo
34cd7f4c22 LibWeb: Verify that table cells have a paintable when collecting them
Replicate the more conservative way it's done for other nodes, for
which we verify whether they have a paintable before doing
painting-related operations with it.

Fixes crash on https://www.haiku-os.org/.
2023-08-10 05:14:40 +02:00
Aliaksandr Kalenik
5003b1a421 LibWeb: Use automatic width to resolve min/max-width for inline boxes 2023-08-10 05:10:44 +02:00
Aliaksandr Kalenik
b34b0a1cd3 LibWeb: Use root content width as automatic width if children inline
Returning greatest_child_width() from automatic_content_width() in BFC
if root box children are inline and there are min/max-width that caused
width to be changed after IFC layout while content_width should be
always set to correct value by layout_inline_children() regardless of
layout mode.
2023-08-10 05:10:44 +02:00
Tom
d7a3b65a44 LibWeb: Vertically align HTML Button content 2023-08-09 18:34:17 +02:00
Aliaksandr Kalenik
6354f950fd LibWeb: Support "order" property for items in GridFormattingContext
Closes https://github.com/SerenityOS/serenity/issues/20434
2023-08-09 18:01:36 +02:00
Aliaksandr Kalenik
bf4e2f3e9c LibWeb: Add hit testing API in internals object
Introduces `internals.hitTest(x, y)` that is going to allow us write
tests for hit testing :)
2023-08-09 17:26:44 +02:00
Andi Gallo
ada05ab4e4 LibWeb: Implement fixed table layout 2023-08-09 08:33:02 +01:00
Sam Atkins
1858f06881 LibWeb: Add namespaces to Universal and TagName selectors 2023-08-08 20:49:45 +01:00
Aliaksandr Kalenik
568c486610 LibWeb: Support positioning of abspos boxes inside grid container
- Out-of-flow items should not affect grid layout
- "The static position of an absolutely-positioned child of a grid
  container is determined as if it were the sole grid item in a grid
  area whose edges coincide with the content edges of the grid
  container."
2023-08-08 11:31:35 +02:00
Aliaksandr Kalenik
dc08e9138c LibWeb/Tests: Add basic test for Element::scroll(x, y) 2023-08-07 05:23:31 +02:00
Andreas Kling
ec24d7555a LibWeb: Add a simple internals objects only available during testing
This object is available as `window.internals` (or just `internals`) and
is only accessible while running in "test mode".

This first version only has one API: gc(), which triggers a garbage
collection immediately.

In the future, we can add more APIs here to help us test parts of the
engine that are hard or impossible to reach via public web APIs.
2023-08-06 15:26:34 +02:00
Shannon Booth
faf9d08371 AK: Fix IPv6 serialization on multiple '0' parts ending in a '0' part
This could happen if a sequence of '0' parts was followed by a longer
sequence of '0' parts at the end of the host. The first sequence was
being used for the compress, and not the second.

For example, [1:1:0:0:1:0:0:0] was being serialized as: [1:1::1:0:0:0]
instead of [1:1:0:0:1::].

Fix this by checking at the end of the loop if we are in the middle of a
sequence of '0' parts that is longer than the current longest.
2023-08-06 10:53:32 +02:00
Aliaksandr Kalenik
da2cd73bcf LibWeb: Add place-self css property support 2023-08-06 08:26:36 +02:00
Hendiadyoin1
6c341ca985 LibWeb: Implement rounding for PixelUnits 2023-08-05 20:03:09 +02:00
Hendiadyoin1
71f56d8697 LibWeb: Saturate result in PixelUnits::operator/ 2023-08-05 20:03:09 +02:00
Hendiadyoin1
f9fc0505fb LibWeb: Add propper rounding to PixelUnits::operator*
Also moves related constants into the class to make them accessible for
tests.
2023-08-05 20:03:09 +02:00
Hendiadyoin1
af161a8b83 AK+LibWeb: Round to int in clamp_to_int instead of truncating
This caused inaccuracies in float->CssPixel conversions
2023-08-05 20:03:09 +02:00
Andreas Kling
64c06c345e LibWeb: Parse :host() selector
We were already parsing non-function-syntax :host, so let's also do
the :host(...) variant. Note that we don't have matching for these yet.

This fixes many issues on sites generated by Wix, as they often have
selector lists that include some :host() selector, and we'd reject the
entire rule after failing to parse it.
2023-08-05 13:23:12 +02:00
Andreas Kling
6f0a93b5df Tests/LibWeb: Rebaseline a block-and-inlines layout test
This test was created before layout test dumps included the paint tree.
2023-08-05 12:09:34 +02:00
Andreas Kling
41e7c5766e LibWeb: Support more kinds of indefinite widths on flex column items
This stuff is pretty hairy since the specifications don't give any
guidance on which widths to use when calculating the intrinsic height of
flex items in a column layout.

However, our old behavior of "treat anything indefinite as fit-content"
was definitely not good enough, so this patch improves the situation by
considering values like `min-content`, `max-content` and `fit-content`
separately from `auto`, and making the whole flex layout pipeline aware
of them (in the cross axis context).
2023-08-05 10:58:12 +02:00
Andi Gallo
7b0b501418 LibWeb: Improve adjustment of automatic table width with percentages
Use the max-width of percentage cells instead of min-width as the
reference to be used to compute the total table width. The specification
only suggests that the UA should try to satisfy percentage constraints
and this behavior is more consistent with other browsers.
2023-08-05 10:32:48 +02:00
Aliaksandr Kalenik
d32bf4cd41 LibWeb: Set min-width for inline child boxes after inside layout
min-width for boxes with inline children can only be applied after
inside layout is done and width of box content is known.
2023-08-05 09:25:24 +02:00
Aliaksandr Kalenik
79cbbfc67f LibWeb: Fix infinite spinning while distributing extra space in GFC
Fixes infinite spinning in the cases when CSSPixels does not have
enough precision to represent increase per track which happens when
very small extra_space got divided by affected tracks number.
2023-08-04 19:00:02 +02:00
Andi Gallo
3e70c1b6a3 LibWeb: Improve precision when computing size of replaced elements
Change associativity in computing of replaced element size to improve
precision of division.

Fixes vertically squashed image from Mozilla splash page MDN example.
2023-08-04 13:36:29 +02:00
Andi Gallo
e9ad8d5e4f LibWeb: Use i64 for intermediate value in CSSPixels multiplication
Reduce the chance of overflow due to fixed point denominator being
squared when multiplying the raw values, before adjusting the final
value back.
2023-08-04 13:36:29 +02:00
Aliaksandr Kalenik
0019b901a0 LibWeb: Remove hardcoded span = 2 while sizing spanning items in GFC 2023-08-04 12:41:11 +02:00
Aliaksandr Kalenik
1e953f2acc LibWeb: Reset planned_increase while distributing space to "fr" tracks
Fixes bug when planned_increase is not reset after adding it to
base_size.
2023-08-03 17:05:57 +02:00
Andreas Kling
4011a107a4 LibWeb: Propagate overflow modes from <html> or <body> to viewport
This patch implements "Overflow Viewport Propagation" from CSS-OVERFLOW.
It fixes an issue where many websites were not scrollable because they
had `overflow: scroll` on the body element and we didn't propagate it.
2023-08-03 13:21:26 +02:00
Andreas Kling
09eed8eea2 LibWeb+headless-browser: Include paint tree in layout test output
This will give us a more comprehensive look at what actually gets
rendered in the end, and also allows us to catch more behavior changes.
2023-08-03 13:21:26 +02:00
Karol Kosek
142d498f14 LibWeb: Include anonymous boxes with no lines into computing BFC height
Pseudo-elements like ::before and ::after were discarded when their
content property was an empty string (ignoring whitespace), because they
are anonymous containers with no lines.

Our previous way around it was to add an empty line box (see b062a0fb7c)
however it didn't actually work for cases described in the previous
commit.

This makes avatars and cover arts square on last.fm and "fixes" the test
css-pseudo-element-should-not-be-affected-by-presentational-hints.html.
Unfortunately, this also regresses on block-and-inline/clearfix.html,
but that hopefully will be handled in subsequent commit.
2023-08-02 17:35:54 +02:00
Aliaksandr Kalenik
1f28fdacf0 LibWeb: Set max-width for inline child boxes after inside layout
max-width for boxes with inline children can only be applied after
inside layout is done and width of box content is known.

Fixes https://github.com/SerenityOS/serenity/issues/20235
2023-08-02 05:27:56 +02:00
Andreas Kling
15440b156f LibWeb: Ignore flex container size constraints during intrinsic sizing
Properties like min-width, max-width, etc, should be ignored while we're
trying to determine the intrinsic size of a flex container.

This fixes an infinite recursion when using an intrinsic size keyword as
the max-width of a flex column container.

Note that this behavior is marked as AD-HOC in code comments because
specs don't tell us how to achieve intrinsic sizing.

We can now load product pages on the Twinings site, such as
https://twinings.co.uk/products/earl-grey-100-tea-bags :^)
2023-08-01 20:15:20 +02:00
Aliaksandr Kalenik
338fa8261e LibWeb: Use item minimum contribution while sizing "fr" track in GFC
Fixes the issue that before "automatic minimum size" were used to size
flexible tracks even though specification says is should be "minimum
contribution"
2023-08-01 16:25:10 +02:00
Tom
e61fdd1dc6 LibWeb: Use viewbox attribute in SVG symbol element
Previously when a viewBox was passed to a SVG symbol element it would
not be taken into account when drawing the SVG.
2023-08-01 14:40:51 +02:00