If a math function resolves to `<length>` or `<percentage>`, then it
will by definition also resolve to `<length-percentage>`. (Same for any
other basic types.) Since we were checking `<length-percentage>` first
and then bailing if no given properties could accept that, math
functions would always fail to match a property that just accepts a non
`-percentage` type.
This is a universal value like `initial` and `inherit` and works by
reverting the current value to whatever we had at the start of the
current cascade origin.
The implementation is somewhat inefficient as we make a copy of all
current values at the start of each origin. I'm sure we can come up with
a way to make this faster eventually.
Checking if CSSPixels contains a finite value is no longer makes sense
after converting to fixed-point arithmetics. Instead there should
assertion that used value is not saturated.
This patch implements "react to changes in the environment" from the
HTML spec and hooks HTMLImageElement up with viewport rect change
notifications (from the browsing context).
This fixes the issue where we'd load a low-resolution image and not
switch to a high-resolution image after resizing the window.
Note that we currently can't resolve calc() values without a layout
node, so when normalizing an image's source set, we'll flush any pending
layout updates and hope that gives us an up-to-date layout node.
I've left a FIXME about implementing this in a more elegant and less
layout-thrashy way, as that will require more architectural work.
A small workaround is needed here as <stop> elements don't create a
layout node, so we can't get the current color from value->to_color().
This fixes the gradients in the Atlassian logo and icons.
Allow the left margin of a box which creates a block formatting context
to overlap with left floating boxes which are siblings in the document
tree.
Fixes#20233 and the comment layout on https://lobste.rs.
Required by Atlassian to continue to their authorization process.
Also used by the SerenityOS FAQ redirect on the website, the Bootstrap
documentation for going to older versions from the dropdown and
likely several other sites.
This change makes tree builder omit elements with "display: contents"
from the layout tree during construction. Their child elements are
instead directly appended to the parent element in layout tree.
Before this change, we would process each image as it finished
downloading. This often led to a situation where we'd decode 1 image,
schedule a layout, do the layout, then decode another image, schedule
a layout, do the layout, etc. Basically decoding and layouts would get
interleaved even though we had multiple images fetched and ready for
decoding.
This patch adds a simple BatchingDispatcher thingy that HTMLImageElement
uses to batch the handling of successful fetches.
With this, the number of layouts while loading https://shopify.com/ goes
from 48 to 6, and the page loads noticeably faster. :^)
Transforms are a paint-level concept for us, so we should be okay to
only update the stacking context tree and repaint.
This makes a lot of CSS animations use way less CPU.
For malformed tables which only have cells with span greater than 1, the
content sizes for row and column aren't initialized to non-zero values.
Avoid undefined behavior in such cases, which sometimes show up on
Wikipedia.
When joined border width is zero width, then the midpoint
of the joined corner is no longer need to be computed
anymore. Just set the mid point to be the endpoint of the
corner.
Auto margins used together with justify-content would previously
result in children being positioned outside their parent. This was
solved by letting auto margins take precedence when they are used,
which was already implemented to some extent before, but not
fully.
Containers with both flex reverse and justify content would
sometimes place children outside the container. This happened
because it assumed any reversed container would have items
aligned to the right, which isn't true when using eg. `flex-end`.
Both `justify-content: start` and `justify-content: end` are now
also independent of the reverseness.
Click event logic should start as false, and after checking if the
mousedown and subsequent mouseup have been on the same element, and if
the node dispatches events it can become true.
This fixes the issue that clicking anywhere on the page, then dragging
the mouse on top of a link or button, then releasing triggers the link.
This is also happening when selecting text, if the selection stops over
a link, the page navigates.
After switching to fixed-point arithmetic in CSSPixels, it no longer
supports representing infinite values, which was previously the case
for remaining_free_space in FFC. Using Optional that is not empty only
when value is finite to store remaining_free_space ensures that
infinity is avoided in layout calculations.
In c66dbc99ee GFC was updated to use -1
as special value for the infinite growth limit. However, using Optional
instead reduces the risk of accidentally using -1 special value in
layout calculations.
Fixes broken border-radius painting because of lost precision while
converting back and forth between double and CSSPixels.
Fixed example:
```html
<style>
div {
border-radius: 9999px;
background: orange;
padding: 10px;
}
</style><div>huh</div>
```
This fixes an assertion on https://amazon.com/ since WindowProxy
would advertise "0" as an own property key, but then act like it was
a bogus property when actually queried for it directly.
Before this change, we always derived a box's baseline from its last
child, even if the last child didn't have any line boxes inside.
This caused baselines to slip further down vertically than expected.
There are more baseline alignment issues to fix, but this one was
responsible for a fair chunk of trouble. :^)
Using fixed-point saturated arithmetics for CSSPixels allows to avoid
accumulating floating-point errors.
This implementation is not complete yet: currently saturated
arithmetics implemented only for addition. But it is enough to not
regress any of layout tests we have :)
See https://github.com/SerenityOS/serenity/issues/18566
This is the preparation to use fixed-point to represent CSSPixels.
Previously, it was acceptable to divide CSSPixels by zero, resulting
in inf, but after migrating to fixed-point stored as an integer, it
would lead to undefined behavior.
This is preparation for introducing fixed-point CSSPixels in upcoming
commits.
Infinity is a valid state for the growth limit value of a grid track.
It was possible to use INFINITY when CSSPixels were represented using
floating point, but it won't work after the transition to fixed point,
which is represented using integers. This change addresses this by
using -1 as a special value to represent the infinite state of the
growth limit.
Follow the computing column measures section of the specification, which
gives an algorithm for setting intrinsic percentage widths when spanning
columns are involved.
