Commit Graph

618 Commits

Author SHA1 Message Date
Aliaksandr Kalenik
8e3b7e3680 LibWeb: Skip documents of decoded SVGs while processing HTML event loop
None of HTML event loop processing steps are relevant for decoded SVGs,
so we can simply skip them while collecting documents for processing.

(cherry picked from commit c87214d79cf834ee9b7b4da65e902e5233c0a5cc)
2024-11-07 22:42:20 -05:00
Andreas Kling
fbe99575e0 LibWeb: Resolve flex item % main size to 0 during min-content sizing
When the flex container is sized under a min-content constraint in the
main axis, any flex items with a percentage main size should collapse
to zero width, not take up their own intrinsic min-content size.

This is not in the spec, but matches how other browsers behave.

Fixes an issue where the cartoons on https://basecamp.com/ were way
too large. :^)

(cherry picked from commit 59ed823724331d6457e81f8674aef392ca4dc174)
2024-11-04 21:46:05 -05:00
BenJilks
84617a7202 LibWeb: Add support for flex-wrap: wrap-reverse
Reverse the order of flex lines, when the `flex-wrap` property is set to
`wrap-reverse`. This will also swap the cross-start and cross-end
directions.

(cherry picked from commit 46649fbe1b015a7f4bfad4e059ecaf3c513f3a26)
2024-11-04 21:46:05 -05:00
BenJilks
91d454e252 LibWeb: Only reverse each line of a reverse flex-direction
When a flex container with a reverse `flex-direction` is wrapped. Only
each line should be reversed, not all items.

(cherry picked from commit e2c1fe7255c84ad1ee172765ef9f107949117098)
2024-11-04 21:46:05 -05:00
Andreas Kling
213f86d781 LibWeb: Adjust flex item intrinsic contributions through aspect ratio
When determining the intrinsic cross size contribution of a flex item
with a preferred aspect ratio, we have to account for any min/max
constraints in the main axis.

(cherry picked from commit bde2d3dc7b359cd4f56ad9975c44d22e43ef82fe)
2024-11-04 21:46:05 -05:00
Jelle Raaijmakers
94a64acb2e LibWeb: Account for intrinsic width or height in flex base size
In calculating the base size of a flex item, we have a piece of ad-hoc
code that deals with an item that does have an instrinsic aspect ratio,
but not a cross size to resolve that ratio against. In determining the
actual flex item size however, we also take into account the minimum
content width and height, which assumes the box' intrinsic width or
height when available. This would break having an image as a flex item,
which gets stretched to its maximum size within the flex container
instead of the flex item being shrunk to the instrinsic size of the
image.

Fix this by only stretching flex items that do not have an instrinsic
width nor height set.

(cherry picked from commit 7a783d3a89aec0caaa63a483c855fe921b6d0984)
2024-11-04 21:46:05 -05:00
Andreas Kling
b3e8e67ca3 LibWeb: Honor appearance: none when creating input element layout node
Per css-ui-4, setting `appearance: none` is supposed to suppress the
creation of a native-looking widget for stuff like checkboxes, radio
buttons, etc.

This patch implements this behavior by simply falling back to creating
a layout node based on the CSS `display` property in such cases.

This fixes an issue on the hey.com imbox page where we were rendering
checkboxes on top of sender profile photos.

(cherry picked from commit 58c523ae46af90ab17d6b98966d97fa776ae2bf4)
2024-11-04 10:34:34 -05:00
Andreas Kling
4a4da86792 LibWeb: Don't crash when encountering calc() inside a CSS rect() value
This allows us to run the WPT tests under quirks/unitless-length/
without crashing, giving us over 4600 new passing subtests. :^)

(cherry picked from commit 5df6c6eecff678bf2a1fe8960149302d42015439)
2024-10-26 23:26:45 -04:00
Andreas Kling
0ed1c4fcab LibWeb: Don't crash when encountering border-spacing: calc(...)
This allows us to progress further on this WPT test:
https://wpt.live/quirks/unitless-length/quirks.html

...although it still crashes before finishing.

(cherry picked from commit 5e240f997caa8b62275d3c5d18a1cf1885349971)
2024-10-26 23:26:45 -04:00
Aliaksandr Kalenik
ddd5e399e6 LibWeb: Use correct resolved type for round() CSS function
Function is defined as `round(<rounding-strategy>?, A, B?)`

With this change resolved type is `typeof(resolve(A))`, instead of
`typeof(A)`.

For example `round(up, 20%, 1px)` with 200px percentage basis is now
correctly resolved in 40px instead of 40%.

Progress on https://www.notion.so/ landing page.

(cherry picked from commit 41e37f00795920686fad7b211381905618fb345a)
2024-10-20 16:38:56 -04:00
Adam Harald Jørgensen
9c20df1684 LibWeb: Set correct longhand values when using grid-placement shorthand
According to https://www.w3.org/TR/css-grid-2/#placement-shorthands
when setting the 'grid-row' and 'grid-column' shorthand property to a
single <custom-ident> value, both 'grid-row-start'/'grid-column-start'
and 'grid-row-end'/'grid-column-end' should be set to that
<custom_ident>.

(cherry picked from commit 3e92ec80f3873bb81cbc8b0dc93bb3a6a145172c)
2024-10-11 21:15:26 -04:00
Sam Atkins
39b3746306 LibWeb/CSS: Treat counters() function with 1 argument as invalid
Fixes LadybirdBrowser/ladybird#887.

(cherry picked from commit 5abe246385dc70e9b69426cd19302d28b7d869d0)
2024-10-10 09:36:41 -04:00
BenJilks
1741fee83f LibWeb: Add start and end values to text-align
The `start` and `end` value set the text alignment based on the computed
value of `direction`. The default value of `text-align` is now `start`
instead of `left`.

(cherry picked from commit 1537d589ca4908c3631dc38e66c97fd37fa2f526)
2024-09-29 08:03:58 -04:00
BenJilks
20c9e18d25 LibWeb: Use reverse direction on flex containers with rtl direction
If a flex container has `direction: rtl` set, reverse the row direction.

(cherry picked from commit 82989554abf6ca8f261de9a51c9e3d3c20f5e68b)
2024-09-29 08:03:58 -04:00
BenJilks
736c931a15 LibWeb: Add additional padding to the end of the scrollable overflow
Adds additional padding to the end-side of the scrollable overflow
rectangle as necessary to enable a scroll position that satisfies
the requirements of `place-content: end` alignment.

(cherry picked from commit 963cf1c2c4e4b1cd482c41d6f673b7207bbcc067)
2024-08-13 15:43:28 -04:00
Sam Atkins
fc6c6573b1 LibWeb: Prevent elements with no layout box from modifying counters
(cherry picked from commit 696ccc1aa992fdd7e22a44571d8be7d89738261d)
2024-07-28 13:31:02 -04:00
Sam Atkins
6ab5a043e6 Last: LibWeb: Add counter() and counters() functions to content property
These let you format counters' current values as strings for use in
generated content.

(cherry picked from commit 898e3bd89878ddb87df06e056031673dc770be2b)
2024-07-28 13:31:02 -04:00
Sam Atkins
c847487f30 LibWeb: Reserve enough space for span>1 columns in BorderConflictFinder
This code previously only allocated enough space in
m_col_elements_by_index for 1 slot per column, meaning that columns
with a span > 1 would write off the end of it.

(cherry picked from commit 9e32c9329acd89d73eeff3494a5e728077962513)
2024-07-28 13:00:11 -04:00
Andreas Kling
a8a5463d33 LibWeb: Make offsetTop and offsetLeft behave more like other browsers
We now follow the rules from the spec more closely, along with an
unspecified quirk for when the offsetParent is a non-positioned body
element. (Spec bug linked in a comment.)

This fixes a whole bunch of css-flexbox tests on WPT, which already had
correct layout, but the reported metrics from JS API were wrong.

(cherry picked from commit d49ae5af32044cb83bc14073b92676a1662c3bc1)
2024-07-28 07:32:17 -04:00
Edwin Hoksberg
dd843ae282 LibWeb: Implement grid-template function fit-content()
(cherry picked from commit e5deaa1c073f4762fe2cdc7d36f90099f0ca4d11)
2024-07-28 07:31:47 -04:00
Andreas Kling
c2fce0f19c LibWeb: Implement :host and :host(<compound-selector>) selector matching
The :host family of pseudo class selectors select the shadow host
element when matching against a rule from within the element's shadow
tree.

This is a bit convoluted due to the fact that the document-level
StyleComputer keeps track of *all* style rules, and not just the
document-level ones.

In the future, we should refactor style storage so that shadow roots
have their own style scope, and we can simplify a lot of this.

(cherry picked from commit 4c326fc5f6f64797764e7f32a9789b74665f2fec)
2024-07-27 22:53:52 -04:00
Andreas Kling
80b06d464f LibWeb: Make details and summary elements display:block in the UA style
This is the expected behavior per the HTML spec. Fixes an issue where
styling these elements wouldn't have the expected effect unless you also
set the display property.

(cherry picked from commit 3faff34bf6a290e4df1c73f92e8c7d992a78a8e0)
2024-07-27 15:13:37 -04:00
Edwin Hoksberg
fd17cbe54d LibWeb: Resolve content-visibility fixme in html details element
(cherry picked from commit 0ae048102cf43e961fb5346bf5b9ca8072a3c856)
2024-07-23 21:15:27 -04:00
Edwin Hoksberg
360cea781b LibWeb: Support content-visibility css
(cherry picked from commit 020b20d817d51dda9c0f9306543c69f4020891eb)
2024-07-23 21:15:27 -04:00
Edwin Hoksberg
fd55229c0e LibWeb: Support percentage values in SVG line element
(cherry picked from commit ac6126e263964a7695167c0ee6a74453957d4c5c)
2024-07-22 19:05:02 -04:00
Edwin Hoksberg
097a50141f LibWeb: Support percentage values in SVG text positioning element
(cherry picked from commit 356bddbdbb774cf86dd77d2a54a6fddccf82767e)
2024-07-22 19:05:02 -04:00
Tim Ledbetter
9b524d043f LibWeb: Don't crash when SVG viewbox has a width of 0
Previously, `SVGSVGBox` would have a natural aspect ratio of 0 if it
had a viewbox with zero width. This led to a division by zero, causing
a crash.

Found by Domato.

(cherry picked from commit 4cdafea36334bcff8c4bbb083076ae55b599177c)
2024-07-22 18:27:26 -04:00
Aliaksandr Kalenik
2f6c12cd15 LibWeb: Fix flexible track sizing in GFC
- Change min track sizing function to be "auto" when flex size is
  specified.
- Never check if min track sizing funciton is flexible, because only
  max is allowed to be flexible.
- Address FIXME in automatic_minimum_size to avoid regressions after
  making two fixes mentioned above.

(cherry picked from commit 3270df476dd46b140e1b9de1e8328647744b56ab)
2024-07-21 14:19:12 -04:00
Aliaksandr Kalenik
409e3ae994 LibWeb: Subtract left inset from size_available_for_margins for abspos
Fixes https://github.com/LadybirdBrowser/ladybird/issues/712

(cherry picked from commit 0be57df54dd57d1544eead1c1bc8fe117c0a3450)
2024-07-21 14:13:42 -04:00
Aliaksandr Kalenik
c82f41dac8 LibWeb: Change grid item placement to look for area by boundary lines
Areas are disassembled into boundary lines on `build_grid_areas()` step,
so we can always use them to find grid item's position during placement.
This way we support both ways to define area: `grid-template-areas` and
implicitly using `-start` and `-end` boundary line names.

(cherry picked from commit 7a1f3f7ae3af2744e2f99df29baf09153d631b24)
2024-07-21 14:08:37 -04:00
BenJilks
456a09e8c7 LibWeb: Propagate margin and offset when computing a box's baseline
When traversing the layout tree to find an appropriate box child to
derive the baseline from. Only the child's margin and offset was being
applied. Now we sum each offset on the recursive call.

(cherry picked from commit 3c897e7cf3594f02f559599e1bf28747c9edba13)
2024-07-21 11:28:55 -04:00
BenJilks
2e95c03ca6 LibWeb: Change flex remaining space distribution to include gap
The remaining space is in addition to, not of in place of the
main gap.

(cherry picked from commit 47aee289d87add9784a2d722cb529774cdfb54e2)
2024-07-14 18:12:55 -04:00
Colin Reeder
bf0a7667a0 LibWeb: Handle inline-start and inline-end as float values
Should resolve #449 for LTR languages at least

(cherry picked from commit d427344f39581cd7789280949eb6d102b39218a3)
2024-07-14 16:45:48 -04:00
Tim Ledbetter
7d71a5483c LibWeb: Don't dispatch click events to disabled FormAssociatedElements
Disabled FormAssociatedElements also no longer receive focus when
clicked.

(cherry picked from commit e18501f67fb0361a10392bc626e6c43f26f1e9cc)
2024-07-14 16:45:21 -04:00
simonkrauter
5838244afc LibWeb: Use correct default value for <input type=range>
Previously the input element was displayed with value 0, when no value
was set in the HTML. Now it uses `value_sanitization_algorithm()`, which
will calculate the default value.
In `value_sanitization_algorithm()` there was a logical mistake/typo.
The comment from the spec says "unless the maximum is less than the
minimum".
The added layout test would fail without the code changes.
Fixes #520

(cherry picked from commit 191531b7b18d2edf97dc7bf88a9c19903eeae2d5)
2024-07-14 14:01:21 -04:00
rmg-x
435bbb53f8 LibWeb: Ensure normal line-height on HTMLInputElement
Previously, setting CSS `line-height: 0` on an `input` element would
result in no text being displayed.

Other browsers handle this by setting the minimum height to the
"normal" value for single line inputs.

(cherry picked from commit 629068c2a7eb02db37ffb4fe8d536306ee71e156)
2024-07-14 06:56:56 -04:00
BenJilks
aec3ab77ef LibWeb: When solving abspos lengths, use min max constrained height
Solving using the unconstrained height, when solving for bottom, would
either leave a gap over overflow its container.

(cherry picked from commit bee42160c5e2cdb949e6057f029391ee7e0fa9fa)
2024-07-13 22:52:34 -04:00
Luke Warlow
85b5be0a20 LibWeb: Implement :modal pseudo class
Adds the :modal pseudo class which matches dialogs opened with
showModal().

(cherry picked from commit 63a5ff70e5f3bee10839415885a158e304719fec)
2024-07-13 21:52:41 -04:00
Aziz Berkay Yesilyurt
32f513fc1c LibWeb/HTML: Update Text Input Styling
So that it is closer to the spec.
https://www.w3.org/TR/css-ui-4/#input-rules

(cherry picked from commit 13cd653d1ccf9ef486f4622e350614361e275a0c)
2024-07-13 18:22:56 -04:00
Arthur Hartwig Carlsson
fd35cb2730 LibWeb: Don't insert out-of-flow elements into block pseudo elements
Like 1132c858e9, out-of-flow elements such
as float elements would get inserted into block level `::before` and
`::after` pseudo-element nodes when they should instead be inserted as a
sibling to the pseudo element. This change fixes that.

This fixes a few layout issues on the swedish tax agency website
(skatteverket.se). :^)

(cherry picked from commit 9ed2669fc801a3475c9f383ae7221b6a2b1a7fa5)
2024-07-13 18:22:38 -04:00
Aliaksandr Kalenik
030ea71dff LibWeb: Use button layout for input elements with button type
(cherry picked from commit b2dcdf009605d50503592789ac14a8406b0d3983)
2024-06-27 19:02:45 +02:00
Andreas Kling
f72805398b LibWeb: Add the bare minimum to render SVGAElement (<a>)
(cherry picked from commit 85a4cfc59bc901e860ba60c51ad1fc9c0cf4e669)
2024-06-26 14:13:40 +02:00
Andreas Kling
19e4b138af LibWeb: Treat width: {min,max,fit}-content as auto if ratio unresolvable
This appears to match other engines.

(cherry picked from commit ae906ca4974da309c362e61ce7b6b393b8c4aed1)
2024-06-26 14:13:40 +02:00
Andreas Kling
97edca4e4e LibWeb: Fix overeager fallback to stretch-fit width for some flex items
If a flex item has a preferred aspect ratio and the flex basis is not
definite, we were falling back to using stretch-fit for the main size,
since that appeared to match other browsers.

However, we missed the case where we actually have a definite cross size
through which the preferred aspect ratio can be naturally resolved.

(cherry picked from commit db1faef786dbd1722bbe6a1f4a5616f3069bdb6a)
2024-06-26 14:13:40 +02:00
Andreas Kling
47d7a3648e LibWeb: Allow flex-basis: {min,max,fit}-content
(cherry picked from commit 9c02ace89785cbc185553dc2711f79c4ad1bf389)
2024-06-26 14:13:40 +02:00
Shannon Booth
dd20156010 LibWeb: Fix division by zero on a zero-height viewport SVG image 2024-05-19 07:19:42 +02:00
Shannon Booth
d48316ce15 LibWeb: Fix division by zero on a zero-width viewport SVG image
We were previously crashing by a division by zero due to an aspect ratio
of zero on https://comicbookshop.co.nz/
2024-05-19 07:19:42 +02:00
Shannon Booth
4fd7d58c51 LibWeb/Tests: Add a layout test for insertAdjacentHTML 2024-05-11 12:53:26 +02:00
Andreas Kling
34f2cbf202 LibWeb: Honor intrinsic constraints on available space in table widths
When a table's containing block provides min-content or max-content
available space, we now size the table's width accordingly.
2024-05-01 11:13:48 +02:00
goldenzach
65eb7699f4 LibWeb: Resolve vertical padding of inline elements 2024-04-25 12:45:39 +02:00