1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-10 07:07:36 +00:00
Commit graph

261 commits

Author SHA1 Message Date
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
Aliaksandr Kalenik
628efda754 LibWeb: Consider span > 1 while getting available space for items in GFC 2023-05-17 15:55:14 +02:00
Aliaksandr Kalenik
c61bb1706f LibWeb: Use auto minimimum size while resolving flexible tracks in GFC 2023-05-17 07:48:38 +02:00
Aliaksandr Kalenik
5f2264a2bd LibWeb: Skip non-spanning items sizing if there are no such items
Otherwise base_size and growth_limit for tracks that do not have any
spanning items will be overriden with wrong values.
2023-05-17 07:48:38 +02:00
Aliaksandr Kalenik
a3759b6e76 LibWeb: Implement more of "Expand Flexible Tracks" in GFC
Implements "Otherwise, if the free space is an indefinite length:" from
the spec.
2023-05-17 07:48:38 +02:00
Andreas Kling
2e13f65ff4 LibWeb: Support flex-basis: calc(...)
1. Propagate calc() values from StyleProperties to ComputedValues.
2. Actually resolve calc() values when determining the used flex basis.

This makes the "support" section on https://shopify.com/ show up
correctly as a 2x2 grid (instead of 1x4). :^)
2023-05-17 07:40:17 +02:00
Andreas Kling
e81d4ca1ac LibWeb: Fix off-by-one in CSS calc() "negate" operation
When negating a number, we should subtract it from 0, not 1. :^)
2023-05-17 07:40:17 +02:00
Andreas Kling
e938860126 LibWeb: Make text justification work between floats
While inline content between floating elements was broken correctly,
text justification was still using the original amount of available
space (without accounting for floats) when justifying fragments.
2023-05-16 14:35:10 +02:00
Andreas Kling
bab6796099 LibWeb: Rewrite calculation of available space between floats
This code now works in terms of *intrusion* by left and right side
floats into a given box whose insides we're trying to layout.

Previously, it worked in terms of space occupied by floats in the root
box of the BFC they participated in. That created a bunch of edge cases
since the code asking about the information wasn't operating in root
coordinate space, but in the coordinate space of some arbitrarily nested
block descendant of the root.

This finally allows horizontal margins in the containing block chain to
affect floats and nested content correctly, and it also allows us to
remove a bogus workaround in InlineFormattingContext.
2023-05-16 14:35:10 +02:00
Andi Gallo
9a6a635e51 LibWeb: Fix for absolutely positioned elements with specified height
Use inner height since the paintable adds padding back.

Fixes #18842.
2023-05-16 14:34:53 +02:00
Aliaksandr Kalenik
a613a0973e LibWeb: Reset item_incurred_increase before distributing space in GFC
item_incurred_increase should be reset before every next distirbution
because otherwise it will accumulate increases from previous
distributions which is not supposed to happen.
2023-05-16 07:47:47 +02:00
Andreas Kling
5d4e9a0673 LibWeb: Basic support for CSS text-indent: <length-percentage>
Note that this simple form of text-indent only affects the first line
of formatted content in each block.

Percentages are resolved against the width of the block.
2023-05-15 19:31:09 +02:00
Aliaksandr Kalenik
87a7299078 LibWeb: Start implementing sizing for tracks with span > 1 items in GFC
Partially implements:
- Increase sizes to accommodate spanning items crossing content-sized
  tracks
- Increase sizes to accommodate spanning items crossing flexible tracks

from https://www.w3.org/TR/css-grid-2/#algo-content
2023-05-14 19:32:34 +02:00
Aliaksandr Kalenik
dbafb11a7e LibWeb: Flesh out basic support of min-width/height for grid items
This change brings calculate_minimum_contribution() for grid items and
supporting functions.
2023-05-13 18:43:34 +02:00
Aliaksandr Kalenik
d187862f76 LibWeb: Return grid container width from automatic_content_width in GFC
automatic_content_width() should return grid container width that is
supposed to be set by determine_intrinsic_size_of_grid_container().
2023-05-13 12:53:25 +02:00
Aliaksandr Kalenik
de970c2dce LibWeb: Resolve grid items preferred width in GFC
Previously, the width and height of grid items were set to match the
size of the grid area they belonged to. With this change, if a grid
item has preferred width or height specified to not "auto" value it
will be resolved using grid area as containing block and used instead.
2023-05-11 18:37:06 +02:00
Aliaksandr Kalenik
c2f6ba8f5f LibWeb: Parse calc() function in grid sizes
Adds missing part of grid size parsing function to handle calc().
2023-05-11 18:36:56 +02:00
Andreas Kling
b98252728e LibWeb: Fix percentage min/max sizes on flex items with intrinsic ratio
We were resolving percentage values against the containing block size in
the wrong axis.
2023-05-10 18:46:04 +02:00
Andreas Kling
89ba7246dd LibWeb: Don't resolve CSS property values for unconnected elements
While it's possible to getComputedStyle() on an unconnected element,
the resulting object is not supposed to have any values, since we can't
resolve style without a document root anyway.

This fixes a crash on https://bandcamp.com
2023-05-10 17:27:07 +02:00
Andreas Kling
0c26717ba3 LibWeb: Adjust flex item main size through aspect ratio if needed
If there are min or max size constraints in the cross axis for a flex
item that has a desired aspect ratio, we may need to adjust the main
size *after* applying the cross size constraints.

All the steps to achieving this aren't mentioned in the spec, but it
seems that all other browsers behave this way, so we should too.
2023-05-10 13:03:05 +02:00
Aliaksandr Kalenik
14cb0067bb LibWeb: Implement more of "Resolve Intrinsic Track Sizes" in GFC
Implements some parts of "Resolve Intrinsic Track Sizes" algorithm
from spec to make it more spec compliant.
2023-05-10 05:52:47 +02:00
Andreas Kling
197efc8985 LibWeb: Improve handling of min/max constraint violations on images
Instead of bailing after resolving one violated constraint, we have to
continue down the list of remaining constraints.

We now also call the constraint solver for all replaced elements with
"auto" for both width and height.

Co-authored-by: 0GreenClover0 <clovers02123@gmail.com>
2023-05-09 12:11:28 +02:00
Emil Militzer
8200d1f68b LibWeb: Initial offset in reverse flex layout moved to opposite side
This change moves the initial offset for justify-content: center to the
opposite side if the flex layout is in the reverse direction.
2023-05-09 10:32:09 +02:00
Aliaksandr Kalenik
fb6b52b3fb LibWeb: Align GridFormattingContext::run_track_sizing() with the spec
1. Stop using -1 to indicate infinity value of growth limit. Just use
   INFINITY for that.
2. More complete implementation of "Expand Flexible Tracks" step.
3. Return AvailableSize from get_free_space: spec says that this
   function can return indefinite size and it is ok.
2023-05-09 06:37:30 +02:00
Aliaksandr Kalenik
f2323b5b99 Tests/LibWeb: Split input/grid/minmax.html into smaller tests 2023-05-09 06:37:30 +02:00
Aliaksandr Kalenik
0dcc93ed3d Tests/LibWeb: Split input/grid/gap.html into smaller tests
The file gap.html, which previously had multiple grid tests, has now
been divided into smaller files, each containing only one grid test.
It is going to make it easier to identify what inputs have been
affected by changes in layout code.
2023-05-09 06:37:30 +02:00
Aliaksandr Kalenik
bb90bf0141 Tests/LibWeb: Split input/grid/template-areas.html into smaller tests
The file template-areas.html, which previously had multiple grid tests,
has now been divided into smaller files, each containing only one grid
test. It is going to make it easier to identify what inputs have been
affected by changes in layout code.

Also this change removes parts of template-areas.html that we can't
layout correctly yet.
2023-05-09 06:37:30 +02:00
Andreas Kling
1ebae7a779 LibWeb: Stop changing width of block-level flex containers during layout
If the parent BFC can come up with a nice stretch-fit width for the flex
container, it will have already done so *before* even entering flex
layout. There's no need to do it again, midway through the flex layout
algorithm.

This wasn't just unnecessary, but we were also doing it incorrectly and
not taking margins into account when calculating the amount of available
space for stretch-fit. This led to oversized flex containers in the
presence of negative margins.

Fixes #18614
2023-05-08 15:56:00 +02:00
martinfalisse
ea61296738 LibWeb: Use layout-test-mode for layout tests
Also do some test changes to test it out :^)
2023-05-08 14:47:52 +02:00
Aliaksandr Kalenik
3a605d8c19 LibWeb: Set width in compute_width_for_table_wrapper()
Width of table wrapper need to be set to to calculate width of table
box inside. Otherwise TFC will set wrong width assuming width of
containing block is 0.
2023-05-07 06:31:53 +02:00
Andreas Kling
fc3c3aef22 LibWeb: Enforce min/max height constraints on abspos replaced boxes
Fixes #18658
2023-05-07 06:28:47 +02:00
0GreenClover0
8bb2663a22 LibWeb: Zero out margins if width is not 'auto' in BFC's compute_width
Reverse the condition to satisfy the spec comment. Probably a typo.
A 3 year old typo! :^)
2023-05-05 13:26:41 +02:00
Aliaksandr Kalenik
34b1186272 LibWeb: Remove early resolve to auto while calculating border-box width
`Length::resolved(Node&)` transforms infinite values to "auto".

Following transformations:
Infinite (Length) -> "auto" -> 0 (px)
cause border-box width to be resolved in zero when it should be inf px.

Removing `Length::resolved(Node&)` makes it work right:
Infinite (Length) -> Infinite (px)

Fixes #18649
2023-05-05 10:01:28 +02:00
Aliaksandr Kalenik
0318ac5ce4 LibWeb: Remove setting length to 0px if it is not definite
If available width (or height) is max-content and width (or height)
value is 100% it should be resolved in infinite px, not 0 px.

Fixes #18639
2023-05-05 06:20:44 +02:00
Aliaksandr Kalenik
853ecb8d8e LibWeb: Narrow width of boxes that create BFC to avoid overlap of float
https://www.w3.org/TR/CSS22/visuren.html#floats says that when a box
establishes BFC it should not overlap with floats. The way to avoid
overlaps is up to implementor. This change implements avoiding overlap
by narrowing width of a box because it seems like what other engines
do (in the scenarios I tested).
2023-05-04 06:14:58 +02:00
Andreas Kling
508927cae2 LibWeb: Take floats into account when measuring automatic width of IFC
When there are floats present inside an IFC, we must coordinate with
the parent BFC to calculate the automatic width of the IFC's block box.
This is because the IFC is not directly aware of floats. Only the BFC
knows enough about them to account for them in automatic sizing.
2023-05-03 19:49:43 +02:00
Andreas Kling
610a7603a2 LibWeb: Implement more box type transformation edge cases
In particular, we now blockify layout internal boxes (e.g table parts)
by turning them into `block flow`. This fixes a crash when viewing
our GitHub repo :^)
2023-05-03 16:04:30 +02:00
Aliaksandr Kalenik
09d698e0a0 LibWeb: Exclude table-wrapper margins from table available width
Table should not take up more width than is available inside wrapper
after margins are taken in account.
2023-05-03 15:03:56 +02:00
Aliaksandr Kalenik
f6ff37398c LibWeb: Fix intrinsic sizing when min or max width is specified
Fixes the problem that width is incorrectly computed in intrinsic
sizing mode when there are blocks that have min-width or max-width
specified.

Actually that is just the fix of a symptom of the larger problem that
Length::to_px() returns 0 when value is auto regardless of available
size.
2023-05-02 18:50:26 +02:00
Aliaksandr Kalenik
6cec431720 LibWeb: Set zero underflow when calculating intrinsic width of block
This fix resolves issue where calculating the min size of a block could
result in incorrect value if width of the block's children was
compensated by margins to fit into container width (which is equal to 0
during min size calculation).
2023-05-02 12:41:45 +02:00
Andreas Kling
00e3e82bbd LibWeb: Account for box-sizing:border-box in layout-less definite sizes
When we determine that a size is definite because it can be resolved now
without performing layout, we also need to account for the box-sizing
property.

This lets us remove a hack from flex layout where box-sizing:border-box
was manually undone at one point in the layout algorithm.
2023-05-02 11:47:13 +02:00
martinfalisse
22202715fc LibWeb: Parse grid-template property 2023-04-30 05:56:10 +02:00
Andreas Kling
5236819f58 LibWeb: Resolve horizontal auto margins for images with display: block 2023-04-30 05:52:19 +02:00
Aliaksandr Kalenik
e54ee7de96 LibWeb: Exclude borders from width available for table columns
Fix table box width calculation to minus horizonal borders from space
available for columns.
2023-04-29 16:08:48 +02:00
Aliaksandr Kalenik
d9f0c2a806 LibWeb: Implement "distribute height to rows" step in TFC
This commit implements following missing steps in table layout:
- Calculate final table height
- Resolve percentage height of cells and rows using final table height
- Distribute avilable height to table rows
2023-04-29 06:46:45 +02:00
Aliaksandr Kalenik
9fd51a59ff LibWeb: Fix division by zero in table columns width distribution
If total max columns width (grid_max) is zero then available width
should be divided equally between columns. Previously there was
division by zero: `column.max_width / grid_max`.
2023-04-29 06:46:45 +02:00
Emil Militzer
a8d08357c9 LibWeb: Compute inset for relative positioned inline-block 2023-04-28 18:12:02 +02:00
Aliaksandr Kalenik
2a1e58f8cc LibWeb: Consider cell computed height in total row min height of table
Previously, the minimum height of a table row was calculated based
on the automatic height of the cells inner layout. This change makes
computed height of a cell boxes also be considered if it has definite
value.
2023-04-28 06:17:07 +02:00
Aliaksandr Kalenik
9b4cd0dab7 LibWeb: Consider row computed height in total row min height of table
Fixes the issue that currently we do not consider table rows height
while calculating min row height even if it is definite value.
2023-04-28 06:17:07 +02:00
Andreas Kling
c0b4083b02 LibWeb: Blockify pseudo elements that are flex items
When deciding on a box type transformation (blockify/inlinify) for a
pseudo element, we have to use the originating element as a reference
rather than the parent.

(The originating element *is* the parent for its pseudo elements.)
2023-04-27 18:29:02 +02:00