Commit graph

146 commits

Author SHA1 Message Date
Aliaksandr Kalenik
6c5ba10bb0 LibWeb: Remove redundant check for empty anonymous blocks
It is incorrect to skip anonymous block containers without
line boxes during block auto height calculation because there
might be table roots wrapped in anonymous table boxes after fixup
and their height should be taken in account so leaving just
condition to skip child boxes which margins are "collapsed
through" (`border_box_height() == 0`) sufficient to skip
anonymous blocks without lines but still consider table wrappers.
2023-01-09 11:47:31 +01:00
Sam Atkins
c70dcaefcd LibWeb: Convert LayoutState to new pixel units 2023-01-05 17:42:31 +01:00
Sam Atkins
76047d1932 LibWeb: Convert InlineLevelIterator/LineBox/LineBuilder to new px units 2023-01-05 17:42:31 +01:00
Sam Atkins
ace66d4a3e LibWeb: Convert BlockFormattingContext to new pixel units 2023-01-05 17:42:31 +01:00
Sam Atkins
f5f25562d1 LibWeb: Convert FormattingContext to new pixel units
Just FormattingContext and AvailableSpace, and the minor adjustments to
make everything else work.
2023-01-05 17:42:31 +01:00
Sam Atkins
affc8a22ca LibWeb+WebContent: Convert BrowsingContext to new pixel units
This fixes a few glitches. We no longer give the page double the width
it should have, and we mark the correct area of the page as needing
repainting.
2023-01-05 17:42:31 +01:00
Aliaksandr Kalenik
8259ff12bd LibWeb: Margin bottom collapsing between parent and last child 2022-12-30 14:21:19 +01:00
Aliaksandr Kalenik
7088a87f49 LibWeb: Margin top collapsing between parent and first child
Implement collapsing of a box margin-top and first in-flow
child margin-top by saving function that updates y position
of containing block inside BlockMarginState and then for
every child until "non-collapsed through" child is reached
y position of containing block is updated by calling
update_box_waiting_fox_final_y_position_callback.
2022-12-30 14:21:19 +01:00
Aliaksandr Kalenik
fe8304d5de LibWeb: Introduce structure that maintains collapsible margins in BFC
Previously y position of boxes in block formatting context
was calculated by looking at y position of previous in-flow
sibling and adding collapsed margin of "collapse through"
boxes lying between box currently being laid out and it's
previous in-flow sibling.

Here introduced BlockMarginState structure that maintains
array of currently collapsible margins hence we no longer
need to look at previous sibling to calculate y position
of a box.
2022-12-30 14:21:19 +01:00
Aliaksandr Kalenik
992b4489ad LibWeb: Fix bug in BFC that independent FC assigned to wrong variable
Bug was introduced in 210bf8adf0c431be05659140fd6de3a2cc5b7d99
It makes new variable for independent_formatting_context instead
of using earlier declared one which means that
parent_context_did_dimension_child_root_box will never be called.
2022-12-16 09:57:37 +01:00
Sam Atkins
ab49dbf137 LibWeb: Convert Paintable coordinates to new pixel units
This fixes a few sizing issues too. The page size is now correct in most
cases! \o/

We get to remove some of the `to_type<>()` shenanigans, though it
reappears in some other places.
2022-12-14 16:47:57 +00:00
Aliaksandr Kalenik
3922349b71 LibWeb: Use space_used_by_floats to get x offset of box that creates BFC
y of box should be taken in account while calculating space
used by floats.
2022-12-11 22:08:44 +01:00
Aliaksandr Kalenik
daece542f5 LibWeb: Check if block creates BFC even if all it's children are inline
Even if block has all children inline there need to be a check
if it creates BFC because otherwise IFC will be looking in
wrong parent BFC to calculate space used by floats.
2022-12-11 22:08:44 +01:00
Aliaksandr Kalenik
7c00619e47 LibWeb: Use calculate_inner_width to compute min and max widths
Use calculate_inner_width that consider box-sizing in compute_width
to resolve min_width and max_width.
2022-11-23 23:11:39 +01:00
Aliaksandr Kalenik
428db6e766 LibWeb: Return max margin box width from greatest_child_width
Return max margin box width instead of max border box width
from greatest_child_width.

This change fixes:
https://wpt.live/css/CSS2/margin-padding-clear/margin-008.xht
2022-11-23 23:11:39 +01:00
Aliaksandr Kalenik
aa08c825ec LibWeb: Support box-sizing in BFC
Add support for box-sizing in block formatting context, support
for Flex Formatting Context and Grid Formatting Context is missing
2022-11-22 12:43:36 +01:00
Andreas Kling
db318aece0 LibWeb: Move should_treat_{width,height}_as_auto() to FormattingContext
These are not specific to BFC, so let's move them up to the super class
so that other layout classes can use them.
2022-11-03 19:22:40 +01:00
Andreas Kling
27b63feae5 LibWeb: Always resolve horizontal padding and borders on block-level boxes
We were neglecting to resolve the used horizontal padding and border
properties on block-level boxes when treating their width as `auto`
during intrinsic sizing.

This led to padding and border not contributing to the intrinsic width
of their containing block
2022-10-27 13:02:27 +02:00
Andreas Kling
4580e054f5 LibWeb: Place block-level boxes in both axes before doing inside layout
This ensures that static position calculations has access to final
box offsets.
2022-10-27 13:02:27 +02:00
Luke Wilde
488a979306 LibWeb: Layout inner floats/abspos boxes after laying out the top float
Calling parent_context_did_dimension_child_root_box immediately after
laying out the inside of the floating box is not correct, as we haven't
worked out the dimensions of the floating box yet.

In particular, this caused the icons in the top bar of Cookie Clicker
to not hug the top of the viewport. This is because the icons are
absolutely positioned elements inside a floating element which has
padding applied to it. Since we laid out the abspos element before
the floating element, it got padding values of 0 from the parent, the
default value, meaning it didn't take away the padding of it's floating
parent.

This follows how abspos boxes layout their inside boxes as well.
2022-10-24 21:12:19 +02:00
Andreas Kling
4b74f36cd0 LibWeb: Resolve vertical margins against containing block width
We were incorrectly resolving them against the available width, which
may or may not be the same as the containing block width.

The specification for these properties says that percentages resolve
against the containing block width, so that's what we should do.
2022-10-10 20:22:50 +02:00
Andreas Kling
b9a45cf1aa LibWeb: Don't try to layout inside of replaced elements in BFC 2022-10-06 18:29:52 +02:00
Andreas Kling
b13a8706e1 LibWeb: Make intrinsic heights dependent on available width
After speaking with fantasai at CSSWG about this, it turns out I had
misunderstood intrinsic heights. I originally believed all intrinsic
sizes had to be computed with no influence from the surrounding context.

As it turns out, intrinsic heights *are* influenced by the available
width, since it's needed to determine where lines break.

The APIs for calculating min-content and max-content heights now take
the available width as inputs. This instantly improves layout in many
cases where we'd previously make things way too wide.
2022-10-03 23:49:23 +02:00
Andreas Kling
de6d012367 LibWeb: Improve placement of abspos boxes with dual-auto insets
When an absolutely positioned box has auto insets on both sides of an
axis, it's placed according to the "static position rectangle". This is,
roughly, the rectangle a box would occupy if it were position:static
instead of position:absolute or position:fixed.

This patch implements a rough, but still significantly better,
estimation of such static positions. It gets pretty hairy in the case
where an abspos box has a parent whose children are inline.
2022-10-02 21:14:02 +02:00
Andreas Kling
9c44634ca5 LibWeb: Reorganize layout algorithms around available space
This is a big and messy change, and here's the gist:

- AvaliableSpace is now 2x AvailableSize (width and height)

- Layout algorithms are redesigned around the idea of available space

- When doing layout across nested formatting contexts, the parent
  context tells the child context how much space is available for the
  child's root box in both axes.

- "Available space" replaces "containing block width" in most places.

- The width and height in a box's UsedValues are considered to be
  definite after they're assigned to. Marking something as having
  definite size is no longer a separate step,

This probably introduces various regressions, but the big win here is
that our layout system now works with available space, just like the
specs are written. Fixing issues will be much easier going forward,
since you don't need to do nearly as much conversion from "spec logic"
to "LibWeb logic" as you previously did.
2022-10-02 21:14:02 +02:00
Andreas Kling
b55c4ccdf7 LibWeb: Don't try to format inline-block boxes in BFC
Inline-level block boxes are handled by IFC. BFC doesn't have to worry
about these.
2022-10-02 21:14:02 +02:00
Andreas Kling
f161e20e57 LibWeb: Make FormattingContext::run() take available space as input
Instead of formatting contexts flailing around to figure out from the
"inside" how much space is available on the "outside", we should
provide the amount of available space in both axes as an input to run().

This basically means that when something creates a nested formatting
context, the parent context is responsible for telling the nested context
how much space is available for layout. This information is provided
immediately when invoking run().

Note that this commit doesn't pass accurate values in all cases yet.
This first step just makes it build, and passes available values in some
cases where getting them was trivial.
2022-09-29 18:33:41 +02:00
Andreas Kling
0843960235 LibWeb: Use CSS::Size for computed size and max-size values
This patch changes the *computed* representation of the following CSS
properties to use CSS::Size:

- width, min-width, max-width
- height, min-height, max-height

A few things had to change in order for things to keep working,
but I tried to keep the diff to a minimum.

The main trouble was that `min-width` and `max-width` can't actually be
`auto`, but they *can* be `none`. We previously treated `auto` as a
valid value (and it behaved mostly like `none`).
2022-09-25 17:51:43 +02:00
Andreas Kling
f0ac687823 LibWeb: Remove awkward BFC::compute_theoretical_height() function
This was used by FFC to estimate the height of flex items after
performing layout inside them.

Now that we have automatic_content_height(), we no longer need this
awkward API and we can fold it into BFC's own height calculation.
2022-09-24 13:53:23 +02:00
Andreas Kling
62974160da LibWeb: Add FormattingContext::automatic_content_height()
This function should return the automatic height of the formatting
context's root box.

Until now, we've been relying on some magical handshakes between parent
and child context, when negotiating the height of child context root
boxes. This is a step towards something more reasonable.
2022-09-24 13:41:08 +02:00
Andreas Kling
a52d346839 LibWeb: Take coordinate spaces into account when clearing past floats
We were forgetting to convert to and from BFC root relative coordinates
when calculating how much clearance was needed to get past floats.

This fixes the last remaining issue on Acid1, which is now perfect. :^)
2022-09-22 17:06:49 +02:00
Andreas Kling
54fb5af9ee LibWeb: Use entire margin box of floats when testing for intrusions 2022-09-22 16:54:12 +02:00
Andreas Kling
77628289c6 LibWeb: Consolidate code for resolving vertical box model metrics in BFC
We already had a helper for this, but compute_height() wasn't using it.
Tweak it so that compute_height() can use it, and remove the duplicated
code that's now redundant.
2022-09-20 10:32:12 +02:00
Andreas Kling
412b2313f3 LibWeb: Improve inline flow around floating boxes
This patch combines a number of techniques to make inline content flow
more correctly around floats:

- During inline layout, BFC now lets LineBuilder decide the Y coordinate
  when inserting a new float. LineBuilder has more information about the
  currently accumulated line, and can make better breaking decisions.

- When inserting a float on one side, and the top of the newly inserted
  float is below the bottommost float on the opposite side, we now reset
  the opposite side back to the start of that edge. This improves
  breaking behavior between opposite-side floats.

- After inserting a float during inline layout, we now recalculate the
  available space on the line, but don't adjust X offsets of already
  existing fragments. This is handled by update_last_line() anyway,
  so it was pointless busywork.

- When measuring whether a line can fit at a given Y coordinate, we now
  consider both the top and bottom Y values of the line. This fixes an
  issue where the bottom part of a line would bleed over other content
  (since we had only checked that the top Y coordinate of that line
  would fit.)

There are some pretty brain-dead algorithms in here that we need to make
smarter, but I didn't want to complicate this any further so I've left
FIXMEs about them instead.
2022-09-16 15:15:50 +02:00
Ben Wiederhake
8deced39a8 LibWeb: Resolve cyclic declaration/definitions involving Length
This remained undetected for a long time as HeaderCheck is disabled by
default. This commit makes the following file compile again:

    // file: compile_me.cpp
    #include <LibWeb/CSS/GridTrackSize.h>
    // That's it, this was enough to cause a compilation error.
2022-09-15 14:45:38 +01:00
Andreas Kling
b8aa6a4453 LibWeb: Use PercentageOr<T>::contains_percentage() in CSS layout
By asking if the value *contains* a percentage rather than whether it
*is* one, we cover many more cases where e.g `width: calc(100% - 10px)`
should be "treated as auto" etc.
2022-09-14 14:43:17 +02:00
Andreas Kling
fb5879fdcc LibWeb: Don't include abspos children in containing block's auto width 2022-09-14 00:09:49 +02:00
Andreas Kling
54e0e85581 LibWeb: Treat percentage width/height as "auto" more consistently in BFC
Since we can't resolve percentage sizes against an indefinitely-sized
containing block, treat the sizes as "auto" in all these cases.
2022-09-13 17:03:31 +02:00
Andreas Kling
c9a7853fef LibWeb: Include all floating descendants in BFC root's automatic height
Before this change, we were only considering floating boxes that were
immediate children of the BFC root.
2022-09-13 17:03:31 +02:00
Andreas Kling
bfcb4d88cf LibWeb: Treat percentage heights as "auto" if unresolvable
If the containing block has indefinite height, we can't resolve
percentage heights against it. Instead of treating it as 0 by accident,
let's treat it as "auto" on purpose.

This brings back the cheek borders on Acid2.
2022-09-09 15:20:10 +02:00
Andreas Kling
3f960781fd LibWeb: Don't collapse vertical margins between floats
Just stack floats at their vertical margin edge instead of letting their
border boxes rub up against each other.
2022-09-09 15:20:10 +02:00
Andreas Kling
7ba6eb37fc LibWeb: Rename confusing parameter to layout_block_level_box()
It wasn't the content height, but rather the the bottom edge of the
lowest margin box.
2022-09-08 15:03:55 +02:00
Andreas Kling
af73a5d921 LibWeb: Use correct box edge when looking for space between floats 2022-09-08 15:03:55 +02:00
Andreas Kling
514fa83708 LibWeb: Improve float: right behavior
- Use the border box of the floated element when testing if something
  needs to flow around it.
- Take the floated element's containing block size into account (instead
  of the BFC root) when calculating available space on a line where a
  right-side float intrudes.
2022-09-07 17:47:33 +02:00
martinfalisse
65e7126c48 LibWeb: Factor out compute_y_position
Factor out the code that computes the vertical position of a Box with
respect to its siblings so that it can be used when computing the
absolutely positioned divs as well.
2022-08-14 11:22:52 +02:00
MacDue
6a6475673f LibWeb: Convert images to common AbstractImageStyleValue base
This commit moves both the ImageStyleValue and LinearGradientStyleValue
to a common base class of AbstractImageStyleValue. This abstracts
getting the natural_width/height, loading/resolving, and painting
the image.

Now for 'free' you get:

 - Linear gradients working with the various background sizing/repeat
   properties.
 - Linear gradients working as list-markers :^) -- best feature ever!

P.s. This commit is a little large as it's tricky to make this change
incrementally without breaking things.
2022-08-08 22:39:06 +02:00
MacDue
a6505f6e6d LibWeb: Allow % height of a % height parent in block-formatted elements
With this you can start to see Francine's face in the CSS oil painting
(https://diana-adrianne.com/purecss-francine/)
2022-08-07 22:52:22 +02:00
Andreas Kling
3ede8dbffb LibWeb: Rename IntrinsicSizeDetermination to IntrinsicSizing
This matches the exact terminology used in CSS-SIZING-3:
https://drafts.csswg.org/css-sizing-3/#intrinsic-sizing
2022-07-26 01:53:41 +02:00
Andreas Kling
71a707480c LibWeb: Move "has-definite-width/height" flags to UsedValues
This state is less static than we originally assumed, and there are
special formatting context-specific rules that say certain sizes are
definite in special circumstances.

To be able to support this, we move the has-definite-size flags from
the layout node to the UsedValues struct instead.
2022-07-26 01:53:41 +02:00
Andreas Kling
ed8930fff5 LibWeb: Add accessors for UsedValues::computed_{width,height}
This is preparation for doing some more work when assigning to these
values.
2022-07-19 15:40:41 +02:00