1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-28 14:45:07 +00:00
Commit graph

142 commits

Author SHA1 Message Date
MacDue
104642507a LibWeb: Fix box-shadows on elements smaller than the blur diameter
This commit adds some finagling and shrinking of the corner bitmap
to handle drawing shadows on elements where the shadow radius >
half the width or height of the element. Previously things would
go horribly wrong when this happend.

There could still be some edge cases, but things seem to be working
fairly well now.
2022-06-30 11:16:22 +02:00
MacDue
97e2e40e4c LibWeb: Fix off-by-one shadow position on non-integer positioned boxes
This fixes a issue due to the background/border painting using
.to_rounded<int>() to get an IntRect, but shadow painting was using
enclosing_int_rect().

enclosing_int_rect() uses some floors/ceils and does not always match
.to_rounded<int>().
2022-06-30 11:16:22 +02:00
MacDue
cb010fd1f8 LibWeb+LibGfx: Fix 'halo' effect around the fringes of shadows
This now allows passing a 'fill_color' to the blur, any fully
transparent pixels will be replaced with this color (with the alpha
set to 0).

For box-shadows, if this color is set to the same as the shadow,
the issues around the fringes are fixed. This also fixes some places
where dark shadows appeared light / the wrong color.
2022-06-30 11:16:22 +02:00
MacDue
eb3bbb1ddf LibWeb: Switch to using StackBlurFilter for shadow painting
With this change the blur no longer dominates the profile. On my PC
it is down to 27% (which is the same as the AA ellipse painting).

The box-shadow.html test page now also feels more responsive.
2022-06-30 11:16:22 +02:00
MacDue
ff1e61bd11 LibWeb: Support using a border-radius with a box-shadow
This commit adds support for using all your favorite border radii with
box-shadow, that is elliptical, circular, rounded rectangle etc. :^)

There is some work needed to make this more performant. The larger
your border radius is the larger the corner bitmap needs to be,
which means more time spent in FastBoxBlurFilter. There are probably
some tricks to bring this down.

Fixes #14325
2022-06-23 19:13:24 +01:00
MacDue
13c4c735b8 LibWeb: Add 'inside' clip mode to BorderRadiusCornerClipper
The default clip mode 'outside' clips everything outside the corner,
'inside' does the opposite :^)
2022-06-23 19:13:24 +01:00
MacDue
08baeb1e7d LibWeb: Pass border radii data to shadow painting
This is not used yet, but will be needed for painting shadows on
elements that have a border-radius.
2022-06-23 19:13:24 +01:00
MacDue
e4cca7886e LibWeb: Use the AA painter for drawing dotted lines
The AA painter will actually draw the dots as circles, which is
how other browsers handle this.
2022-06-18 02:34:56 +01:00
MacDue
c9a70ffff5 LibWeb: Fix 'background-repeat: round' calculation
Previously, this was slightly off and not doing what the spec comment
above asked for. This led to really small values for x_step and
y_step, making the `backgrounds.html' example use crazy amounts of
CPU whist painting.
2022-06-17 09:37:39 +01:00
MacDue
c491ab7523 LibWeb: Only paint the background image on integer steps
This avoids excessive over painting.
2022-06-17 09:37:39 +01:00
MacDue
4d110c39f3 LibWeb: Support using border-radius on <img> tags 2022-06-16 10:28:07 +01:00
MacDue
5b6abfadfd LibWeb: Make PaintableBox::normalized_border_radii_data() protected
This method is needed in subclasses of PaintableBox to do
border-radius clipping.
2022-06-16 10:28:07 +01:00
MacDue
4e8e1492f9 LibWeb: Support using border-radius with a background-image 2022-06-16 10:28:07 +01:00
MacDue
830632407f LibWeb: Add BorderRadiusCornerClipper
This is a helper class for clipping the corners off a element.

This works in a similar way to how (outline) borders are painted.

The steps are:
  1. A small bitmap that fits only the corners is allocated
  2. The corners are painted into the bitmap
  3. The existing pixels (where the corners will be painted)
     are copied using the (inverse) corner bitmap as a mask
     (done before the element is painted)
  4. The element is painted
  5. The areas outside the corner radii are restored

Like with the borders, this only requires allocation on the first
paint.
2022-06-16 10:28:07 +01:00
MacDue
4dfbbd5965 LibWeb: Move border corner bitmap getter/cache to function
This will allow the same bitmap to be shared between border,
background, and various other corner clipping code.
2022-06-16 10:28:07 +01:00
MacDue
c9b363de56 LibWeb: Fix regression in painting the 'caret' icon on GitHub
This commit reimplements the (normally) 45 degree (depends on
the widths) connection between to adjacent borders. Which is
needed to paint the 'caret' icon seen in a few buttons on GitHub.

The issue of overlapping pixels while painting this has also
been solved for the 45 degree case (the the most likely case,
the other cases only occur of mixed-with borders).
2022-06-14 14:13:18 +01:00
MacDue
9e71fa9aa7 LibWeb: Bring border painting much closer to the spec/other browsers
This commit adds some much nicer border painting, which now supports:

 - Elliptical corners
 - Blending between different border thicknesses, with rounded corners
 - Anti-aliasing

There are some little TODOs left to tackle:

 - Painting the corners with line styles other than solid
 - Blending between colors on the corners (see comments)

The painting requires allocating a small bitmap, that only fits the
corners (so in most cases this is very small).

This bitmap is then cached so for all paints but the first there will
be no further allocations.
2022-06-14 00:25:12 +01:00
Luke Wilde
076c9772a4 LibWeb: Add ability to present LibGL framebuffer and add clearing 2022-06-13 21:45:27 +01:00
MacDue
2b40dbfb30 LibWeb: Support elliptical background corners 2022-06-13 09:43:45 +01:00
MacDue
0e7aa1e98c LibWeb: Add flag to normalize border radii to width only
This is needed to avoid issues (such as overlapping curves) for outline
border radii, which do not currently support elliptical corners.
2022-06-13 09:43:45 +01:00
MacDue
28c78b45ca LibWeb: Keep both horizontal and vertical border radii till painting 2022-06-13 09:43:45 +01:00
MacDue
d2f0a1d9b1 LibWeb: Paint background border radius antialiased 2022-06-11 17:46:46 +01:00
MacDue
a705741be3 LibWeb: Paint list markers antialiased 2022-06-05 16:16:17 +01:00
DexesTTP
530aa51816 LibWeb: Remove a superfluous verify_cast on SVGGraphicsPaintable
Since the layout_box of a SVGGraphicsPaintable is already casted to the
right type, the underlying dom_node was also always of the right type.
This triggers a warning on Lagom builds.
2022-05-06 14:11:03 +02:00
Karol Kosek
ae28e3ff5c LibWeb: Use Unicode data for CSS text-transform property
Previously it was only transforming ASCII characters.
2022-05-04 23:21:34 +02:00
Sam Atkins
7c91fda088 LibWeb: Allow multiple text-decoration-lines
The spec grammar for `text-decoration-line` is:

`none | [ underline || overline || line-through || blink ]`

Which means that it's either `none`, or any combination of the other
values. This patch makes that parse for `text-decoration-line` and
`text-decoration`, stores the results as a Vector, and adjusts
`paint_text_decoration()` to run as a loop over all the values that are
provided.

As noted, storing a Vector of values is a bit wasteful, as they could be
stored as flags in a single `u8`. But I was getting too confused trying
to do that in a nice way.
2022-04-14 21:54:10 +02:00
Sam Atkins
a797a92990 LibWeb: Stop including StyleValue.h in a few places
I don't know how much this will actually help compile times, but it's
something!
2022-04-14 14:54:06 +02:00
Andreas Kling
5b72a9cb11 LibWeb: Use paint tree traversal helpers in StackingContext 2022-04-08 20:58:42 +02:00
Andreas Kling
dcbb83a33e LibWeb: Add some basic paint tree traversal helpers
Give the Paintable class some basic helpers for traversing the paint
tree. Note that they actually piggy-back on the layout tree for links
between nodes.
2022-04-08 20:58:42 +02:00
Simon Wanner
a2d89f11d1 LibWeb: Use the correct painter for painting stacking contexts
When cloning the PaintContext we should be using the painter backed by
the bitmap created for this stacking context layer.

Fixes: 54c3053bc3 ("LibWeb: Preserve paint state when painting...")
2022-04-08 20:44:23 +02:00
Andreas Kling
3c4bdd7cfa LibWeb: Ignore non-painting layout nodes when hit testing
We currently have to check this because the paint tree hangs from the
layout tree and has no independent means of traversal.
2022-04-07 17:06:02 +02:00
Karol Kosek
119873b822 LibWeb: Make default text-decoration-thickness a fraction of font height
Previously the default was always 1px, which didn't look great on higher
font sizes.

This changes the default thickness to one-tenth to the font height. The
one-tenth part was chosen arbitrarily, but I think it does the job
pretty well. :^)
2022-04-04 23:44:04 +01:00
Idan Horowitz
086969277e Everywhere: Run clang-format 2022-04-01 21:24:45 +01:00
Andreas Kling
6a4247bee9 LibWeb: Use more precise font metrics when doing inline layout
We now position inline-level boxes based on ascent and descent metrics
from the font in use. This makes our basic text layouts look a lot more
like those produced by other browsers. :^)

I've tried to match the terminology used by the CSS Inline Layout spec.

This will regress Acid2 a little bit, and probably various other sites,
but on the whole it's the direction we should be heading, so let's go.
2022-03-30 01:12:44 +02:00
Andreas Kling
fae8fde913 LibWeb: Draw inspector overlay label with default font 2022-03-30 00:57:15 +02:00
Andreas Kling
1c88536298 LibWeb: Use the new Gfx::Painter::draw_text_run() API for drawing text
This avoids a bunch of unnecessary work in Painter which not only took
time, but sometimes also led to alignment issues. draw_text_run() will
draw the text where we tell it, and that's it.
2022-03-30 00:57:15 +02:00
Andreas Kling
18048efce0 LibWeb: Don't round numbers too early when painting backgrounds
Preserve floating point precision and delay rounding until the last
moment when figuring out where to paint background layers. This fixes an
issue on Acid3 where a thin sliver of red was visible because the
background X position was incorrectly rounded by 1px.
2022-03-29 18:53:27 +02:00
Andreas Kling
0de488749f LibWeb: Use rounding instead of enclosing_int_rect() when painting
By using enclosing_int_rect(), borders and backgrounds of boxes were
sometimes 1 pixel off, making things slightly larger than they should
be. Fix this by using to_rounded() instead of enclosing_int_rect().

There's definitely more of these type of issues lurking in the code,
and we'll get to them in time.
2022-03-29 16:35:46 +02:00
Andreas Kling
c49c036c84 LibWeb: Stop allowing position:relative to affect layout
Relatively positioned boxes should not affect the *layout* of their
siblings. So instead of applying relative inset as a layout-time
translation on the box, we now perform the adjustment at the paintable
level instead.

This makes position:relative actually work as expected, and exposes some
new bugs we need to take care of for Acid2. :^)
2022-03-27 18:16:08 +02:00
Andreas Kling
b0208f38f6 LibWeb: Use Gfx::Font::pixel_size() when we want pixel metrics
This gives us consistent results with both bitmap and scalable fonts.
2022-03-27 01:14:56 +01:00
Andreas Kling
54c3053bc3 LibWeb: Preserve paint state when painting stacking contexts indirectly
For layers that require indirect painting (due to opacity, transform,
etc.) we create a nested PaintContext. Until now, that PaintContext
was created fresh without transferring all the state from the parent
PaintContext.
2022-03-26 17:31:01 +01:00
Linus Groh
9bc7912f84 LibWeb: Paint the focus outline using Painter::draw_focus_rect()
Now it actually looks like a classic focus outline and not some
misplaced border :^)
2022-03-26 01:35:39 +00:00
Linus Groh
642491fc74 LibWeb: Paint the focus outline actually *outside* the element
Instead of using the absolute_rect(), use absolute_border_box_rect() -
at least for PaintableBox - and inflate it by 2px on each side.

This looks much nicer for text input elements, especially when they have
padding, which would be applied outside the focus rect previously.
2022-03-26 01:35:39 +00:00
James Bellamy
7ab62ecd16 LibWeb: When painting, reduce computation cost by using the reciprocal
Rather than dividing the rect width and high by the border lengths,
this change multiples those lengths by the reciprocal of the width
and height because this is a faster operation. When mousing around on
the html spec website, the profile showed that inline painting
went from ~15% to ~3%
2022-03-25 21:32:19 +01:00
Timothy Flynn
e5db67d6dd LibWeb: Attach BackgroundAttachment::Fixed to the window view port
This fixes the placement of several background images on Acid2, most
notably the background of the eyes and the red rectangle near the bottom
of the head.
2022-03-25 20:11:04 +01:00
Sam Atkins
1499d2421e LibWeb: Align text shadows the same way we align text
This makes the shadow line-up correctly on Acid3. :^)
2022-03-24 20:30:26 +01:00
Andreas Kling
d5aca1c6c4 LibWeb: Treate SVG paintable coordinates as relative to <svg> element
Normally, paintable coordinates are relative to the nearest containing
block, but in the SVG case, since <svg> doesn't form a containing block,
we have to specialize the computation of SVGPaintable::absolute_rect().
2022-03-24 18:14:01 +01:00
Sam Atkins
5aad32b504 LibWeb: Implement text-shadow painting
We don't yet take the spread-distance parameter into account, since we
don't have a way to "inflate" the text shadow.

Also, I'm not sure if we need to inflate the shadow slightly anyway.
Blurred shadows of our pixel fonts seem very faint. Part of this is
that a blur of < 3px does nothing, see #13231, but even so we might
want to inflate it a little.
2022-03-24 18:08:34 +01:00
Sam Atkins
1094654adc LbWeb: Rename BoxShadowFoo => ShadowFoo
The `text-shadow` property is almost identical to `box-shadow`:
> Values are interpreted as for box-shadow [CSS-BACKGROUNDS-3].
> (But note that the inset keyword are not allowed.)

So, let's use the same data structures and parsing code for both. :^)
2022-03-24 18:08:34 +01:00
Jelle Raaijmakers
ab19b092ed LibGfx: Implement Rect::to_rounded<U>()
This replaces the usage of `rounded_int_rect`, whose name did not
accurately reflect the rounding operation happening. For example, the
position of the rect was not rounded but floored, and the size was
pulled through `roundf` before casting to `int` which could result in
inadvertent flooring if the resulting floating point could not exactly
represent the rounded value.
2022-03-23 11:53:34 +01:00